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 add Google reCaptcha to secure it – Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

TUTORIAL VIDEO

 

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 server, 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 

<!-- (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 "<div id='notify'>$status</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

<?php
// (A) PROCESS STATUS
$status = "";

// (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) { $status = "Invalid captcha"; }

// (C) SEND MAIL
if ($status=="") {
  $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)) { $status = "OK"; }
  else { $status = "Failed to send mail"; }
}
echo $status;

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

// (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(txt);
});

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

 

 

 

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.

 

 

LINKS & REFERENCES

• Google reCAPTCHA home page
• Official Google reCAPTCHA developer’s guide
• PHP PDO
• PHP Mail
• Mail not sending out? Here’s how to fix it – Code Boxx