A Simple Contact Us Forms

›A Simple Contact Us Forms

This entry was posted on Nov 08 2010

In this tutorial i will teach you, how to make a simple and clean contact us form using Php and Css, a simple contact us form with name, email, website, subject and message fields…

Lets Start

First of all create a new php document, then we have to design the html, copy and paste the below code in your <body> tag:

<form action="" class="form" method="post" name="contactus">
<fieldset>
<legend>Your Info</legend>
<label>Name</label><input name="name" type="text" size="45" /><br />
<label>Email</label><input name="email" type="text" size="45" /><br />
<label>Website</label><input name="website" type="text" size="45" /><br />
</fieldset>
<fieldset>
<legend>Your Message</legend>
<label>Subject</label><input name="subject" type="text" size="45" /><br />
<label>Message</label><textarea name="message" cols="35" rows="7"></textarea>
</fieldset>
<input name="sendmail" type="submit" value="Send Email" />
</form>

Ok, Now lets style the forms using css, create a new css document and name it “stylesheet.css”, and then copy & paste the below code in “stylesheet.css”:

.form {
	margin:0;
	padding:0;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:16px;
}
.form fieldset{
	border: #cce0b8 solid 1px;
	width:30%;
	margin-bottom:20px;
	background-color: #f1ffe3;
}
.form legend{
	text-transform:uppercase;
	font-size:14px;
	padding:4px;
	background-color: #cce0b8;
	color: #3b6d0a;
}
.form label{
	display: inline-block;
	width:14%;
	text-align:right;
	padding:4px;
	vertical-align:top;
}
.form input{
	border:1px solid #cce0b8;
	padding:4px;
	color: #48820e;
}
.form textarea{
	border:1px solid #cce0b8;
	padding:6px;
	color: #3a6c08;
}
.errors{
	color: #900;
	margin:10px;
	font-size:18px;
	font-style:italic;
	border-bottom:1px dotted #CCC;
	width:20%;
}
.done{
	color: #090;
	margin:10px;
	font-size:18px;
	font-style:italic;
	border-bottom:1px dotted #CCC;
	width:25%;
}

Copy and Paste the below code in <html> to Include the <body>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

That’s it we are 70% done, now lets do the coding, add the below code in the <body> tag, i have add it above the html forms:

<?php
if(isset($_POST['sendmail'])){
	$name = $_POST['name'];
	$email = $_POST['email'];
	$website = $_POST['website'];
	$subject = $_POST['subject'];
	$message = $_POST['message'];
	$to = "support@urphp.com";	// << write your own email here
	if(empty($name) OR empty($email) OR empty($subject) OR empty($message)){
	echo "<div class='errors'>Sorry, You must fill the required fields<strong>(*)</strong></div>";
	}else{
	@mail($to,$subject,$message,"From: $name  <$email>");
	echo "<div class='done'>Email has been sent, we will get back to you ASP!</strong></div>";
	}
}?>

You are Finished, enjoy…