How to Create a Beautiful Feedback Form With Jquery

chat

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.

feedback form

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);
?>

 

Advertisement

Tags:

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

1 Comments

  • custom t-shirts says:

    Really impressed! Everything is very, very clear, open is a description of the problem.It contains the information.I wanted to let you know that I linked to your site with a dofollow links so visitors can come to see your blog.It is all very new to me and this article really opened my eyes,and I guess since I like reading your blog, others will too.You can find the link to your site here:

  • At this time it seems like Drupal is the best blogging
    platform available right now. (from what I’ve read) Is that what you are using on your blog?

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Part of Techlomedia Internet Pvt Ltd Developed By Deepanker