PHP, MySQL, Drupal, .htaccess, Robots.txt, Phponwebsites: Create contact form and send mail using PHP

6 Aug 2014

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


Create contact form using php


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

2 comments:

  1. This is great! Thank you for posting this. Is there a way to have just the form in the HTML, then link out to the JS and PHP? I've been messing around with this, but just can't seem to get it to work. If I was able to do this would my HTML page have to end in .php or could I keep the .html?

    Thank you,

    John

    ReplyDelete
  2. if you write any php code, then you need to keep it in .php file. Otherwise you can keep this in .html file

    ReplyDelete

Note: only a member of this blog may post a comment.