Posted in Coding, Development, Featured, jQuery, php, Resources, Tutorials

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Coding a Sleek PHP jQuery Contact Form with Runtime Preview

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

Online Demo

Download Source Files

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.

1 <?php
2 //A little php to get the value of parameter in url called success, this will be used in the end part of this script.
3
4 $status = $_GET['success'];
5 ?>
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
03    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04    <head>
05  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
06  <title>Contact Form</title>
07 <!-- Adding Style Sheet -->
08  <link type="text/css" href="style.css" rel="stylesheet" />
09 <!-- Including Jquery Library from Google -->
10  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
11  </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.

1 <body>
2  <div id="main-container">
3  <!-- rest of code goes here -->
4  </div>
5  </body>

Basic CSS for Body and main-container area

01 html, * {margin:0;padding:0;}
02    body {
03  background:url(images/bg.jpg) repeat #000;
04  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
05  color:#fff;
06  }
07  a {
08     color:#fff;
09     text-decoration:underline;
10     }
11
12 #main-container{
13     width:1000px;
14     overflow:hidden;
15     margin:0 auto;
16     }

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

1 <div class="box">
2  <div class="title">
3  <h2>Contact Form</h2>
4  </div>
5 <!-- Rest of the Form Code Goes here -->
6 </div>

CSS for Box, Title and Status

01 .box {
02  background:url(images/box-bg.png) repeat transparent;
03  width:480px;
04  height:550px;
05  border-radius:10px;
06  -moz-border-radius:10px;
07  -webkit-border-radius:10px;
08  float:left;
09  margin:50px 10px;
10  }
11
12  .title {
13  width:100%;
14  overflow:hidden;
15  text-align:center;
16  color:#fff;
17  margin:15px auto;
18  }
19 #status {
20 color:green;
21 font-size:16px;
22 text-align:center;
23 }
24 #errstatus {
25 color:red;
26 font-size:16px;
27 text-align:center;
28 }

HTML for Main Form Elements

For our form we will be using post method and 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.

01 <form method="post" action="mailer.php">
02  <div id="captions">
03     <p>Name</p>
04     <p>E-mail</p>
05     <p>Message</p>
06  </div>
07  <div id="form">
08 <!-- Name Input Field -->
09     <input type="text" name="uname" id="name" value="" class="textfield" />
10 <!-- Email Input Field -->
11     <input type="text" name="email" id="email" value="" class="textfield" />
12 <!-- Message Input Field -->
13     <textarea name="message" id="message" cols="45" rows="5"></textarea>
14     <input type="submit" name="submit" value="Submit" class="submit" />
15     <input type="button" name="preview" value="Preview" class="preview" id="preview_msg_btn" />
16  </div>
17  </form>

Css for Entire Form Area

01 #captions {
02  width:30%;
03  float:left;
04  overflow:hidden;
05  margin:0 10px;
06  }
07  captions p{
08    background:#1253B3;
09    width:110px;
10    height:40px;
11    margin: 25px;
12    -moz-border-radius:8px;
13    -webkit-border-radius:8px;
14    border-radius:8px;
15    font-size:20px;
16    color:#FFFFFF;
17    text-align:center;
18    line-height:38px;
19    text-shadow:0 1px 1px #000;
20    }
21    #form {
22    width:65%;
23    float:left;
24    margin-top:30px;
25    }
26 .textfield {
27    background: #ffffff;
28    border-radius: 5px;
29    height: 30px;
30    padding: 0 15px;
31    width: 225px;
32    margin-bottom:35px;
33    }
34 textarea {
35    background: #ffffff;
36    border-radius: 5px ;
37    height: 150px;
38    padding: 2px 15px;
39    width: 225px;
40    }
41 .submit {
42    background: #3b3c3c;
43    width:108px ;
44    height:40px;
45    border-radius: 5px;
46    -moz-border-radius:5px;
47    -webkit-border-radius:5px;
48    border:#000000 solid 1px;
49    margin:40px 10px 0 0;
50    color:#fff;
51    }
52 .preview{
53    background: #000;
54    width:108px;
55    height:40px;
56    border-radius: 5px;
57    border:1px solid #000;
58    color:#fff;
59    }

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.

01 <div class="box">
02     <div class="title">
03         <h2>Preview Here</h2>
04      </div>
05     <div class="preview_div">
06         <div id="pcaptions">
07          <p>Name:</p>
08          <p>E-mail:</p>
09          <p>Comment:</p>
10         </div>
11     <div id="display_previews">
12      <p id="dname"></p>
13      <p id="demail"></p>
14      <p id="dmessage"></p>
15      </div>
16  </div>
17 </div>

CSS For Preview Area

01 .preview_div {
02  width:90%;
03  overflow:hidden;
04  padding:3px;
05  background:#000;
06  -moz-border-radius:8px;
07  -webkit-border-radius:8px;
08  border-radius:8px;
09  margin:32px auto;
10  min-height:250px;
11
12  }
13  #pcaptions {
14  width:30%;
15  float:left;
16  overflow:hidden;
17  margin:0 10px;
18  }
19  #pcaptions p{
20  width:110px;
21  height:40px;
22  margin: 15px;
23  -moz-border-radius:8px;
24  -webkit-border-radius:8px;
25  border-radius:8px;
26  font-size:20px;
27  color:#FFFFFF;
28  text-align:left;
29  line-height:38px;
30  text-shadow:0 1px 1px #000;
31  color:#fff;
32  }
33  #display_previews{
34  width:65%;
35  float:left;
36  margin-top:26px;
37  }
38  #display_previews p {
39  margin-bottom:35px;
40  margin-left:10px;
41  text-size:12px;
42  font-family:arial;
43  }

Our design and layout part is completed here now we are going to move on how to make the runtime preview work and afterwards our main php script for processing the data taken from email and 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 a simple jquery ‘html’ function to display the data added in form fields on click of the preview button.

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

1 <script type="text/javascript">
2  $('#preview_msg_btn').click(function(){
3  $('#dname').html($('#name').val());
4  $('#demail').html($('#email').val());
5  $('#dmessage').html($('#message').val());
6
7  });
8  </script>
9 </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 perform.

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

01 <?php
02    if(isset($_POST['submit'])) {
03
04 // Email where you want to receive Messages
05    $to = "webmaster@designzzz.com";
06
07 // This Subject will be used in the incoming email
08    $subject = "Contact Form";
09
10 // Accepting Name, Email and message values from Form and Storing in Variables
11    $name_field = $_POST['name'];
12    $email_field = $_POST['email'];
13    $message = $_POST['message'];
14
15    $body = "From: $name_fieldn E-Mail: $email_fieldn Message:n $message";
16
17 //Sending Email
18    mail($to, $subject, $body);
19
20 //In case of Successful Email Redirecting back to The contact form with a parameter 'success' value as 1
22  } else {
23
24 //In case of any errors will send back the value as 2
26  }
27    ?>

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.
Queness

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. Coding an Instant Login Form with jQuery and PHP/Ajax
  2. Sleek and Stylish Portfolio Design Website
  3. How To Design The Perfect Form
  4. 3 common requirements and the corresponding Jquery solutions for your next web project
  5. Add a jQuery DatePicker to Event Posts {WP}

Comments are closed.