Tutorials > Simple contact form with AJAX, jQuery and PHP
The HTML
<h1>Contact</h1>
<div id="contact-result"></div>
<form action="#" id="contact-form" method="post">
<label for="contact-n">Name:</label>
<input type="text" class="" name="contact-n" id="contact-n"/>
<label for="contact-e">Email address:</label>
<input type="text" class="" name="contact-e" id="contact-e"/>
<label for="contact-c">Comments:</label>
<div><textarea rows="6" cols="30" name="contact-c" id="contact-c"></textarea></div>
<input type="text" name="contact-b" id="contact-b" class="got-ya"/>
<span class="btn-submit">
<a class="contact-submit-btn" onClick="javascript:sendMessage();">Submit</a>
</span>
<span class="small">All fields are required.</span>
</form>
- This is the exact code behind the contact form on this website.
- The "contact-b" field, is not visible unless you view the source. I am "hidding" it using CSS (height : 1px; border-width : 0; width : 1px; background-color : #361414;). The reason I have this "pointless" field is because I want to catch any robots that will put a value in it. A normal user will skip this field.
The jQuery using AJAX
$(document).ready(function() {
sendMessage = function() {
var name = $('#contact-n').val();
var email = $('#contact-e').val();
var comments = $('#contact-c').val();
$('#contact-result').html("<img src='/images/loading.gif' alt=''/>");
if (name == ""){
$('#contact-result').html("<span class='error'>Please provide a name.</span>");
}
else if (email == ""){
$('#contact-result').html("<span class='error'>Please enter an e-mail.</span>");
}
else if ((jQuery.inArray("@", email) == -1) || (jQuery.inArray(".", email) == -1)) {
$('#contact-result').html("<span class='error'>Please enter a valid e-mail.</span>");
}
else if (comments == "") {
$('#contact-result').html("<span class='error'>Please provide a comment.</span>");
}
else if ($('#contact-b').val() == "") {
$.ajax({
type: "GET",
url: "/js/send-email.php?name="+name+"&email="+email+"&comments="+comments,
success: function(msg){
$('#contact-result').html(msg);
},
error: function(){
$('#contact-result').html("<span class='error'>Error!</span>");
}
});
}
else {
$('#contact-result').html("<span class='error'>I think you're a bot!</span>");
}
}
});
- To use jQuery you need to include the library first. You can either link directly to the google jQuery library: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js or download it.
- I assign variables to all the field values and I also put up the loading image
$('#contact-result').html("<img src='/images/loading.gif' alt=''/>");
, so that people don't get scared if things take too long.
- Then I validate the fields to make sure that they're not empty.
- This form just sends me an e-mail and it's not connected to any databases, so I'm not worried about any code injections.
- I'm also not worried about the "e-mail" field either. If someone doesn't want to give me their real e-mail, I just won't reply to them. I simply scan the e-mail string (array) for "." char and a "@" char, but mostly for a robot, rather than a user.
- If I have values for all the fields, and no value for "contact-b", my hidden, robot catcher field, I do the fun ajax part: I send an e-mail without reloading this page.
The PHP
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-type: text/plain");
$name = (isset($_GET['name']))? $_GET['name']:"";
$email = (isset($_GET['email']))?$_GET['email']:"";
$comments = (isset($_GET['comments']))? $_GET['comments']:"";
else {
$body = "Name: ". $name . "\r";
$body .= "Email: ". $email . "\r";
$body .= "Comments: ". $comments;
mail("youremail@provider.com", "subject line", $body, "From: ".$email);
echo "<span class='success'>Thank you for your message!</span>";
}
?>
- This is the code on send-email.php page
|
More Tutorials
Design
Coding
|
