The aim of this tutorial is to help you to create a simple (tableless) contact form using AJAX & JQuery. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation functio
Read The Full Tutorial.
The aim of this tutorial is to help you to create a simple (tableless) contact form using AJAX & JQuery. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.
Step 1 - Creating the configuration file
config.php
<?php
// To
define("WEBMASTER_EMAIL", 'your_name@domain.com');
// Reply To
define("REPLY_TO", 'your_name@domain.com');
?>
Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).
Step 2 - Creating the css file
style.css
/*
Credits: Bit Repository
CSS Library: http://www.bitrepositiry.com/
*/
html, body
{
padding: 0;
border: 0px none;
}
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 4px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
/* Main DIV */
.main
{
width: 560px;
padding: 20px;
height: auto;
}
/* Left DIV */
.left
{
width: 140px;
margin: 0px;
padding: 0px;
float: left;
text-align: right;
}
/* Right DIV */
.right
{
width: 300px;
margin: 0px;
padding: 0px;
float: right;
text-align: left;
}
.area
{
clear: both;
width: 470px;
padding: 10px;
}
Step 3 - Creating the html contact page
contact.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TableLess Ajax Contact Form</TITLE>
<META NAME="Keywords" CONTENT="form, divs">
<META NAME="Description" CONTENT="A CSS Tableless Ajax Contact Form">
<!-- JQuery -->
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
/*
Credits: Bit Repository
URL: http://www.bitrepository.com
*/
$(document).ready(function(){
$("form").submit(function(){
var str = $("form").serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg){
$("#notification").ajaxComplete(function(event, request, settings){
// Message Sent? Show the 'Thank You' message and hide the form
if(msg == 'OK')
{
result =
'<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<center>
<!-- MAIN DIV (In this DIV we will include the left and the right DIV) -->
<div align="left" class="main">
<form action="javascript:alert('success!');">
<fieldset><legend>Contact</legend>
<div id="notification"></div>
<div id="fields">
<div class="area"><div class="left">Name</div>
<div class="right"><INPUT type="text" name="name" value=""></div>
</div>
<div class="area"><div class="left">E-Mail</div>
<div class="right"><INPUT type="text" name="email" value=""></div>
</div>
<div class="area"><div class="left">Subject</div>
<div class="right"><INPUT type="text" name="subject" value=""></div>
</div>
<div class="area"><div class="left">Comments</div>
<div class="right"><TEXTAREA NAME="message" ROWS="5" COLS="25"></TEXTAREA>
</div>
</div>
<div class="area"><div class="left"> </div>
<div class="right"><INPUT type="submit" name="submit" value="Send Message">
</div>
</div>
<div class="area"></div>
</div>
</fieldset>
</form>
</div>
</center>
</BODY>
</HTML>
Step 4 - Creating the functions’ script.
functions.php
<?php
function ValidateEmail($email)
{
# Name: Letters, Numbers, Dots, Hyphens and Underscores
# @ sign
# Domain: Up to 64 characters. Contains only letters, numbers and hyphens
# . sign
# Extension: Letters only (up to 10 (can be ++ in the future) characters)
$regex = "([a-z0-9_\-\.]+)". # name
"@". # at
"([a-z0-9-]+){2,64}". # domain
".". # period
"([a-z]+){2,10}"; # domain extension
$eregi = eregi_replace($regex, '', $email);
return empty($eregi) ? true : false;
}
?>
This file contains only the e-mail address validator, in our sample, but you can use it to add more (validation) functions which can be used in the contact.php page.
Step 5 - Creating the page which parses the data
contact.php
<?php
/*
Credits: Bit Repository
URL: http://www.bitrepository.com/
*/
include 'config.php';
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post)
{
include 'functions.php';
$name = stripslashes($_POST['name']);
$email = $_POST['email'];
$subject = stripslashes($_POST['subject']);
$message = htmlspecialchars($_POST['message']);
$error = '';
// Check name
if(!$name)
{
$error .= 'Please enter your name.';
}
// Check email
if(!$email)
{
$error .= 'Please enter an e-mail address.';
}
if($email && (ValidateEmail($email) == ""))
{
$error .= 'Please enter a valid e-mail address.';
}
// Check message (length)
if(!$message || strlen($message) < 15)
{
$error .= "Please enter your message.
It should have at least 15 characters.";
}
if(!$error)
{
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
"From: ".$email."\r\n"
."Reply-To: ".REPLY_TO."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
echo 'OK';
}
}
else
{
echo '
<div class="notification_error">'.$error.'</div>
';
}
}
?>
When the form is submitted, the JQuery script serializes the data that is sent to contact.php.
These values are sent to contact.php (using the “POST” method) and validated. If there are no errors and the mail is sent, the user will see a “Thank you message” and the form will be hided. Otherwise, the script will display the founded errors and the user will be asked to correct them.
source: bitrepository
|
Ajax Projects
