3 Steps Simple PHP Contact Form With Google reCaptcha – Free Code Download

Welcome to a quick tutorial on how to create a simple PHP contact form with Google reCaptcha. So you want to put a contact form on your website, but is afraid of spam?

The simplified steps to creating a contact form secured by Google reCaptcha are:

  1. Register the website at Google reCAPTCHA admin panel, obtain the site key and secret key.
  2. Create the HTML contact form, load the reCAPTCHA Javascript library, and embed the site key.
  3. Upon submission, send the captcha response and secret key to the reCAPTCHA server for validation – If verified, send the contact form to the admin via email.

Yep, that covers the basics. While this may seem rather confusing at first, it is actually a pretty simple process… Just a hassle to run through the admin stuff. Read on for an actual example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes PHP Contact Form Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Register your websites with Google reCaptcha first.
  • Insert the site key into 2-form.php and secret key into 3-process.php.
  • Change $mailTo to your own in 3-process.php.
  • That’s all. Launch 2-form.php in the browser.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE 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.

 

 

PHP CONTACT FORM

All right, let us now get started with the PHP contact form.

 

STEP 1) REGISTER SITE AT GOOGLE RECAPTCHA

Go to the Google reCAPTCHA admin panel, and simply register your website. Please 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 (IPv4) ::1 (IPv6) into the domains list.


When you are done with the registration, Google will throw you a site key and secret key. Don’t have to copy them down on a piece of paper… We can always check back in the admin panel to get them later. 😆

 

 

STEP 2) THE CONTACT FORM 

2-form.php
<!-- (A) GOOGLE RECAPTCHA API -->
<script src="https://www.google.com/recaptcha/api.js"></script>
 
<!-- (B) PROCESS + NOTIFICATIONS -->
<?php
if (isset($_POST["name"])) { 
  require "3-process.php"; 
  echo $error=="" 
    ? "<div id='notify'>OK</div>"
    : "<div id='notify'>$error</div>";
}
?>
 
<!-- (C) CONTACT FORM -->
<form id="cform" method="post">
  <h1>Contact Us</h1>
 
  <label>Your Name</label>
  <input type="text" name="name" required/>
 
  <label>Email Address</label>
  <input type="email" name="email" required/>
 
  <label>Message</label>
  <textarea name="message" required></textarea>
 
  <!-- (D) CAPTCHA - CHANGE SITE KEY! -->
  <div class="g-recaptcha" data-sitekey="SITE KEY"></div>
 
  <input type="submit" value="Submit"/>
</form>

This may seem pretty intimidating to some beginners, but keep calm and look closely.

  1. We are simply loading the reCaptcha Javascript library here.
  2. This part will run only when the form is submitted, using 3-process.php to verify the captcha, and send the contact form via email.
  3. Self-explanatory. The contact form itself.
  4. Where you want the captcha to be at. Remember to insert the site key.

That’s all for the HTML form.

 

 

STEP 3) PHP PROCESSING

3-process.php
<?php
// (A) PROCESS STATUS
$error = "";

// (B) VERIFY CAPTCHA
$secret = "SECRET KEY"; // CHANGE THIS TO YOUR OWN!
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=".$_POST["g-recaptcha-response"];
$verify = json_decode(file_get_contents($url));
if (!$verify->success) { $error = "Invalid captcha"; }

// (C) SEND MAIL
if ($error=="") {
  $mailTo = "john@doe.com"; // ! CHANGE THIS TO YOUR OWN !
  $mailSubject = "Contact Form";
  $mailBody = "";
  foreach ($_POST as $k=>$v) { 
    if ($k!="g-recaptcha-response") { $mailBody .= "$k: $v\r\n"; }
  }
  if (!@mail($mailTo, $mailSubject, $mailBody)) { $error = "Failed to send mail"; }
}

This should not be much of a mystery… We are just sending the captcha and secret key to the reCaptcha server for validation. Thereafter, send the submitted contact form out via email.

 

 

EXTRA) AJAX FORM SUBMISSION

EXTRA-AJAX.php
// (B1) GET FORM DATA
var data = new FormData(document.getElementById("cform"));
// REQUIRED: APPEND CAPTCHA RESPONSE
data.append("g-recaptcha-response", grecaptcha.getResponse());
 
// (B2) AJAX FETCH
fetch("3-process.php", { method: "POST", body: data })
.then((res) => { return res.text(); })
.then((txt) => {
  // DO SOMETHING AFTER FORM SUBMISSION
  console.log(res);
});

How about submitting the form via AJAX? Simply append g-recaptcha-response: grecaptcha.getResponse() to the data, and POST to the server as usual.

 

USEFUL BITS & LINKS

Finally, here are a few extra bits and links that may be useful to you.

 

WHY NOT RECAPTCHA V3?

Please do take note that reCaptcha V3 works in a different manner. It is completely “silent”, no image challenge will be shown to the user, and the scripts will give you a score as to how likely the user is a bot. Sounds magical, but I personally don’t quite like the idea of it.

This very likely involves machine learning and data capturing. I.E. Data is captured on how the user interacts with your website. The score is then calculated based on a comparison against how other users usually interact with your website, and probably with other similar websites too. So, just nope. I rather stick with the “low tech” image challenge.

 

 

SECURITY STRENGTH

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 unwanted spam.

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

How To Create PHP Contact Form (click to enlarge)

 

USEFUL LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope it will help you to fight off some nasty spam on your website, and if you have stuff you wish to add to this guide, please feel free to comment below. Good luck and happy coding!

27 thoughts on “3 Steps Simple PHP Contact Form With Google reCaptcha – Free Code Download”

  1. I followed your instructions but I get a invalid captcha message. I have checked the input for site key and secret key are correct. I actually recreated them several times to be sure.
    Any clues?

Leave a Comment

Your email address will not be published.