Wednesday, January 1, 2014

Share It

Beautiful contact form for websites in PHP


Hi buddies,  today I came up with a new tutorial on creating a beautiful CSS3 and PHP contact form. Before reading this you must know the importance of contact form for websites. Today everything is being webified and the world of business has turned online. So the contact form plays an important role in communicating with your customers. For bloggers the contact form helps in keeping touch with readers. The main thing here is a reader or a customer will get a chance to contact you easily. The messages sent through this contact form will reach directly into your inbox. We have seen how to create a contact form for blogger blog and I also discussed about creating a contact form in a separate page in blogger in earlier posts. In this tutorial you will know how to create a contact form for your websites.

I have designed this form for my website and I want to share it with you today. You can copy the code and use it in your websites. This form has been developed with CSS3 and PHP and keep in mind that this form is not supported on blogger blogs. If you want an awesome contact form for your blogger blog then read this article.

View Demo


Copy the code below:

contact.php



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Contact Form</title>
   
    <link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="demo.css">

<script>
function validate()
{

var email=document.getElementById("from").value;

if (email.length==""||email=="Your email id")
  {
  document.getElementById("fError").innerHTML = "Enter your email";
  email.focus;
  return false;
  }
var mailPattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!checkEmail(email)) {
    document.getElementById("fError").innerHTML = "Invalid email";
   debugger;
    email.focus;
    return false;
    }
    else
    {
    document.getElementById("fError").innerHTML = "";
   
    }
   
   
  var email=document.getElementById("msub").value;

if (email.length==""||email=="Subject of your message")
  {
  document.getElementById("subError").innerHTML = "Subject required";
  email.focus;
  return false;
  }
  else
    {
    document.getElementById("subError").innerHTML = "";
   
    }
   
     var msg=document.getElementById("msg").value;
   

if (msg.length==""||msg=="Your message")
  {
  document.getElementById("msgError").innerHTML = "Enter your message";
  email.focus;
  return false;
  }
  else
    {
    document.getElementById("msgError").innerHTML = "";
   
    }
}
function checkEmail(email) {

    var email = email;
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email)) {
   // alert('Please provide a valid email address');
   // email.focus;
    return false;
 }

 return true;
}
</script>
<script>

$(document).ready(function () {
    resetForms();
});

function resetForms() {
    document.forms['form1'].reset();
}

</script>

</head>
<body>
<div class="main">

<div class="top">Contact us</div>

<form id="form1" action="send-mail.php" method="post">
<table>
       
<tr><td>Email</td><td><input type="text" class="field" id="from" name="from" value="Your email id" onblur="if(value=='') value = 'Your email id'" onfocus="if(value=='Your email id') value = ''"></td><td><div id="fError" style="color:#FF0000; font-size:14px;"></div></td></tr>
<tr><td>Name </td><td><input type="text" class="field" id="name" name="name" value="Your name(optional)" onblur="if(value=='') value = 'Your name(optional)'" onfocus="if(value=='Your name(optional)') value = ''"></td><td><div id="fError" style="color:#FF0000; font-size:14px;"></div></td></tr>

<tr><td>Subject </td><td><input type="text" class="field" id="msub" name="msub" value="Subject of your message" onblur="if(value=='') value = 'Subject of your message'" onfocus="if(value=='Subject of your message') value = ''"></td><td><div id="subError" style="color:#FF0000; font-size:14px;"></div></td></tr>


<tr><td>Message</td>
      
       <td>
      <textarea type="text" class="msg" id="msg" name="msg" onfocus="if(value=='Your message') value = ''"  onblur="if(value=='') value = 'Your message'">Your message</textarea>
   

    </td>
    <td><div id="msgError" style="color:#FF0000; font-size:14px;"></div></td>
</tr>
<tr>       
<td></td>
<td><input type="submit" class="sendbtn" id="send" name="send" value="Send" onClick="return validate()"></td></tr>
</table>
        </form>
</div>
     
</body>
</html>

Copy the code above and save it as contact.php
The above code contains the form design of contact page. Now lets have another page called send-mail.php. This page receives the data from the form and sends an email to you.

send-mail.php

<html>
<head>
<title>Thank You</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

    <?php
if(isset($_POST['send']))
{
$from=$_POST['from'];
$sub=$_POST['msub'];
$msg=$_POST['msg'];
}
$message = "
<html>
<head>
<title>HTML email</title>
</head>
<body>".$msg."</body>
</html>";


$headers='From: '.$from. "\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";



mail('your-mail-id-here',$sub,$message,$headers);


?>
 
    <body>
    <div class="main">
     <div class="top">Success</div>
         <?php echo '<b style="color:#388440; ">Thanks for contacting</b>'; ?>
     </div>
   
 </body>
</html>

Here in this code you need to replace the line your-mail-id-here with your mail id. Now we have the contact form but the form needs to be designed with stylesheets. I have CSS3 styles for the form.

style.css

body
{
font-family:"Lucida Console", Times, serif;
}
.main
{
width:500px;
margin:0px auto;
}

.field
{
width:300px;
margin:0px 10px 0px 0px;
border:#A8A8A8 solid 2px;
border-radius: 8px;
padding:10px;
box-shadow:1px 0px 9px #6E6E6E;
height:25px;
color:#999999;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
.field:focus
{
border-color:#00AAE7;
box-shadow:0 0 10px #00BDFF; -webkit-box-shadow:0 0 10px #00BDFF; -moz-box-shadow:0 0 10px #00BDFF;
}
textarea
{
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:300px;
height:100px;
margin:0px 10px 0px 0px;
border:#A8A8A8 solid 2px;
border-radius: 8px;
padding:10px;
box-shadow:1px 0px 9px #6E6E6E;
}
textarea:focus
{
border-color:#00AAE7;
box-shadow:0 0 10px #00BDFF; -webkit-box-shadow:0 0 10px #00BDFF; -moz-box-shadow:0 0 10px #00BDFF;
}

.top
{
height:50px;
width:98%;
background:rgb(0, 131, 202);
background-image:url(http://4.bp.blogspot.com/-Vqlki2TRiQQ/UsQC6lBlQ6I/AAAAAAAAFyc/TmpEbtMt1DU/s1600/emf-envelope.png);
 background-repeat:no-repeat;
background-position:1%;
border-top-left-radius:7px;
border-top-right-radius:7px;
color:#FFFFFF;
padding-top:12px;
font-size:32px;
text-align:center;
}

 .sendbtn{
cursor:pointer;
padding:5px 13px;
background:rgb(0, 131, 202);
border:1px solid #1F96AD;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;


-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);

color:#f3f3f3;
font-size:1.1em;
}
.sendbtn:hover,  .sendbtn:focus{
background-color :#13A3D1;

-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}


Copy those three blocks of code and save them with the names given. Put all these files in the same folder and check them online. Note that this will not work on localhost because mail function will not work on local system.
Please comment below if you have anything to share or ask your queries. Thank you.
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.

0 comments: