How to make custom Ajax form like contact form 7

Contact form 7 is one of the most popular contact form plugin for wordpress. I am impressed with the error validation style. I always wanted to use it in one of my custom project, So I coded it and used it in a project. I am sharing it with all of you and the tutorial will explain how to make a custom ajax form like contact form 7 (wordpress plugin). This form is not just limited to contact form you can use it for database manipulations or to submit any form via Ajax (without page reloading).

Where can you use this form?

You can use this form as your contact form on your website. You can use this form to fetch data asynchronously, or even to perform database manipulation like insert/ update/ delete records.

steps for creating form

• Setup your form fields and message container with unique ids.
• Validate the form with jquery
• Submit the form via ajax

Setup your form fields and message container with unique id’s

Give id to the form field and setup a container for displaying error/success messages.

As you can see above your_name has an ID as the field name and an equivalent container with err appended to it. Add a div with output class that will hold the notification for final form submission.

Stylize your form with css.

Validate the form with jQuery

I have used Jquery to validate the form. If there is an error on data validation, alert will be displayed above its relevant field.

Submit the form via ajax

Once the data is validated ( returns true) an ajax call is requested to the server side page, which returns error/success message in a json format. The result (json) is parsed and the message is notified to the user.

PHP page to process the form and return confirmation message.