GD EXTENSION MUST BE ENABLED

To check if you have the GD extension enabled on your web server, all you need is a quick check by creating a simple script with the phpinfo function.

If the GD extension is not enabled, simply edit the php.ini file and do a search for “extension”. In most cases, you only need to remove the semi-colon in front to enable the extension. If not, simply add another line in the under the extensions section:

extension=gd2

PHP SCRIPT

THE QUICK SUMMARY

Yep, one script is all you need to rule them all. It may look like a bunch of complicated code at first, but there are only 3 functions here – Each corresponding to a step on how to implement it in your project.

Finally, there are some extra bits at the bottom of the script to start the session and create the captcha object. You can remove these if you want, and manually do it yourself in your own project.

STEP 1) CREATE A FORM

prime();
// DRAW YOUR HTML FORM ?>


  
    

      Name:
      Email:
      Are you human?
      
      
  

Nothing too complicated with this step:

• Include the captcha script right at the top, and it will automatically start the session plus create a captcha object.
• Call the prime function to generate a random captcha string into the session.
• Create your HTML form as usual, but add a captcha field and an image pointing to a PHP file that will generate the captcha image.

STEP 2) THE CAPTCHA IMAGE

draw();

This is probably the easiest step… Just create a PHP file and use the captcha library to generate the image.

STEP 3) VERIFICATION

THE JAVASCRIPT

function process() {
  // Append data
  var data = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
  data.append("captcha", document.getElementById("captcha").value);

  // Init AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "3-verify.php", true);

  // When the process is complete
  // JSON decode the server response
  xhr.onload = function () {
    // console.log(this.response);
    var res = JSON.parse(this.response);
    if (res.status) {
      // ALL OK
      // Redirect user to thank you page or something
      // window.location.href = "thank-you.html";
      alert("OK");
    } else {
      // ERROR
      alert(res.message);
      // THIS WILL REFRESH THE CAPTCHA IF YOU WANT
      var cimg = document.getElementById("captcha-img");
      cimg.src = "2-image.php?" + new Date().getTime();
      document.getElementById("captcha").value = "";
    }
  };

  // Send
  xhr.send(data);
  return false;
}

Next, we need to handle the form submission. Here is a dummy Javascript that will grab all the form data – Inclusive of the captcha challenge, and post it to the server via AJAX.

SERVER-SIDE SCRIPT

verify($_POST['captcha']);

// DO YOUR PROCESSING HERE
if ($verified) {
  // DO SOMETHING
  // REGISTER USER TO NEWSLETTER OR SOMETHING
  // RESPONSE
  unset ($_SESSION['captcha']);
  echo json_encode([
    "status" => 1,
    "message" => "OK"
  ]);
}

// INVALID CAPTCHA
else {
  // CREATE A NEW CAPTCHA IF YOU WANT
  $libCap->prime();
  echo json_encode([
    "status" => 0,
    "message" => "Invalid captcha"
  ]);
}

Finally on the server-side, all we need to do is to match the posted captcha string against the one in the session. If the challenge is successful, proceed with the processing as usual. If not, throw an error message back to the client-side, and ask to re-enter the captcha.

GOOGLE RECAPTCHA

Want to save some system resources? Check out Google Recaptcha instead (it’s free).

3 Steps Simple PHP Contact Form With Recaptcha

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
  

The post 3 Steps Simple Php Captcha Script (Free Download) appeared first on Code Boxx.