This is an AJAX contact form... But i feel like i'm missing something...
I have three files: Contact.js, Process.php and my html contact page with the form..
Contact.js:
Code:
$(document).ready(function() {
$('#submit').click(function () {
var name = $('input[name=name]');
var email = $('input[name=email]');
var subject = $('input[name=subject]');
var message = $('textarea[name=message]');
if (name.val()=='') {
name.addClass('highlight');
return false;
} else name.removeClass('highlight');
if (email.val()=='') {
email.addClass('highlight');
return false;
} else email.removeClass('highlight');
if (subject.val()=='') {
subject.addClass('highlight');
return false;
} else subject.removeClass('highlight');
if (message.val()=='') {
message.addClass('highlight');
return false;
} else message.removeClass('highlight');
var data = 'name=' + name.val() + '&email=' + email.val() + '&subject=' + subject.val() + '&message=' + message.val();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('#cform').fadeOut('slow');
//show the success message
$('#done').fadeIn('slow');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
Process.php is empty
and my form
Code:
<h3>Drop us a line!</h3>
<form method="post" action="process.php" id="cform">
<p><input type="text" name="name" title="Name" /></p>
<p><input type="text" name="email" title="Email" /></p>
<p><input type="text" name="subject" title="Subject" /></p>
<p><textarea cols="3" rows="3" name="message" title="Message"></textarea></p>
<p><input type="submit" id="submit" value="Send your message" /></p>
</form>
<div id="done">
Thank you for contacting King Size Designs. We will get back to you as soon as possible! And hopefully we will be working together soon ;)
</div>
Am I missing something? It doesn't seem to work when I tested it...
Thanks guys!!
Kind regards