Jquery PHP feedback form
This post will be focus on creating a Feedback form powered by jquery and PHP. You can add this feedback form to your website to receive feedback’s from your website readers.
HTML
Lets start by creating html markup.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery PHP Feedback Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- Feedback Form code Starts -->
<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="https://snilesh.com/blog/demo/jquery-feedback/send_email.php?action=sendemail#feedback_response" class="wp_feedback_form">
<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>Website :</label>
<input type="text" name="website" id="feedback_website" class="feedback_text" />
</p>
<p>
<label>Message :</label>
<textarea name="message" class="feedback_textarea" id="feedback_message"></textarea>
</p>
<p>
<input type="image" src="images/default/submit.png" />
</p>
</form>
</div>
</div>
</div>
<!-- Feedback Form code Ends -->
<!-- Feedback Button -->
<div id="feedback_button">
<a href="#" title=""></a>
</div>
<!-- Feedback Button End -->
<!-- Content Of page Starts -->
<div id="wrapper">
<h1>JQUERY PHP FEEDBACK FORM</h1>
<p>Click on the feedback button right side of the screen to check the demo.</p>
<p>Tutorial is created to add feedback button with a lightbox form.</p>
<p>Read Tutorial at</p>
<h2><a href="https://snilesh.com/blog/resources/jquery/jquery-php-feedback-form/" target="_blank" title="Jquery PHP Feedback Tutorial">Jquery PHP Feedback Tutorial</a></h2>
</div>
<!-- Content of page ends -->
</body>
</html>
In above html code the feedback form and button code is added at the top in tag as we want the feedback button at right side of the page and feedback form over all the page content.
CSS Style style.css
#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;
right:0;
top:40%;
overflow:hidden;
}
#feedback_button a
{
width:22px;
height:90px;
overflow:hidden;
background:blue url(images/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(images/close_30.png) no-repeat top left;
width:30px;
float:right;
height:30px;
}
#feedback_form
{
width:280px;
background: #ffffff url(images/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;
}
You can edit this stylesheet code to improve the appearance of the form elements.
Jquery Code
code is included inside the js/script.js file
$(document).ready(function(){
/* Show Feedback form when feedback button clicked */
$('#feedback_button a').click(function(){
$('#feedback_overlay_box').show();
});
/* Hide Feedback form when close button clicked */
$('#feedback_close a').click(function(){
$('#feedback_overlay_box').hide();
});
/* Following code will be called when user submit the feedback form */
$('.wp_feedback_form').submit(function(){
var url = $(this).attr('action');
var update = url.split("#")[1];
var name = $("#feedback_name").val();
var email = $("#feedback_email").val();
var website=$("#feedback_website").val();
var message=$("#feedback_message").val();
var dataString = 'email='+ email + '&name=' + name+'&website='+website+'&message='+message;
var emailFormat = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
/* In first part of this code we validated inputs entered by user. */
if (email == '' || name == '' || website=='') {
$("#feedback_error").fadeIn(200).html("All fields are required !");
}else if (email.search(emailFormat) == -1) {
$("#feedback_error").fadeIn(200).html("Invalid Email Address!");
}
else
{
/*
Following code will send a jquery ajax request to the send_email.php file,
with user inputs */
$.ajax({
type: "POST",
url: "" + url + "",
data: dataString,
success: function(response){
/* Response is add to the #feedback_response div */
$('#feedback_response').html(response);
},
complete: function(){
/* On completion of ajax request following methods are called. */
$("#feedback_error").fadeOut(200);
$("#feedback_response").fadeIn(200);
$(".feedback_text").val('');
}
});
}
return false;
});
});
PHP CODE
For email sending we will use php mail()
<?php
$to="mail@website.com"; /* All the emails will be sent to this email address. */
/* Get all the field values */
$from=$_POST['email'];
$name=$_POST['name'];
$website=$_POST['website'];
$subject="Feedback Posted on Your Website"; /* Subject added to email.*/
$success_message="Thanks For your feedback!."; /* Success message displayed on the form.*/
$info =addslashes($_POST['message']);
$message="<h2>".$subject."</h2>";
$message.="<p>Name = ".$name.'</p>';
$message.="<p>Email = ".$from.'</p>';
$message.="<p>Website = ".$website.'</p>';
$message.="<p>Message = ".$info.'</p>';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:'.$from;
if (mail($to, $subject, $message,$headers)) {
echo $success_message;
}
else
{
echo 'ERROR Sending Email. Please try again.';
}
?>
You can use this feedback form code to get feedbacks from users. All your comment and suggestion will be appreciated.
[btn_details href=”https://snilesh.com/blog/demo/jquery-feedback/” ] Demo [/btn_details] [btn_details href=”https://snilesh.com/blog/demo/jquery-feedback.zip” ] Download [/btn_details]
I was looking for this information, the explanation very good, everything to do simple. Thank you very much.