AJAX Contact Form using jQuery with reCAPTCHA

In this tutorial we are going to create a Simple Contact form using jQuery, AJAX, PHP and reCAPTCHA to prevent spam. So why use AJAX?. AJAX does not require page reloads when user submits a form. When user clicks Submit button Email is sent instantly without page reloads. This makes the process easy and fast. We are going to learn how to make HTML Contact form with AJAX, jQuery Data validation and reCAPTCHA. reCAPTCHA effectively protects against spam and prevent abuse of contact form.

AJAX Contact Form with Recaptcha

If you are a bit familiar with HTML, PHP, jQuery then understanding this tutorial will be much easier. Here is how our form will look like after completion.

jQuery AJAX Contact Form with Recaptcha And HTML5 Validation

Configuration File:

reCAPTCHA can be enabled/disabled from this file. Please enter private key and public key before turning on reCAPTCHA. Get your reCAPTCHA keys from here.

 

HTML MARK UP:

Let’s start with writing HTML of the contact form. HTML contains Name, Email & Message Input fields. You  can add check boxes, radio buttons as per your requirement. You  might have noticed that we have not wrapped our fields with <form> </form> tags. This is because we  do not need them as we are using jQuery .val() function to get  values and using AJAX to post them to our server.

I have included reCAPTCHA code just after message field in this form also. If reCAPTCHA is enabled in config.php then it will show up and reCAPTCHA validation will also be performed server side via AJAX.
Submit button triggers the jQuery code which will collect all values and post data to contact.php with AJAX.

 CSS:

You can style your form as you require. I have already applied some styling to the form. It is included in <head> section. You can alter or create new one.

 jQuery AJAX:

Now we will write jQuery code to make AJAX calls. We will use $(document).ready() jQuery function. It means all jQuery code written in $(document).ready() will only work after page loading is complete.

In $(document).ready() function there is $(“#st”).click. #st is submit button id attached to .click JavaScript event. Clicking submit button triggers an event and all jQuery code in $(“#st”).click is executed.

.val() is used to collect input field data and $.post send data to contact.php using AJAX.

 contact.php:

AJAX requests are processed to contact.php, this file sends email to the recipient and responds back to the AJAX request in case of success or failure.

This file is simple and self explanatory. But I will briefly describe its working. This file receives POST data from contact form. Then reCAPTCHA is validated if enabled. Now POST data are sanitized using filter_var() function, after that we validate data server-side for security. Now PHP Mail is sent and json_encode is used to return success or error message which is then parsed by jQuery and shown to the user.

An error message is returned by file if reCAPTCHA is not validated or POST data is not validated or email is not sent.

So this is it! Now you can integrate this form to your website, don’t forget to include jQuery into the contact form page or download complete files for easy integration.

One Reply to “AJAX Contact Form using jQuery with reCAPTCHA”

  1. api says:

    Thanks, for this awesome tutorial, now exist to recatcha v2. but is a nice tutorial 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top