Most of site have contact us form this code will help you to make it attractive contact us form
with php server side and javascript inline validation. Have any question do let me know,
Blow are step by step code so that you can integrate it easily in your page.
Step.1 PHP code:
code is fully comment so i don't giving its description.
Css is not require as much i use it for error display and
also to control the form container.
You can use your own css.
last part is html which is quite simple nothing difficult.
I am showing the error or success message depends on session message
with php server side and javascript inline validation. Have any question do let me know,
Blow are step by step code so that you can integrate it easily in your page.
Step.1 PHP code:
code is fully comment so i don't giving its description.
<?php
session_start();
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "rn";
$headers .= "Content-type:text/html;charset=utf-8" . "rn";
$headers .= 'From: ' . $from . "rn";
$headers.='X-Mailer: PHP/' . phpversion();
$result = @mail($to,$subject,$message,$headers);
if ($result) return 1;
else return 0;
}
if(isset($_POST) && $_SERVER['REQUEST_METHOD']=='POST'&&
$_POST['submit']=='Contact us'){
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];
/**********************************************************
server side validation for POST data
**********************************************************/
if(empty($name))
$errors[count($errors)] = 'Please enter name.';
if(empty($email))
$errors[count($errors)] = 'Please enter email id.';
if(empty($message))
$errors[count($errors)] = 'Please enter .';
if(!empty($email))
$validemail=eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+
(.[a-z0-9-]+)*(.[a-z]{2,3})$", $email);
if(!empty($email) && $validemail=='0')
$errors[count($errors)] = 'Invalid Email Address.';
if(!empty($message) && strlen($message)>250)
$errors[count($errors)] = 'only 250 charactors allow.';
/***************************************************************
end validation
*****************************************************************/
if(!$errors){
//recipient email addres
$to = 'name <example@gmail.com>';
//sender
$from = $name . ' <' . $email . '>';
//subject and the html messagem
$subject ='Contact us form';
$message = '<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
<tr><td>Name::::::
</td>
<td>' . $name . '</td></tr>
<tr><td>Email address::::::</td>
<td>' . $email . '</td></tr>
<tr><td>Message::::::</td>
<td>' . $message . '</td></tr>
</table>
</body>
</html>';
//send the mail
$result = sendmail($to, $subject, $message, $from);
if ($result) {
$errors[count($errors)]='Thank you! We have
received your message.';
for ($i=0; $i<count($errors); $i++)
$_SESSION['error'][$i]=$errors[$i];
//header to redirect on page with success message in session
header("location:".$_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING'].
"#error");
exit;
}
else {
$errors[count($errors)]='Sorry, unexpected error.
Please try again later';
for ($i=0; $i<count($errors); $i++)
$_SESSION['error'][$i]=$errors[$i];
//header to redirect on page with error message in session
header("location:".$_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING'].
"#error");
exit;
}
}else {
//save the errors message in session
for ($i=0; $i<count($errors); $i++)
$_SESSION['error'][$i]=$errors[$i];
//header to redirect on page with error message in session
header("location:".$_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING'].
"#error");
exit;
}
}
?>
Step.2 javascript code:<script type="text/javascript">
function field_empty(txtControl,errControl,msg) {
if(document.getElementById(txtControl).value=="") {
document.getElementById(errControl).style.display='block';
document.getElementById(errControl).innerHTML = msg;
document.getElementById(errControl).className = 'error';
}
else if(errControl=='errormessage'){
if(document.contactform.message.value=="" ){
document.getElementById('errormessage').style.display='block';
document.getElementById('errormessage').innerHTML
= 'Please enter message.';
document.getElementById('errormessage').className = 'error';
}
else if(document.contactform.message.value!="" &&
document.contactform.message.value.length>250){
document.getElementById('errormessage').style.display='block';
document.getElementById('errormessage').innerHTML =
'only 250 charactors allow.';
document.getElementById('errormessage').className =
'error';
}else{
document.getElementById('errormessage').innerHTML = "";
document.getElementById('errormessage').style.display='none';
document.getElementById('errormessage').className = '';
}
}
else if(errControl=='erroremail'){
var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
var address = document.contactform.email.value;
if(reg.test(address) == false) {
document.getElementById('erroremail').style.display='block';
document.getElementById('erroremail').innerHTML =
'Invalid Email Address.';
document.getElementById('erroremail').className =
'error';
return false;
}else{
document.getElementById('erroremail').innerHTML = "";
document.getElementById('erroremail').style.display='none';
document.getElementById('erroremail').className = '';
}
}
else {
document.getElementById(errControl).style.display='none';
document.getElementById(errControl).innerHTML = "";
document.getElementById(errControl).className = '';
}
}
function checkemail(contactform){
if (document.contactform.email.value=="")
{
document.getElementById('erroremail').style.display='block';
document.getElementById('erroremail').innerHTML =
"Please enter email id";
document.getElementById('erroremail').className =
'error';
document.contactform.email.focus();
return false;
}else if (document.contactform.email.value!="")
var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
var address = document.contactform.email.value;
if(reg.test(address) == false) {
document.getElementById('erroremail').style.display='block';
document.getElementById('erroremail').innerHTML =
'Invalid Email Address.';
document.getElementById('erroremail').className = 'error';
return false;
}
else{
document.getElementById('erroremail').style.display='none';
document.getElementById('erroremail').innerHTML = '';
return true;
}
}
function checkmessage(contactform){
if (document.contactform.message.value=="")
{
document.getElementById('errormessage').style.display='block';
document.getElementById('errormessage').innerHTML =
'Please enter message';
document.getElementById("errormessage").className = "error";
document.contactform.message.focus();
return false;
}
else if(document.contactform.message.value!="" &&
document.contactform.message.value.length>250){
document.getElementById('errormessage').style.display='block';
document.getElementById('errormessage').innerHTML =
'only 250 charactors allow.';
document.getElementById("errormessage").className = "error";
document.contactform.message.focus();
return false;
}
else{
document.getElementById('errormessage').style.display='none';
document.getElementById('errormessage').innerHTML = '';
document.getElementById("errormessage").className = "";
return true;
}
}
function namecheck(contactform){
if (document.contactform.name.value=="")
{
document.getElementById('errorname').style.display='block';
document.getElementById('errorname').innerHTML =
'Please enter name';
document.getElementById("errorname").className = "error";
document.contactform.name.focus();
return false;
}
else{
document.getElementById('errorname').style.display='none';
document.getElementById('errorname').innerHTML = '';
document.getElementById("errorname").className = "";
return true;
}
}
function validateform(contactform)
{
var message=checkmessage(contactform);
var email=checkemail(contactform);
var nam=namecheck(contactform);
if(email==false){
return false;
}
if(message==false){
return false;
}
if(nam==false){
return false;
}
else if(nam==true && email==true && message==true){
return true;
}
}
</script>
Step. 3 css:Css is not require as much i use it for error display and
also to control the form container.
You can use your own css.
<style>
.holder_form{
}
holder_form .required{
color:red;}
.error{
color: red;}
#holder_form p {
margin: 5px 0 10px;
}
</style>
Step.4 htmllast part is html which is quite simple nothing difficult.
I am showing the error or success message depends on session message
<div class="holder_form"
align="center">
<form id="contactform" method="post" action=""
name="contactform">
<p class="message-notes"> Required fields are marked
<span class="required">*</span></p>
<a id="error"></a>
<p ><?php
//error or success message showing here
if(isset($_SESSION['error']) &&
!empty($_SESSION['error'])){
for($j=0;$j<=count($_SESSION['error']);$j++)
echo "<span class='required'>".$_SESSION['error'][$j]."</span>
";
$_SESSION['error']='';
$_SESSION['error']=NULL;
}?>
</p>
<p class="message-form-author"><label for="author">
Name</label> <span class="required">*</span>
<input type="text" aria-required="true" size="30" value=""
name="name" id="name" onblur="field_empty('name','errorname',
'Please enter name');" onkeyup="field_empty('name','errorname',
'Please enter name');"></p>
<span id="errorname" ></span>
<p class="message-form-email"><label for="email">
Email</label> <span class="required">*</span>
<input type="text" aria-required="true" size="30" value=""
name="email" id="email" onblur="field_empty('email','erroremail',
'Please enter email id');" onkeyup="field_empty('email','erroremail',
'Please enter email id');"></p>
<span id="erroremail" ></span>
<p class="message-form-message"><label for="message">message</label>
<span class="required">*</span>
<textarea aria-required="true" rows="8" cols="45" name="message"
id="message" onblur="field_empty('message','errormessage','Please
enter message');" onkeyup="field_empty('message','errormessage',
'Please enter message');"></textarea></p>
<span id="errormessage" ></span>
<p >
<input type="submit" value="Contact us" id="submit" name="submit"
onclick=" return validateform(this);">
</p>
</form>
</div>
