PHP Contact Us Form | PHP Contact Us Email Send

PHP Cntact Us Form

How to Create HTML Contact Us Form

Find below steps for creating simple PHP Contact us Form. This Contact Us form will have 3 fields these are Name, Email, Mobile No.

Designing a Contact Us Form

Step 1 : Creating CSS Code for Contact Us Form and its fields

Firstly we have to design our contact Us form by using CSS Code. Find below CSS design code.

Opne Dream weaver and Create a New CSS file paste below CSS code at new line and save the file as style.css

CSS design Code for Contact Us Form

@import url(http://fonts.googleapis.com/css?family=Raleway);
h2
{
background-color: #FEFFED;
padding: 15px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr
{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
span
{
color:red;
}
div.container
{
width: 960px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main
{
width: 350px;
padding: 10px 50px 30px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;

}
input[type=text],textarea, input.email, input.mobile
{
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
textarea
{
resize:none;
height:80px;
}
label
{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
.submit
{
padding: 10px;
text-align: center;
font-size: 18px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 2px solid #e5a900;
color: #ffffff;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 1px 0px #13506D;
width: 100%;
border-radius: 5px;
}
.submit:hover
{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

 Step 2- Creating Contact Us form in HTML File

Create a HTML file named as Index.html and paste below mentioned code there

Contact Us Form HTML Template

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="container">
<div class="main">

<form action="send.php" method="post" enctype="multipart/form-data">
<label style="float:left;">Name :</label><input type="text" name="name" required><br />
<label style="float:left;">Email Id: </label><input type="email" name="email" class="email" required><br />
<label style="float:left;">Mobile No.: </label><input type='tel' pattern="[0-9]{10,10}" name="mobile" autocomplete="off" maxlength="10" class="mobile" required><br />

<input class="submit" type="submit" name="submit" value="Submit">
</form>
</div>
</div>

</body>
</html>

Step 3 – creating PHP file for sending Contact Us email.

Open Dream Weaver and create new Php file with name send.php.

Paste below mentioned code in send.php file

 

<?php

$subject= "Email Lead for Texas Pre Launch";
$todayis = date("l, F j, Y, g:i a") ;

$email = $_POST['email'];
$name = $_POST['name'];

$to = "techtipntrick@gmail.com";
$phone = $_POST['mobile'];

$message = "Email : ".$email."\n";
$message .= "Name : ".$name."\n\n";
$message .= "Phone : ".$phone."\n\n";

$mime_boundary="==Multipart_Boundary_x".md5(mt_rand())."x";
$headers = "From: $email\r\n" .
"MIME-Version: 1.0\r\n" .
"Content-Type: multipart/mixed;\r\n" .
" boundary=\"{$mime_boundary}\"";
$message = "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$message . "\n\n";

foreach($_FILES as $userfile)
{
$i = 0;
//print_r($userfile);

foreach($userfile[name] as $file){

$tmp_name = $userfile['tmp_name'][$i];
$type = $userfile['type'][$i];
$name = $userfile['name'][$i];
$size = $userfile['size'][$i];

//echo "file :".$name."<br>";

if (file_exists($tmp_name))
{
//echo "yes".$name."<br>";
if(is_uploaded_file($tmp_name))
{
$file = fopen($tmp_name,'rb');
$data = fread($file,filesize($tmp_name));
fclose($file);
$data = chunk_split(base64_encode($data));
}
$message .= "--{$mime_boundary}\n" .
"Content-Type: {$type};\n" .
" name=\"{$name}\"\n" .
"Content-Disposition: attachment;\n" .
" filename=\"{$fileatt_name}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n";
}
$i++;
}
}
$message.="--{$mime_boundary}--\n";
if (mail($to, $subject, $message, $headers))
echo "<meta http-equiv=\"refresh\" content=\"0;URL=http://omdemo.in/temp/nap.html\">";
else
echo "Error in mail";
?>

In Above PHP Code you can replace email techtipntrick@gmail.com with your email address for receiving contact email data at your email account. Upload all the files at Server. Do remember that all three files should be store at same path.

Now Open HTML file at Server and you will see your contact US form is ready to work.