Last Updated: February 25, 2016
· kunalvarma05
Pro pic

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!
Say Thanks

7 Responses
Add your response

Why s

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

over 1 year ago ·
Pro pic

@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 ·
Pro pic

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

over 1 year ago ·
Pro pic

@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 ·
Pro pic

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 ·
F2e8c5ae56765f0477097e8ad021cdce normal

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

over 1 year ago ·