embocg
Last Updated: February 25, 2016
·
7.751K
· 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
Respond

7 Responses
Add your response

2062
Why s

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

over 1 year ago ·
2063
Pro pic

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

over 1 year ago ·
2073
81829def637962204635704c091036ea

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

over 1 year ago ·
2117
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 ·
5578
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 ·
5580
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 ·
17952
F2e8c5ae56765f0477097e8ad021cdce normal

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

over 1 year ago ·