Free jQuery Contact Form Code
Create your jQuery Contact forms with Ajax and PHP, as easy as 1-2-3 using a simple jQuery contact form code or the 123FormBuilder jQuery form builder.
How to create a jQuery contact form with Ajax and PHP
An attractive, interactive contact form is a key part of any website. If you’re building your contact form for the very first time, it’s important to make it as simple and useful as possible for your visitors.
So let’s take a look at what every great contact form needs:
- Clean, responsive layout and design
- Built-in data validation
- Confirmation message on the same page (no redirect)
Why jQuery?
To make sure your contact form is responsive, validates data and confirms receipt all at once, you’ll need four different languages:
- HTML to build the structure of your contact form
- PHP to process the data and send it to you
- Ajax so users can submit web forms and get a message right away
- jQuery to support inline validation so you get accurate data
This tutorial explains how to create a simple jQuery Contact Form with Ajax and PHP that meets all the requirements we’ve listed for a great contact form. Check out the picture below to see how the form will look when we’re done.
Create your jQuery contact form
Step 1: Start with HTML
Start by building the structure of your contact form using HTML. Just create an index.php file and write down the HTML code for the fields you want to add to your contact form. If you don’t know how to do this, it’s not a problem: 123FormBuilder will generate the jQuery contact form code for you.
In our example, we’ll add Name, E-mail and Message fields, then validate them using jQuery:
- Name field: validate for completion and maximum length
- E-mail field: validate for email format and maximum length
- Message field: validate for minimum and maximum length
Take a look at the panel on the right to see the HTML structure of your jQuery contact form.
Step 2: Validate with jQuery and Ajax
jQuery and Ajax each have their own unique validation capabilities. The jQuery validation elements in each contact form field check information as soon as users enter it and show an error message if anything’s wrong.
Ajax makes sure the valid data gets to your server without making users reload the page. jQuery includes Ajax functions that send data to your server as plain HTML or JSON. The server returns JSON data that helps us output error messages if we need to.
Test the jQuery contact form script on JSFiddle, an interactive editor that shows you the code in action.
* In this example, we can’t use a valid URL for our Ajax request due to security issues inside JSFiddle. Instead, we’re using an internal JSFiddle trick to respond to our Ajax request.
Step 3: Process the data with PHP
Now that we’ve validated our contact form on the client side using jQuery, we’re ready to use the PHP contact form code to process the data submitted. If everything looks good, we’ll save the data and send a confirmation message. If there’s a problem, we’ll send back an error message explaining what went wrong. Done!
123FormBuilder is a web form builder that includes PHP, jQuery and Ajax so you can easily generate beautiful custom web forms with built-in client-side and server-side validation, personalized design and email notifications. Create order forms for selling online, event registration forms for registering guests and other with complete support. Sign up now to give a try!
<?php
// $_REQUEST - the data that is coming from the form, through AJAX
$params = $_REQUEST;
// Do something with the parameters, probably you would like to save them in your database
if (everything_went_ok) echo "Everything is ok. Your submission was saved";
else (something_went_wrong) echo "There was a problem. Your submission could not be saved"; Ready to use form templates
We have a variety of read-to-go form templates that are built in HTML, jQuery, Ajax and PHP. Explore our web form templates collection and clone the one you need.
Customer Feedback Form
Contact Form
Enquiry Form
