Free jQuery Contact Form

Take your forms to the next level with jQuery Contact Forms using Ajax and PHP

Free jQuery Contact Form Code with Ajax and PHP
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 forms and get a message right away
  • jQuery to support in-line 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.
How a jQuery Contact Form works with Ajax & PHP

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: 123ContactForm 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: Add some personality with CSS
After creating the HTML code for our sample jQuery contact form, it's time to add CSS so it looks great and works well. The CSS styling will:
  • Hide the validation messages
  • Display required fields in red (if they're not filled out)
  • Define the space around elements
  • Add background colors, shadows and borders to make the form look good
Check out the tab on the right to see what your final jQuery contact form will look like.

Step 3: 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.

See it in action
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 4: Process the data with PHP
Now that we've validated our contact form on the client side using jQuery, we're ready to use PHP 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.

<?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";
?>
Get more features by using our jQuery form builder with built-in validation
123ContactForm 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.

Take your forms to the next level with professional themes, custom CSS, domain aliasing, CAPTCHA image verification and much more.

Using 123ContactForm, you can publish any type of form to your website, blog or social platform, including Wordpress, Facebook, Joomla, Wix, Blogger and Twitter. Not writing code saves time and lets you focus on what matters to you.
Free jQuery form builder with built-in validation