Simple PHP Server-side verification of Google re-Captcha.

google-recaptcha-verification.php

<?php
	if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):

		// Your site secret key obtained from Google
		$secret = '#####################################';
		$grResponse = $_POST['g-recaptcha-response'];

		// Verify with Google Servers
		$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$grResponse);
		$responseData = json_decode($verifyResponse);

		if($responseData->success):
			// VERIFICATION SUCCESS
		else:
			// VERIFICATION FAILED
		endif;

	else:
		// INVALID REQUEST
	endif;
?>

<title>Check Re-captcha</title> <style> .form-wrapper-outer{ padding: 40px; border-radius: 8px; margin: auto; width: 460px; border: 1px solid #DADCE0; margin-top: 7%; }

    .field-wrapper{
        position: relative;
        margin-bottom: 15px;
    }
    
    .field-wrapper input{
        border: 1px solid #DADCE0;
        padding: 15px;
        border-radius: 4px;
        width: 100%;
    }

    .field-wrapper input:focus{
        border:1px solid #1A73E8;
    }

    .field-wrapper .field-placeholder{
        font-size: 16px;
        position: absolute;
        /* background: #fff; */
        bottom: 17px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #80868b;
        left: 8px;
        padding: 0 8px;
        -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        z-index: 1;

        text-align: left;
        width: 100%;
    }        
    
    .field-wrapper .field-placeholder span{
        background: #ffffff;
        padding: 0px 8px;
    }

    .field-wrapper input:not([disabled]):focus~.field-placeholder
    {
        color:#1A73E8;
    }
    .field-wrapper input:not([disabled]):focus~.field-placeholder,
    .field-wrapper.hasValue input:not([disabled])~.field-placeholder
    {
        -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
        transform: scale(.75) translateY(-39px) translateX(-60px);
        
    }


    .field-wrapper.field-error{
      border: 1px solid red;
    }
    .field-wrapper.field-error .field-placeholder span{
      color: red;
    }

    #message-wrap {
        padding: 15px;
        text-align: center;
        display: none;
        border-radius: 4px;
    }

    #message-wrap.success-msg{
      color:green;
      background: #e3ffd5;
    }
    #message-wrap.error-msg{
      color:red;
      background: #ffd5d5;
    }

</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>

</script>

	  	<div class="form-wrapper-outer">

		    <form action="#" method="POST" name="htmlform" id="test-form" novalidate>
		      <div class="field-wrapper">
		        <div id="message-wrap">
		          <span></span>
		        </div>
		      </div>
		      <div class="field-wrapper">
		        <input type="email" name="email" class="form-checkfield" id="" required>
		        <div class="field-placeholder"><span>Enter your email</span></div>
		      </div>
		      <div class="field-wrapper">
		        <input type="text" name="name" class="form-checkfield" id="" required>
		        <div class="field-placeholder"><span>Enter your name</span></div>
		      </div>
		      <div class="field-wrapper">
		        <input type="text" name="phone" class="form-checkfield" id="" required>
		        <div class="field-placeholder"><span>Enter your phone</span></div>
		      </div>
		      <div class="field-wrapper">
		        <div id="google_recaptcha"></div>
		      </div>
		      <div class="field-wrapper">
		        <input type="button" id="submit-test-form" value="Submit">
		      </div>
		    </form>

		  </div>


		<script>
			
			    var onloadCallback = function() {
			        grecaptcha.render('google_recaptcha', {
			          'sitekey' : '6Le3A4sUAXXXXXXXXXXXXXXXXXXbHuaqTWk0-'
			        });
			      };
			      
			      $(function () {
			        //Check if required fields are filled
			        function checkifreqfld() {
			                var isFormFilled = true;
			                $("#test-form").find(".form-checkfield:visible").each(function () {
			                    var value = $.trim($(this).val());
			                    if ($(this).prop('required')) {
			                        if (value.length < 1) {
			                          $(this).closest(".field-wrapper").addClass("field-error");
			                          isFormFilled = false;
			                        } else {
			                          $(this).closest(".field-wrapper").removeClass("field-error");
			                        }
			                    } else {
			                        $(this).closest(".field-wrapper").removeClass("field-error");
			                    }
			                });
			                return isFormFilled;
			          }

			        //Form Submit Event
			        $("#submit-test-form").click(function () {
			            if (checkifreqfld()) {
			              event.preventDefault();
			              var rcres = grecaptcha.getResponse();
			              if(rcres.length){
			                grecaptcha.reset();
			                showHideMsg("Form Submitted!","success");
			              }else{
			                showHideMsg("Please verify reCAPTCHA","error");
			              }
			            } else {
			                showHideMsg("Fill required fields!","error");
			            }
			        });

			        //Show/Hide Message
			        function showHideMsg(message,type){
			          if(type == "success"){
			            $("#message-wrap").addClass("success-msg").removeClass("error-msg");
			          }else if(type == "error"){
			            $("#message-wrap").removeClass("success-msg").addClass("error-msg");
			          }

			          $("#message-wrap").stop()
			          .slideDown()
			          .html(message)
			          .delay(1500)
			          .slideUp();
			        }


			        //Google Style InputFields
			        $(".field-wrapper .field-placeholder").on("click", function () {
			          $(this).closest(".field-wrapper").find("input").focus();
			        });
			        $(".field-wrapper input").on("keyup", function () {
			          var value = $.trim($(this).val());
			            if (value) {
			              $(this).closest(".field-wrapper").addClass("hasValue");
			            } else {
			              $(this).closest(".field-wrapper").removeClass("hasValue");
			            }
			        });
			      });

		</script>

</body>