Coding a Sleek PHP / jQuery Contact Form with Runtime Preview

AD

From today we are starting our new trend. Easy Coding… This is a venture by Designzzz and it specifically designed for web designers, not the high-end developers (even though they will get a scoop out of it) to create majestic results without having to wrestle with their computers.

Today we will be coding a sleek and attractive contact form with run time preview using PHP and jQuery. All the design area will be coded in HTML and CSS while jQuery will take care of run time preview.

In the back end PHP will work as the main mailing script. This sounds pretty tough but don’t worry, it’s not too complicated.

This is how our Form will look like:

sleek contact form design

Online Demo

Download Source Files

{filelink=67}

Lets Start Coding!

The Head Area

The head will contain the basic necessary markups. After those I have inlucded stylesheet and loaded jquery library from Google.

<?php
//A little php to get the value of parameter in url called success, this will be used in the end part of this script.

$status = $_GET['success'];
?>
<!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" xml:lang="en" lang="en">
   <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Contact Form</title>
<!-- Adding Style Sheet -->
 <link type="text/css" href="style.css" rel="stylesheet" />
<!-- Including Jquery Library from Google -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
 </head>

Starting the Body Area

We will be taking a div which will work as a container for the entire layout. I name it as main-container. All our image files will be placed inside a sepearte folder/directory called images.

<body>
 <div id="main-container">
 <!-- rest of code goes here -->
 </div>
 </body>

Basic CSS for Body and main-container area

html, * {margin:0;padding:0;}
   body {
 background:url(images/bg.jpg) repeat #000;
 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 color:#fff;
 }
 a {
	color:#fff;
	text-decoration:underline;
	}

#main-container{
	width:1000px;
	overflow:hidden;
	margin:0 auto;
	}

Starting Main Layout

Now we will make a common html/CSS layout for a box container which will be used for both form and preview box.

HTML for Box Container

<div class="box">
 <div class="title">
 <h2>Contact Form</h2>
 </div>
<!-- Rest of the Form Code Goes here -->
</div>

CSS for Box, Title and Status

.box {
 background:url(images/box-bg.png) repeat transparent;
 width:480px;
 height:550px;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 float:left;
 margin:50px 10px;
 }

 .title	{
 width:100%;
 overflow:hidden;
 text-align:center;
 color:#fff;
 margin:15px auto;
 }
#status {
color:green;
font-size:16px;
text-align:center;
}
#errstatus {
color:red;
font-size:16px;
text-align:center;
}

HTML for Main Form Elements

For our form we will be using post method and we will send all user eneterd data to a different file called Mailer.php. For all form labels I have created a seperate div called Captions and for all input fields another div called Form.

<form method="post" action="mailer.php">
 <div id="captions">
 	<p>Name</p>
 	<p>E-mail</p>
 	<p>Message</p>
 </div>
 <div id="form">
<!-- Name Input Field -->
 	<input type="text" name="uname" id="name" value="" class="textfield" />
<!-- Email Input Field -->
 	<input type="text" name="email" id="email" value="" class="textfield" />
<!-- Message Input Field -->
 	<textarea name="message" id="message" cols="45" rows="5"></textarea>
 	<input type="submit" name="submit" value="Submit" class="submit" />
 	<input type="button" name="preview" value="Preview" class="preview" id="preview_msg_btn" />
 </div>
 </form>

CSS for Entire Form Area

#captions {
 width:30%;
 float:left;
 overflow:hidden;
 margin:0 10px;
 }
 captions p{
   background:#1253B3;
   width:110px;
   height:40px;
   margin: 25px;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   border-radius:8px;
   font-size:20px;
   color:#FFFFFF;
   text-align:center;
   line-height:38px;
   text-shadow:0 1px 1px #000;
   }
   #form {
   width:65%;
   float:left;
   margin-top:30px;
   }
.textfield {
   background: #ffffff;
   border-radius: 5px;
   height: 30px;
   padding: 0 15px;
   width: 225px;
   margin-bottom:35px;
   }
textarea {
   background: #ffffff;
   border-radius: 5px ;
   height: 150px;
   padding: 2px 15px;
   width: 225px;
   }
.submit {
   background: #3b3c3c;
   width:108px ;
   height:40px;
   border-radius: 5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border:#000000 solid 1px;
   margin:40px 10px 0 0;
   color:#fff;
   }
.preview{
   background: #000;
   width:108px;
   height:40px;
   border-radius: 5px;
   border:1px solid #000;
   color:#fff;
   }

Preview Area’s HTML

The HTML of preview area is pretty much the same, the only difference is that instead of form elements I have placed empty divs which jQuery will use to display the preview of your message.

<div class="box">
 	<div class="title">
 		<h2>Preview Here</h2>
	 </div>
 	<div class="preview_div">
 		<div id="pcaptions">
		 <p>Name:</p>
		 <p>E-mail:</p>
		 <p>Comment:</p>
		</div>
 	<div id="display_previews">
	 <p id="dname">Name Goes Here</p>
	 <p id="demail">Email Goes Here</p>
	 <p id="dmessage">Message Goes Here</p>
	 </div>
 </div>
</div>

CSS For Preview Area

.preview_div {
 width:90%;
 overflow:hidden;
 padding:3px;
 background:#000;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 margin:32px auto;
 min-height:250px;

 }
 #pcaptions {
 width:30%;
 float:left;
 overflow:hidden;
 margin:0 10px;
 }
 #pcaptions p{
 width:110px;
 height:40px;
 margin: 15px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 font-size:20px;
 color:#FFFFFF;
 text-align:left;
 line-height:38px;
 text-shadow:0 1px 1px #000;
 color:#fff;
 }
 #display_previews{
 width:65%;
 float:left;
 margin-top:26px;
 }
 #display_previews p {
 margin-bottom:35px;
 margin-left:10px;
 text-size:12px;
 font-family:arial;
 }

Our design and layout part is completed. Now we are going to move on and explain how to make the runtime preview work. Another step is our main php script for processing the data taken from email and finally, we will generate email to the website email address.

Coding Runtime Preview using jQuery

We have already included the jquery library in our head section so now we are going to use our simple jquery ‘html’ function to display the data added in form fields after clicking on the “preview” button.

For that we will need to put this code before the closing body tag like this :

<script type="text/javascript">
 $('#preview_msg_btn').click(function(){
 $('#dname').html($('#name').val());
 $('#demail').html($('#email').val());
 $('#dmessage').html($('#message').val());

 });
 </script>
</body>

Update

Thanks to Craig for pointing out some Injections Possibilities and providing a solution in email, we will alter the above code a little so it will not take the input value as HTML instead will treat it as just text. For that in the above code we will replace the .html($ with .text($.

Above Code Secured

<script type="text/javascript">
 $('#preview_msg_btn').click(function(){
 $('#dname').text($('#name').val());
 $('#demail').text($('#email').val());
 $('#dmessage').text($('#message').val());

 });
 </script>
</body>

In Line 1 of this script we have defined a click function from the id #preview_msg_btn, that mean whenever a form element having this ID is clicked the rest of the function will be performed.

The second line of script takes the value from the field with ID name (#name) and Display that data in the div with ID ‘dname’. We have placed such divs in the preview area starting with a ‘d’ as in for display. This same method is applied in the rest of the form elements.

Finally The Form Processing and Email Generation in PHP

We will be coding a self explanatory PHP script that will take data from the form and generate a mail to the email address you desire to receive the messages on.

PHP Code

<?php
   if(isset($_POST['submit'])) {

// Email where you want to receive Messages
   $to = "webmaster@designzzz.com";

// This Subject will be used in the incoming email
   $subject = "Contact Form";

// Accepting Name, Email and message values from Form and Storing in Variables
   $name_field = $_POST['name'];
   $email_field = $_POST['email'];
   $message = $_POST['message'];

   $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

//Sending Email
   mail($to, $subject, $body);

//In case of Successful Email Redirecting back to The contact form with a parameter 'success' value as 1
   header ("Location: http://www.designzzz.com/demos/contact_form/index.php?success=1");
 } else {

//In case of any errors will send back the value as 2
 header ("Location: http://www.designzzz.com/demos/contact_form/index.php?success=2");
 }
   ?>

In this code we have taken the values from form using POST method and stored them in variable. After that we defined the message body which you will receive in email, and finally used the mail function to generate an email to your email address. In case of successful email generation we have redirected the user back to the contact form with status value as 1 and in case of some error or failure returned with value = 2. We will use these values to display message the user accordingly. Like in case of value = 1 user will see a message saying successfully sent etc.

Leave your opinion in comments!

Online Demo

Download Source Files

{filelink=67}

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved