Submitting Web Forms using AJAX and jQuery

Submitting forms using AJAX is a great way to enhance the usability of your website and reduce the number of clicks a customer needs to take in contacting you

In just a few simple steps, you can implement AJAX submission for any Web Form

We'll be using the handy jQuery framework to submit the actual form data and provide a fancy fade in message box informing the customer that their submission was successful

Note: This guide assumes that you've already copied the HTML code of your form and manually inserted it on a page, ready for editing.

Step 1. Assign the form an ID

First up, we need to assign an ID to the FORM element we're working with. This will allow the JavaScript code we'll be inserting later to target our form.

By default, Web Forms will not have an ID assigned, so we'll simply switch over to HTML mode and add one. For this example, we'll assign the ID "contact-form".

Step 2. Edit the form "action" URL

While we're working with the form, we need to find the "action" URL string and add the "JSON=1" parameter to it. This tells the Web Form to output the form values in JSON format, so we can then submit it using AJAX.

Simply find the "action" URL as highlighted above and add the following string to the end of it:

&JSON=1

Step 3. Include the JavaScript

Next, we need to include the jQuery library on our page, as well as some custom JavaScript for submitting the form. Copy and paste the following code to the top of the page your form is on. It should be placed above the FORM element

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function jqsub() {

var $form = $('#contact-form'); // set your form ID
var $messagebox = $('#message'); // set your message box ID
var $successmessage = "<h3>Thank You For Your Submission!</h3>"; // replace with your own success message in HTML format
var $errormessage = "<h3>Error - Please Try Again</h3>"; // replace with your own error message in HTML format

$j.ajax({
	type: 'POST',
	url: $form.attr('action'),
	data: $form.serialize(), 
	success: function (msg) { 
        if (msg.charAt(0) === '{') {
                        var formResponse = eval(msg);
                        
		        if (formResponse.FormProcessV2Response.success) {
                        $messagebox.append($successmessage) 
                        $messagebox.fadeIn();
                        }
                        else {
                        $messagebox.append($errormessage) 
                        $messagebox.fadeIn();	
                        }    
        		}},
	error: function (msg) {
                        $messagebox.append($errormessage) 
                        $messagebox.fadeIn();
                }
     });
}
</script>

Note: In this sample code, we're referencing a version of jQuery hosted on the jQuery site. If you are hosting the jQuery .js library on your site, simply change the src= tag to reference your own copy of the file.

For this example, the ID we assigned our form was "contact-form", so we've set the $form variable to target this specific ID. If you've assigned your form a different ID, make sure you replace #contact-form with a # followed by your ID eg. #myid.

You'll notice that we've also included code comments showing you how to customize the Success / Error messages and the ID of the message box element. For now, we'll leave them as they are.

Step 4. Insert the hidden message box

Once the form is submitted successfully, we're using jQuery to fade in a hidden message box element containing the "Thank You For your Submission!" message.

To insert this, simply copy and paste the following code where you'd like the box to placed on your page:

<div id="message" style="display: none;"></div>

For this example, we'll paste it in before the form, so it appears at the top of our page.

By default, the script will target any element with the ID "message", so either a) make sure you don't have any other elements using this ID or b) customize the $messagebox variable in the JavaScript code to target anoher ID.

Step 5. Call the function when a customer submits the form

The last step is to set up the form to trigger our jqsub(); function when a visitor fills out and submits the form. If we scroll through the HTML code of our form, you'll notice some JavaScript near the end of the form contents, wrapped in CDATA[ tags.

Don't panic! - all we need to do is find and replace theForm.submit(); with jqsub();

The end product should look something like this:

Once you've made all the changes to your form, simply Save and Publish the page.

Switching over to the frontend of the site, if we fill out the form and click "Submit", the form data will be processed via AJAX, with no page refresh and the "Thank You For your Submission!" message will fade in where we placed our hidden message DIV.

Naturally, you can customize the look and feel of message box DIV to suit your site using just CSS and HTML.