jQuery Ajax Contact Form with PHP

Last Updated on February 10, 2023 by Roshan Parihar

jQuery Ajax contact form allows users to submit and get the result without page refresh. You can also use PHP to collect data via emails to your email address.

Page refresh on form submission takes time to give results. The Ajax contact form is an efficient and useful method to give results to users without page refresh.

jQuery Ajax Contact Form with PHP

Collecting users’ queries without page refresh can give you better results. Ajax request sends form data to the PHP page and executes the PHP code to send emails instantly. Users will get response results in the blink of an eye with no reloading of the page.

If you want to give instant responses to your customers when they fill out and submit the form, you can start using the jQuery Ajax contact form on your website.

So, let’s get started.

How to Create jQuery Ajax Contact Form with PHP (Step-by-step)

Here is the step-by-step process on how to create a jQuery Ajax contact form with PHP:-

Step 1: Create jQuery Ajax Contact Form Design

To make your jQuery Ajax code work for your contact form, you have to add the latest jQuery library whose CDN URL is given below. It also contains the CDN URL of the font awesome icon to show the rotated icon until users get the result.

You have to add the below URL to the <head> section of your web page.

Now, let’s create the contact form structure with the essential form fields to collect users’ queries and make communication with them. The form fields Name, Email, and Message are enough for the contact form.

We are going to create the contact form design as shown in the image below.

jQuery Ajax Contact Form with PHP design

We have added the required attribute to each field to make them compulsory for the user to fill. Without filling in all the fields, users are not allowed to submit the form.

The main structure of the contact form is given below.

The above contact form code also contains the loader icon to display after form submission until users get results. However, it is a hidden state using the display:none; property of CSS.

Add CSS for Look & Feel

To make the above contact form beautiful, you have to add some CSS code as given below.

The above CSS code also contains code for the loader icon to display with the background and the middle position. The loader icon also does not allow users to do any other tasks until they get the result.

Step 2: Add jQuery Ajax Script to Submit Form Without Page Refresh

The jQuery code submits the form and gives results in data without page refresh. It sends the form data to the PHP file with the name ‘send-email.php’. You will get the PHP code of this file in the next step.

However, it requires a few seconds to execute the PHP code to send emails containing contact form data. After emails are sent to the recipient, you will get a success message that the form data via to the recipient.

During the execution time of the PHP code, you can display the loader icon to intimated users that the form is working in the backend.

loader icon display

It also does not allow users to click the form again until received the success message. I am using the show() and hide() to show/hide the loader icon during form submission.

Step 3: PHP Code to Email Contact Form Data with Validation

Finally, you need to add the PHP code in a separate file with the name ‘send-email.php’. The below code first collects the form data using a global variable $_POST. After that, it validates the email address to find out if it is valid or not.

It does not require to validate whether the fields are filled with data or left blank as we have already added the required attribute. The attribute is the built-in HTML attribute that makes sure that form fields should not leave blank. It will not allow users to submit without filling in each field.

The below code is commented enough to help you easily understand each link of code with comments. So, see the code to learn the use of them.

After submitting the contact form, you will get the success message as shown in the image below.

Success message

The above PHP code uses the mail() to send emails from the contact form. If you want to send emails via PHPMailer Gmail SMTP, you can read our post on contact form using PHPMailer Gmail SMTP to send emails

If you have any queries regarding this tutorial, please comment below. I will reply with solutions.

You May Also Like to Read

Leave a comment

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.