PHP Tutorial: Integrating Captcha Validation in Your PHP Website

0
Shares
PHP Tutorial: Integrating Captcha Validation in Your PHP Website
4.5 (90%) 4 votes

The contact form is one of the common features of most websites. Now simple contact forms work just fine, but if you want to make them nicer, use AJAX when you create simple PHP contact form with captcha validation to submit the form data.

One of the best benefits you get from AJAX is, there is no page load. And it is easy-to-integrate to any PHP and/or HTML website.

This is all ok, but why you should create with a captcha validation?

First, there are so many competitors on the market right now who want to spam you continuously. And to avoid that spamming, it is necessary to include captcha validation.
So in this PHP tutorial, we’ll make one sample webpage to demonstrate how to implement captcha validation in AJAX contact form.

Let’s Get Started

First, create a new PHP file and name it as index.php.

Now, write one image tag to show captcha in the contact form.

<form id="contact" action="javascript:void(0)" method="post" onsubmit="submit_form()">

    <h3>Contact Form</h3>

    <fieldset>

        <img src="captcha.php?rand=<?php echo rand(); ?>" id="captchaimg" height="50" width="350">

    </fieldset>

    <fieldset>

        <input placeholder="Captcha" type="text" tabindex="2" id="captcha_code">

        <span class="err captcha-err"></span>

    </fieldset>

    <fieldset>

        Can't read the above code? <a class="ccc" href="javascript:void(0);" onClick="refresh_captcha();">Refresh</a>

    </fieldset>

    <fieldset>

        <button name="submit" type="submit" id="contact-submit">Submit</button>

    </fieldset>

</form>

Now in the image tag, load a captcha library file that will generate captcha on the contact form using PHP functions.

<img src="captcha.php?rand=<?php echo rand(); ?>" id="captchaimg" height="50" width="350">

Take one link to refresh a captcha image, if it isn’t readable to the user.

<a class="ccc" href="javascript:void(0);" onClick="refresh_captcha();">Refresh</a>

After that, it’s time to validate captcha on AJAX call. Create one js file to check whether the captcha is valid or not.

$.ajax({

    method: "POST",

url: "thank_you.php",

data: { captcha: captcha_code}

});

Next, create another PHP webpage and name it as thankyou.php

In this page, we’ll check the captcha with session value and make the response with either true or false.

$response = 1;

if(empty($_SESSION['captcha_code']) || strcasecmp($_SESSION['captcha_code'], $_POST['captcha']) != 0)

{

    $response = 0;

}

echo $response; exit;

If it’s successful, it will redirect  the user to thank you page with the message.

success_captcha

If not, it will ask you to re-enter the captcha.

Invalid_captcha

Done!

If you face any problem, you can contact our PHP developers for help.

However, this was just a simple demo. You can build even more advanced contact form by using AJAX contact form builder.

It is designed to build custom contact forms and it’s light version of AJAX form pro.

So, if you want to build an advanced contact form using AJAX for your website, you can hire PHP developer from us.

Grab a free copy of AJAX Captcha Validation demo from Github.

This page was last edited on November 3rd, 2016, at 15:17.
 
0
Shares
 

Wanna Create PHP-based Website? Contact us NOW.

Get your free consultation now