Demo: an Ajax-powered contact form

This lesson covers

• Effects with jQuery
• jQuery’s utility functions
• Making Ajax requests
• Creating an accessible form

In the previous lesson we covered even more topics that belong to jQuery’s core. In between the discussion of the methods, utility functions, and flags, we showed you a lot of snippets of code, demos, and lab pages. All these examples should have given you more confidence with the arguments treated.

In lesson 7, we developed a demo to show you the power of jQuery in a real-world example. It employed many of the methods and techniques you had learned up to that point in the app. Then we introduced you to more advanced topics like effects and animations, utility functions, and, even more important, Ajax. The latter is a key concept and also a great technique to adopt to build your web pages.

In this lesson, we’ll tackle another real-world problem that many of you, sooner or later, will face: creating a contact form. Relying on the knowledge you’ve acquired so far, you’ll build not only a complete working contact form but also one that doesn’t require a reload of the page to inform the user about the failure or success in sending the message. Just like the previous lesson, you’ll use PHP as the language to develop the server-side part of the demo. If you don’t know much about PHP, don’t worry. The code will be so simple and well explained that you won’t have a hard time understanding it.

With this in mind, and without any further ado, let’s start.