How to make custom Ajax form like contact form 7

8

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.

View Demo

3 baby 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.

View Demo
Download
All your suggestion and feedback are welcome.

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

8 Comments

  1. Hi, guy…

    Just go through trough your site , it looks nice and productive , can we share some knowledge regarding the same site i want to build . i am tech guy working last 4 years as php web developer . appreciate your work

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.