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.
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
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!
// $_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";