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 = "[email protected]";

// 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}

create free website wix below post

Further Related Readings

Comments
  1. Craig September 30, 2011 at 3:04 am

    Try adding the message:

    alert(“hi”)Hello

    And if that gets stripped by this form, using square brakets instead of gt/lt characters…

    [script]alert(“hi”)[/script]Hello

    1. Ayaz Malik September 30, 2011 at 10:36 am

      Hello Craig, i don’t get your point, what will that do ?

  2. Craig September 30, 2011 at 10:42 am

    It’s a form of JavaScript injection, so if the page also pre-fills the form with the values from a POST request (e.g. fails validation so the page re-loads), an “evil” site could put a form on their website with the name/email/message (with JS to auto submit the form as soon as that page loads), which sends the user to the website hosting this form, the JavaScript could be executed, and the sites cookies stolen.

    That’s the security point of view.

    Or, just try writing a message with the less than sign half way though (the preview will end because it’s interpreted as a html tag).

    1. Ayaz Malik October 1, 2011 at 5:56 am

      Hello Craig,
      Thank you so much for pointing it out and providing a solution in email, i have updated code a little.
      cheers

  3. meridyen January 4, 2012 at 4:20 pm

    Hi,

    Is that possible to preview before submit on another page other than same page?

    1. Ayaz Malik January 7, 2012 at 10:39 am

      Hello,
      Yes, thats possible, you can use the php $_GET/$_POST as you like on a different page,, store in variables, echo them for preview and make a submit button to maybe which will perform the action of sending mail or submitting as u like, using same variables!

  4. cor77 February 13, 2013 at 11:43 am

    Is there any possibility of including some security? I mention this by way of Spamer and the like.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved