Create an Awesome Contact Form – Part 3

If you haven’t completed the first two parts to this series, visit Part 1 here and Part 2 here.

So, I was going to leave this series after Part 2 as we’ve done everything required of us. We now have a working form, we are protected against the spammers, and it looks pretty decent as well. But we have one more stage to go. This is entirely optional, but we are going to look at using jQuery and AJAX to submit the form without refreshing the page. Scary stuff, or so it sounds. But it’s pretty easy really. The beauty of this is that if the user does not have Javascript enabled, the form will work like it should. So you don’t have to worry about users not being able to use the form.

Step 1

First you need to include jQuery in your code. The jQuery source is actually hosted on the Google CDN, so we will include it from there to save some of our server doing the work. Add this line into your head:

<script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script>

And now lets start off by adding another script tag and the code that makes sure jQuery only runs when the dom is ready:

<script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;>
$(function() {

});
</script>

Step 2: The Hook

If you remember, I gave a unique id to the paragraph that contains the submit button on our form. We are going to hook into that using jQuery:

$('#submit input').click(function() {

})

Step 3: The AJAX

So, it’s time. We’ve done everything we need to do, and now we use jQuery’s AJAX function to bring it all together. I’ll show you all the code, and then talk through it:

$('#submit input').click(function() {

dataString = $('form').serialize();
$.ajax({
type: "POST",
url: "example.php",
data: dataString,
success: function() {

$('#message').empty().html(&quot;<h2>Contact Form Submitted!</h2>&quot;);

}

});
return false;
});

Woah, that seems like a lot, right? On further inspection it’s pretty easy. The serialize() function collects all our form values together, ready to send to the PHP code. That’s all it does, and it’s very useful. Next, once we start our Ajax function, we need to define a few things. The type is POST, as we discussed in P1 of this series. The url is going to be the same page that your form is on, as we included all our PHP code in there. For me, it’s example.php. The data, what will be sent, we pass in the variable dataString, which is where we saved all our data earlier with the .serialize() function. Finally we create a function called success. This will only be called if everything goes to plan. All we do here is select our div with an id of message, empty it out, and then add a short message to let the user know. After all of that, we use the line return false. This cancels the button’s default action, which in this case is to send the data and reload the page. By canceling this and using Ajax we can do all the process without a refresh. How fancy is that?!

The beauty is that it will still use all our PHP validation code and if anything goes wrong it will still echo out the errors which we coded in Part 1. And, if you try using the form with Javascript disabled, it will act like it did after we finished Part 2.

Please make sure that you added the div with the id of message yourself, as we didn’t add that before this lesson. All I did was simply add the div so it surrounded the PHP code for displaying our errors.

All Done!

So that’s it for this 3 Part series. We’ve done a lot! We’ve looked at how to process and validate a form, including spam protection. We then styled it with basic CSS, and now we’ve “AJAXed” it with some simple jQuery. I hope you’ve enjoyed the 3 parts, if you have any feedback I’d love to hear it so please do leave a comment. As always if you have any questions or cannot get the code working, leave a comment as well and I’ll be happy to help out.

Click here to download files for the entire 3 part tutorial.