How to Create a Beautiful Feedback Form With Jquery

Feedback is an important part of online business. It helps company and business to know how people are liking their service and product and what they need. This is the reason, website must have an easy to use but attractive feedback form. In this post I will show you how you can use jquery power to create a simple but attractive feedback form for your website.

Demo  Download 

If a visitor will post the feedback, the data will be sent to your email address. You can also store the data in your database for further use.

Download the script and paste the files in your website’s directory. Then add the feedback form code given in the inex.html file to your website’s pages where you want to put the feedback form. Include the javascript (scripts.js and jquery.js) and css (style.css) files in all the pages where you have inserted the feedback code.

comment if there is any problem with the code.

HTML

<div id="feedback_overlay_box">
<div id="feedback_lightbox">
<div id="feedback_close">
<a href="#" title="close"></a>
</div>
<div id="feedback_form">
<div id="feedback_response"></div>
<div id="feedback_error"></div>
<form name="feedback_form"
method="post" action="send_email.php?action=sendemail#feedback_response"
class="wp_feedback_form">
<em id="__mceDel"> <p>
<label>Name :</label>
<input type="text" name="name" id="feedback_name" class="feedback_text" />
</p>
<p>
<label>Email :</label>
<input type="text" name="email" id="feedback_email" class="feedback_text" />
</p>
<p>
<label>Phone :</label>
<input type="text" name="phone" id="feedback_phone" class="feedback_text" />
</p>
<p>
<label>Message :</label>
<textarea name="message" class="feedback_textarea" id="feedback_message">

</textarea>
</p>
<p>
<input type="image" src="ima/default/submit.png" />
</p>
</form>
</div>
</div>
</div>
<!-- Feedback Form code Ends -->

<!-- Content of page ends -->
<!-- Feedback Button -->
<div id="feedback_button">
<a href="#" title=""></a>
</div>

CSS

body
{
font-family:Arial,Georgia,Verdana;
font-size:12px;
padding:0px;
margin:0px;
}
h1
{
font-size:24px;
line-height:28px;
}
p
{
padding:0px 0px 15px 0px;
font-size:12px;
line-height:15px;
}
#feedback_lightbox
{
width:350px;
z-index:9999;
position:relative;
top:20%;
left:30%;
}
#feedback_overlay_box
{
position:absolute;
top:0;
left:0;
background:#000000;
overflow:hidden;
z-index:9998;
width:100%;
display:none;
height:100%;
}
#feedback_button
{
width:22px;
height:90px;
position:fixed;
left:0;
top:40%;
overflow:hidden;
}
#feedback_button a
{
width:22px;
height:90px;
overflow:hidden;
background:#2B9A0F url(ima/feedback_tab_white.png) no-repeat top left;
display:inline-block;
padding:3px;
}
#feedback_close
{
display:block;
height:30px;
text-align:right;
width:350px;
}
#feedback_close a
{
display:block;
background:url(ima/close_30.png) no-repeat top left;
width:30px;
float:right;
height:30px;
}
#feedback_form
{
width:280px;
background: #ffffff url(ima/dialog.png) repeat-x left bottom;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
padding:30px;
}
#feedback_form p
{
padding:0px 0px 10px 0px;
margin:0px;
display:block;
}
#feedback_form p label
{
display:block;
font-size:12px;
line-height:16px;
padding:0px 0px 3px 0px;
color:red;
}
#feedback_form p .feedback_text,#feedback_form p .feedback_textarea
{
border:1px solid #999999;

}
#feedback_error
{
margin:10px 0px 0px 0px;
border:1px solid red;
padding:10px;
overflow:hidden;
display:none;
}
#feedback_response
{
margin:10px 0px 10px 0px;
border:1px solid green;
padding:10px;
color:green;
overflow:hidden;
display:none;
}

send_email.php

<?php
$email=$_POST['email'];
$name=$_POST['name'];
$phone=$_POST['phone'];
$mssg=$_POST['message'];
$message=$name."/n".$phone."/n".$mssg;
$to="[email protected]";
$headers .= 'From:.'$email . "\r\n";
@mail($to,$subject,$message,$headers);
?>