Creating a ajax contact form using jQuery and PHP


Today I’m going to show you how to make a ajax contact form. If you’ve a little knowledge about javascript, popular javascript library jQuery and php its for you.

Step 1

Lets start, First write some html for input boxes.

I don’t think I have to show you where this html should be placed. Place it where you want to display contact form.

Step 2

Now php will get the values(Name, email, message, ect) from contact form and send that to a desired email address.

I’m creating a php file contact.php

First it grabs the values then sends the values to a email using php mail function.

Step 3

Users input values, jQuery grab and send these values via ajax to contact.php for processing then contact.php send it to a email.

jQuery post method is pretty handy for this purpose.

This script works when submit event is performed. $.post accept 4 parameter, we didn’t use 4th parameter dataType.

The first one ‘contact.php’ is php file where we want to send the values for processing, the second one $(this).serialize() is the serialized values. And the third one is the callback function.

That’s it, Done 🙂

Source code

MH Rafi

Full stack Javascript developer at ThemEgret