In this tutorial i will show 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 class="form" action="" 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 let’s style the forms using css, create a new css document and name it”, and then copy & paste the below code in”:
.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> 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 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@w3programmers.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>"; } }?>Now Our Output Look Like
0 comments:
Post a Comment