Create contact form and send mail using PHP

                                  PHP allows you to create custom forms like contact form , registration form, login form. A websites should contains contact form for user contact them. You can create contact form and send user details to website owner using PHP mail. Let see create contact form using PHP.

1. Create contact form in HTML

                                 You need to create front end design for user view. This is the static page which is developed using HTML. It should be below HTML code.

<form action="#" method="post">
      <table id="tbl" align="center">
       <tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
       <tr><td>Phone:</td><td><input type="text" name="phone" id="phone"></td></tr>
  <tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
  <tr><td>Message:</td><td><textarea rows="5" cols="25" name="message" id="message"></textarea></td></tr>
       <tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
      </table>

     </form>

2. Add CSS to HTML form

                             When you run above HTML file, it should not be attracted by user. So you need to add some CSS to that HTML file in order to make your contact form as attractive. Some of CSS styles are below.

 body {
 color:white;
 font-size:14px;
 }
 .contact {
    text-align:center;
    background: none repeat scroll 0% 0% #8FBF73;
    padding: 20px 10px;
    box-shadow: 1px 2px 1px #8FBF73;
    border-radius: 10px;
width:510px;
 }
 #name, #phone, #mail, #message {
    width: 250px;
    margin-bottom: 15px;
    background: none repeat scroll 0% 0% #AFCF9C;
    border: 1px solid #91B57C;
    height: 30px;
    color: #808080;
    border-radius: 8px;
    box-shadow: 1px 2px 3px;
}
#message {
 height:150px;
 width:300px;
}
#submit
{
    background:none repeat scroll 0% 0% #8FCB73;
    display: inline-block;
    padding: 5px 10px;
    line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
    border-radius: 8px;
    border: 1px solid #8FCB73;
    text-decoration: none;
    opacity: 0.9;
    cursor: pointer;
color:white;
}
#er {
    color: #F00;
    text-align: center;
    margin: 10px 0px;
    font-size: 17px;

}

3. Add javascript for form validation

                                 Then you've to validate your form using javascript. You can validate empty textbox, validate valid email id and valid phone number using below javascript.

$(document).ready(function() {
$('#submit').click(function() {
var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var mail=document.getElementById('mail').value;
var message=document.getElementById('message').value;
var ph = /^([0-9-+]+)$/;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
 $('#er').html('Enter your name');
 return false;
}
if(phone=='')
{
 $('#er').html('Enter your phone number');
 return false;
}
if(!ph.test(phone) || phone.length!=10)
{
 $('#er').html('Enter valid phone number');
 return false;
}
if(mail=='')
{
 $('#er').html('Enter your mail');
 return false;
}
if(!chk.test(mail))
{
 $('#er').html('Enter valid email');
 return false;
}
if(message=='')
{
 $('#er').html('Enter your message');
 return false;
}
});

});

4. Send mail using PHP

                                   After designed HTML form, you need to get user details and send it to website owner using PHP mail(). Visit How to send mail using PHP. Let see below PHP script for send mail.

if(isset($_POST['submit']))
 {
  $name=$_POST['name'];
  $phone=$_POST['phone'];
  $mail=$_POST['mail'];
  $message=$_POST['message'];
  $to='guruparthiban19@gmail.com';
  $header='From: '.$mail;
  $subject=$name.' contacts you';
  $body="Name: ".$name."\n";
  $body.="Phone: ".$phone."\n";
  $body.="Email: ".$email."\n";
  $body="He/She says ".$message."\n";
  $m=mail($to,$subject,$body,$subject);
  if($m)
  {
   echo"<script>Message send successfully</script>";
  }
  else
  {
   $er="Message not sent";
  }
 }

5. PHP script for create contact form and end mail

                                      Combine above all script and make one PHP file with .php extension. This is the contact form of your website. It should be like below.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
 body {
 color:white;
 font-size:14px;
 }
 .contact {
    text-align:center;
    background: none repeat scroll 0% 0% #8FBF73;
    padding: 20px 10px;
    box-shadow: 1px 2px 1px #8FBF73;
    border-radius: 10px;
width:510px;
 }
 #name, #phone, #mail, #message {
    width: 250px;
    margin-bottom: 15px;
    background: none repeat scroll 0% 0% #AFCF9C;
    border: 1px solid #91B57C;
    height: 30px;
    color: #808080;
    border-radius: 8px;
    box-shadow: 1px 2px 3px;
}
#message {
 height:150px;
 width:300px;
}
#submit
{
    background:none repeat scroll 0% 0% #8FCB73;
    display: inline-block;
    padding: 5px 10px;
    line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
    border-radius: 8px;
    border: 1px solid #8FCB73;
    text-decoration: none;
    opacity: 0.9;
    cursor: pointer;
color:white;
}
#er {
    color: #F00;
    text-align: center;
    margin: 10px 0px;
    font-size: 17px;
}
</style>
</head>
<body>
<?php
 error_reporting('E_ALL ^ E_NOTICE');
 if(isset($_POST['submit']))
 {
  $name=$_POST['name'];
  $phone=$_POST['phone'];
  $mail=$_POST['mail'];
  $message=$_POST['message'];
  $to='guruparthiban19@gmail.com';
  $header='From: '.$mail;
  $subject=$name.' contacts you';
  $body="Name: ".$name."\n";
  $body.="Phone: ".$phone."\n";
  $body.="Email: ".$email."\n";
  $body="He/She says ".$message."\n";
  $m=mail($to,$subject,$body,$subject);
  if($m)
  {
   echo"<script>Message send successfully</script>";
  }
  else
  {
   $er="Message not sent";
  }
 }
?>
<div class="contact">
<h1>Contact Us</h1>
     <div id="er"><?php echo $er; ?></div>
     <form action="#" method="post">
      <table id="tbl" align="center">
       <tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
       <tr><td>Phone:</td><td><input type="text" name="phone" id="phone"></td></tr>
  <tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
  <tr><td>Message:</td><td><textarea rows="5" cols="25" name="message" id="message"></textarea></td></tr>
       <tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
      </table>
     </form>
</div>

<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var mail=document.getElementById('mail').value;
var message=document.getElementById('message').value;
var ph = /^([0-9-+]+)$/;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
 $('#er').html('Enter your name');
 return false;
}
if(phone=='')
{
 $('#er').html('Enter your phone number');
 return false;
}
if(!ph.test(phone) || phone.length!=10)
{
 $('#er').html('Enter valid phone number');
 return false;
}
if(mail=='')
{
 $('#er').html('Enter your mail');
 return false;
}
if(!chk.test(mail))
{
 $('#er').html('Enter valid email');
 return false;
}
if(message=='')
{
 $('#er').html('Enter your message');
 return false;
}
});
});
</script>
</body>

</html>

               When you run this file in your browser, you'll get below output on screen

                                     Now you can add this contact form to your website and make conversion with your clients.