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 123ContactForm jQuery form builder.

Free jQuery Contact Form Code with Ajax and PHP
How to Create a jQuery Contact Form with Ajax and PHP
A slick contact form is one of the most important elements that your website should have. If you are building your contact form for the very first time, it is important to see what elements and functionalities you need to make it simple and useful experience for your visitors. Let’s take a look at the anatomy of a successful contact form:
  • A clean & responsive layout and design
  • A way to provide in-line validation
  • A solution to make the contact form success message appear in same page (no user redirect)

Why choose a jQuery Contact Form

Taking in consideration the required elements of mentioned, having a Simple Contact Form Using jQuery, PHP and Ajax is the deal. This is why:
  • HTML: Helps you build the structure of your contact form
  • PHP: The PHP coding is processing the contact form information on the server-side
  • Ajax: Allows users to simply click the send button and submit the contact form without refreshing the page
  • jQuery: It is useful for in-line validation
This tutorial is explaining how you cover all that mentioned functionalities and how to create a fully functional Simple jQuery Contact Form with Ajax and PHP. Take a look at the near picture and see how the form will look at the end.
The functionality of a jQuery Contact Form with Ajax & PHP

Creating your jQuery Contact Form in easy steps

Step 1: Start with HTML Markup
We will start by building the structure of our contact form using HTML coding. Simply create your index.php file and write down the HTML code of the fields that you want to add to your jQuery contact form.

In our example we will add the Name field, E-mail field, Message fields, and we will validate them using jQuery coding against:
  • Name field (validate for maximum length; check if input has been filled out)
  • E-mail field (validate for correct email format; validate field for maximum length)
  • Message field (validate for minimum and maximum length)
Let's look at right sided iframe to see how the HTML structure of your jQuery contact form looks like.
Step 2: Style away using CSS
After having wrote the HTML code of our sample jQuery contact form we have to add the CSS for a better structure and for making it nicer. The CSS styling is going to:
  • Hide the validation messages using the display:none property
  • Display in red the required fields error messages
  • Add margin properties which will define the space around elements
  • Use other CSS properties like background-color, box-shadow and border-radius to pretty things up
Check the "Results" tab from the right sided iframe to see how your final jQuery contact form will look like.

In the following next steps we will validate our form in both sides (client/ server) using jQuery.

Step 3: Add the jQuery and Ajax validation script to your contact form
The jQuery validation is a client-side validation, which basically means that jQuery validation elements are placed on each contact form field, and when the user enters information the validators are checking the information and, if necessary, they display an error message and blocks the form from being submitted.

The next step is to use Ajax coding to send collected data to our server. The Ajax code will help the user send the data to the server without having to reload the page. The jQuery library has a lot of built-in Ajax functions which sends the data to the server as plain HTML or JSON and the server will return JSON data, which will help us output the error messages.

See it in action
Test the jQuery contact form script on JSFiddle which is an interactive code editor that show you the code in action.

*Note, that in this particular example we cannot use a valid URL for our AJAX request, because of security issues inside JSFiddle. Instead we use an internal JSFiddle trick for responding to our AJAX request.
Step 4: Make the contact form work using PHP coding and test your new jQuery contact form in action!
As we validated our contact form on the client-sides through jQuery on the previous step, using PHP, we will process the data submitted and if everything is ok try to save it, returning a success message if everything is ok, or an error message if something 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 based on PHP, jQuery and Ajax that allows you to visually generate custom web forms with client-side & server-side validation.

It also offers plenty of customization and functionality options like professional form themes, custom CSS, domain aliasing, (Captcha image verification) and much more.

Using 123ContactForm jQuery form builder you can create any type of web forms and publish the generated code on any website, blog and social platform: Wordpress, Facebook, Joomla, Wix, Blogger, Twitter, to start with. That's it! No coding - more time saved.
Free jQuery form builder with built-in validation