Last Updated: August 10, 2018
· kunalvarma05

Create a Simple Ajax Contact Form with Jquery

Contact form's are seen almost all the sites across the web.
AJAX makes Contact Form AWESOME! Cuts-off the need for the Page to Reload. Let's get started:
Before writing jquery code for the contact form, we need to include the jquery file.
Let's write some jquery code for our contact form:

$('#contactform').submit(function() { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var dataString = 'name=' + name + '&email=' + email + '&message=' + message; $.ajax({ type : "POST", url : "save.php", data : dataString, cache : false, success : function() { $("#contactform").fadeOut(300); $("#notice").fadeIn(400); } }); return false; }); </code> </pre> The Summary The Complete code: HTML Form, send.js and save.php; are hosted on github. https://gist.github.com/4181040 When the form with id contact_form is submitted, Jquery AJAX, stores the values of the input elements. And those variables are sent to the save.php file with the dataString variable by Post method. And save.php saves the values into the database or whatsoever the purpose would be. And, with this, we are done! This was just to demonstrate how you can use AJAX to submit forms easily. You can see the working version on my site: http://tenuts.com Haven't written anything for validation though, just for demonstration purposes. Thanks and happy Coding :) P.S.: Comments, Opinions, Advice, Corrections and Revisions are always appreciated!

9 Responses
Add your response


You can use code formatting to make it more readable :)

over 1 year ago ·

@sadfuzzy I am still trying to get around, anyway, thanks :)

over 1 year ago ·

Just forked your Gist to update the JS/HTML : http://mlb.tl/LHxI

over 1 year ago ·

@mlb I can see your gist and your effort to remove the USELESSNESS...looking forward to your JS Function...:)

over 1 year ago ·

@krishyalla You can strip'em off via PHP. Here's the full code, simple for starters. https://gist.github.com/kunalvarma05/4181040

over 1 year ago ·

This isn't really for production purpose, so I'd recommend not using it on live sites/projects. It was just a demonstration.

over 1 year ago ·

plz use this form and add a file upload and show me your code!!! please ... thx a lot

over 1 year ago ·

Thanks for the new update and good help about the ajax http://fileexplorerwindows.com Actually my coding some time not sent the good response to the server which is the big issue for me and due to my page take too much time for it.

3 months ago ·

The AJAX part is not enough. You should also share the script for PHP contact form. When creating contact form, you also need to include the mail details, for example your email where the data from the form will be sent. You can find complete tutorial on creating a PHP contact form here.

2 months ago ·