Build a simple Contact Us form in PHP
Today, we are going to learn, step by step, how to create a “Contact Us” web form in PHP that will send us an email with a message from our visitors. We will also do a little server side validation to avoid spam and other unwanted situations. We will start by creating a web form which will collect the data from our visitors and pass it onto a script which will pass it through a validation process and than, if successfull, send us the email. Let’s call our page “index.php” and paste the following code in it.
This will be our web form.
<link href="css/style.css" rel="stylesheet" type="text/css" />
<?php
$status = $_GET['status'];
if($status=="1") {
echo '<div class="successAlert"
style="width:560px; margin:auto">
Message successfully sent!</div>';
} elseif ($status=="0") {
echo '<div class="warningAlert"
style="width:560px; margin:auto">
Your message was not sent. Please check your input!</div>';
} else {
echo"";
}
?>
<div class="container">
<div class="content">
<div class="shape">
<div class="header">Contact us</div>
<form method="post" id="form1" class="form" action="send_email.php">
<table align="center" cellpadding="2" cellspacing="0">
<tr>
<td><label for="name"><span class="pintext">
Your name</span></label></td>
<td><div align="left" class="string">
<input class="name" type="text" name="name" id="name" size="32" />
</div>
</td>
</tr>
<tr>
<td><label for="email"><span class="pintext">
Your email</span></label></td>
<td><div align="left" class="string">
<input class="email" type="text" name="email" id="email" size="32" />
</div>
</td>
</tr>
<tr>
<td><label for="message"><span class="pintext">
Your message</span></label></td>
<td><div align="left" class="string_textarea">
<textarea name="message" cols="24" rows="5" class="textarea" id="message">
</textarea></div>
<div align="right" class="footer_textarea"></div>
</td>
</tr>
<tr>
<td colspan="2"><div align="right">
<input class="buttons" type="submit" name="Send message"
id="Send message" value="Send message →" /></div>
</td>
</tr>
</table>
</form>
</div>
</div>
You will notice that we some css classes already defined so what we miss in this form is the css file. We also have some lines of PHP which will tell the visitor if the email was sent or something was wrong. We will create a new stylesheet and call it “style.css” and place it inside a new folder called “css”. It’s good to keep all things organized and place everything where it should be placed. Our site will get bigger and bigger as time goes by and it will be harder to edit and tune up things if we’re not organized. Paste the following css code into our styles page:
.container {
border:1px dashed #cfcfcf;
margin:auto;
margin-top: 20px;
line-height:18px;
background:#fff;
padding:4px;
width:580px
}
.content {
background-image:url(../images/b.gif);padding:10px;
}
.shape {
margin: 0px 6px 6px 6px;
border: 10px solid #fff;
background: #fbfaf8;
line-height: 1.2em;
filter:progid:DXImageTransform.Microsoft.Shadow
(color='#e2decd', Direction=135, Strength=9);
}
.header {
font:bold 12px trebuchet ms, lucida grande, verdana, arial, sans-serif;
color:#fff;
font-size:18px;
padding-top:4px;
padding-bottom:4px;
background-color: #EDCC9A;
margin-bottom:10px;
text-align:center;
}
.pintext {
color:#666;
font:bold 16px trebuchet ms,lucida grande,verdana,arial,sans-serif;
}
.buttons {
background: #e3e3db;
font-size:12px;
color: #989070;
padding: 6px 14px;
border-width: 2px;
border-style: solid;
border-color: #fff #d8d8d0 #d8d8d0 #fff;
text-decoration: none;
text-transform:uppercase;
font-weight:bold;
}
.name {
background-image: url(../images/name.png);
background-repeat: no-repeat;
background-position:left;
padding-left:19px;
background-color: #fffff0;
margin-top: 7px;
margin-left:15px;
border:0px none #F11F1F;
font:normal 18px Arial;
color: #999999;
}
.email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position:left;
padding-left:19px;
background-color: #fffff0;
margin-top: 7px;
margin-left:15px;
border:0px none #F11F1F;
font:normal 18px Arial;
color: #999999;
}
.string {
background-image: url(../images/big_searchbg.gif);
width: 346px;
height: 38px;
border:0px;
}
.textarea {
background-image: url(../images/bg_textarea.gif);
margin-top:10px;
background-color: #fffff0;
width: 341px;
border:0px none #F11F1F;
font:normal 18px Arial;
color: #999999;
padding: 15px;
}
.footer_textarea {
background-image: url(../images/f_textarea.gif);
background-position: bottom;
background-repeat: no-repeat;
width: 346px;
height: 12px;
border:0px;
}
.string_textarea {
background-image: url(../images/top_textarea.gif);
background-position: top;
background-repeat: no-repeat;
width: 346px;
border:0px;
}
.warningAlert,.successAlert,.errorAlert {
text-align:center;
font:italic normal 100% georgia,times,serif;
padding:9px
}
.successAlert a,.warningAlert a,.errorAlert a {
font-weight:700
}
.successAlert {
color:#333;
border:3px solid #8fc15e;
background:#edf9d9
}
.successAlert a {
color:#360 !important
}
.warningAlert,.errorAlert {
color:#000;
border:3px solid #cd6531;
background:#ffe6cd
}
.warningAlert a,.errorAlert a {
color:#b46131 !important
}
We’re almost done. We have the page that our visitors will use to submit data so what we need right now is a script that will validate this input and process it. Let’s create a new file and call it “send_email.php”. Paste this code inside it:
$site_name = "your site name here";
$admin_email = "yourEmail@whatever.com";
function check_email_address($email) {
if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
header("Location: index.php?status=0");
}
$email_array = explode("@", $email);
$local_array = explode(".", $email_array[0]);
for ($i = 0; $i < sizeof($local_array); $i++) {
if (!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-] {0,63})|(\"[^(\\|\")]{0,62}\"))$", $local_array[$i])) {
header("Location: index.php?status=0");
}
}
if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) {
$domain_array = explode(".", $email_array[1]);
if (sizeof($domain_array) < 2) {
die ("Invalid email address");
}
for ($i = 0; $i < sizeof($domain_array); $i++) {
if (!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$",
$domain_array[$i])) {
header("Location: index.php?status=0");
}
}
}
return $email;
}
function escape_val($string) {
$string = str_replace(array('"',"<",">"), array(""","<",">"), $string);
return $string;
}
$check_email = check_email_address($_REQUEST['email']);
$name = escape_val($_REQUEST['name']);
$message = escape_val($_REQUEST['message']);
$time = date('l dS \of F Y h:i:s A');
$email_subject = "New contact message from ".$site_name."";
if(mail($admin_email,$email_subject,$message,
"From:$check_email,Reply-to:$check_email")) {
header("Location: index.php?status=1");
exit;
} else {
header("Location: index.php?status=0");
}
This page will grab the data that was submited via our form and return to our index.php page with 2 possible statuses: 0 for “something’s wrong” and 1 for “ok! email sent”. If you go back and study “index.php” you will notice this php code which will tell our visitor if the email was successfull or not:
$status = $_GET['status'];
if($status=="1") {
echo '<div class="successAlert" style="width:560px; margin:auto">
Message successfully sent!</div>';
} elseif ($status=="0") {
echo '<div class="warningAlert" style="width:560px; margin:auto">
Your message was not sent. Please check your input!</div>';
} else {
echo"";
}
Please note, the demo does not send any mail, as it is just to show how it looks.
Comments
About Author
