3 Steps Simple PHP Contact Form With Google reCaptcha (Free Download)

Welcome to a 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 are worried about spam? Well, let us walk through the steps to create a PHP contact form, and adding Google reCaptcha to secure it – Read on!

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

 

 

TLDR – QUICK SLIDES

 

TABLE OF CONTENTS

 

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.

 

SCREENSHOT

 

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 AT GOOGLE RECAPTCHA

1A) ADD YOUR SITES

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.

 

1B) GET THE KEYS


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) HTML 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">
  <label>Name</label>
  <input type="text" name="name" required>
 
  <label>Email</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. Load the reCaptcha Javascript library.
  2. This part will run only when the contact 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 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 = "admin@site.com"; // CHANGE 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

4-ajax.php
// (B1) GET FORM DATA - APPEND RECAPTCHA RESPONSE
var data = new FormData(document.getElementById("cform"));
data.append("g-recaptcha-response", grecaptcha.getResponse());
 
// (B2) AJAX FETCH
fetch("3-process.php", { method: "POST", body: data })
.then(res => 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.

 

EXTRA BITS & LINKS

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

 

WHY NOT RECAPTCHA V3?

Please 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, and 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!

33 thoughts on “3 Steps Simple PHP Contact Form With Google reCaptcha (Free Download)”

  1. Doesn’t work with Safari. The browser console gives this message: “The source list for Content Security Policy directive ‘script-src’ contains an invalid source: ”strict-dynamic”. It will be ignored.”

    A Google search turns up lots and lots of people complaining about this message when using Safari and ReCAPTCHA, but no solutions.

    1. Report this to Google and Apple… I cannot fix Safari and the ReCAPTCHA API. But chances are, they will continue to point fingers at each other and refuse a fix. 😆

  2. Hi It does work, thank you so much, but is there a way I can change the mail from field as I have a very oddly named server?

  3. 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. Required fields are marked *