REGISTRATION PROCESS

Go to the Google Recaptcha Admin Panel, and register your website. Please do take note that if you want to test the captcha on your local machine, you have to add localhost and/or 127.0.0.1 into the domains list.

When you are done with the registration, Google will throw you a bunch of keys and code fragments. We will be using these later, and don’t worry, they are actually very straightforward. You don’t have to copy them down on a piece of paper for now, you can always check back in the admin panel to get all the keys. 

EXTRA) SECURITY STRENGTH

Extra tip – If you are still getting a lot of spambot messages after implementing the captcha, you can change the security level. Go back to the Google Recaptcha Admin panel, turn the slider all the way to “most secure” under the advanced settings. Some users may get a more difficult captcha challenge, but it does filter out a lot of the unwanted spam.

THE CONTACT FORM 

  
    

      
Contact Us
      Your Name
      Email Address
      Message
      

      
  

The client-side HTML contact form is pretty much just a regular Joe form. But to implement the reCAPTCHA, you need to do 2 things:

• You need to insert the Javascript (that Google has provided) into the head section.
• Place the reCAPTCHA div wherever in the form that you want to display the captcha.

That’s it, you now have a fully functioning form with captcha.

THE CSS

html, body, input, textarea{
  font-family: arial;
}
#contact{ 
  background: #eee; 
  padding: 15px;
}
#contact label{
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
#contact input, #contact textarea{
  width: 100%;
  box-sizing: border-box;
}
#contact input[type=text], #contact input[type=email], #contact textarea{
  padding: 10px;
}
#contact input[type=submit]{
  background: #b9d1f7;
  border: 0;
  margin-top: 10px;
  padding: 10px;
}

Nothing much, just some cosmetics. Feel free to change these to fit your own website.

THE SCRIPT

success) {
  $to = "[email protected]"; // CHNAGE THIS TO YOUR OWN!
  $subject = "Contact Form";
  $message = "Name - " . $_POST['name'] . "
";
  $message .= "Email - " . $_POST['email'] . "
";
  $message .= "Message - " . $_POST['message'] . "
";
  if (@mail($to, $subject, $message)) {
    // Send mail OK - Show a nice thank you page or something
  } else {
    // Send mail error... Ask user to retry or give alternative
  }
} else {
  // Invalid captcha - Ask user to retry
}
?>

THE EXPLANATION

This script should be pretty straightforward and easy to understand:

• There are 2 parts to it, the top part will send the POSTED captcha code to Google for verification – Just remember to change the secret key to your own (obtained in step 1).
• After the verification is complete, the bottom half will formulate and send out the contact email.
• Again, this script is only barebones. Please change the “email to”, format the email nicely, and handle the errors properly – Maybe redirect the user back to the contact form and show the error messages.

THE AJAX CONTACT FORM

  
    

      
Contact Us
      Your Name
      Email Address
      Message
      

      
  

function ajaxsubmit() {
  $.ajax({
    url : "submit.php",
    method : "POST",
    data : {
      name : $('#name').val(),
      email : $('#email').val(),
      message : $('#message').val(),
      'g-recaptcha-response' : grecaptcha.getResponse()
    }
  }).done(function(res){
    // DO YOUR PROCESSING HERE
    console.log(res);
  });
  return false;
}

THE EXPLANATION

Actually, there is not much of a difference when you want to use AJAX to submit the form. Just create a new Javascript function to get the form values, then post it to the server side for processing; We can use the grecaptcha.getResponse() function in the Google API to get the captcha response and post it to our server-side script as usual.

QUICK START

Skipped the entire tutorial? There is no database required for this example, so just download and unzip into your project folder. Access form.html and just trace how it works from there – If you are planning to use AJAX, trace from form-ajax.html instead.

USEFUL LINKS

• Google reCAPTCHA home page
• The official Google reCAPTCHA developer’s guide

SOURCE CODE DOWNLOAD

Click here to download the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to.

The post 3 Steps Simple PHP Contact Form With Recaptcha appeared first on Code Boxx.