How To Build A Slideout Feedback Form In jQuery

Feedback Box

Demo Download

You may have seen this before on many sites but it's a feature which I like and I have been asked how you would implement this feature.

In this article I am going to show you how you would create a slideout feedback form which using AJAX will send an email to your website admin email address with the feedback from the visitor.

A slideout form is a good place to ask for feedback from the visitor because it's hidden from view so it doesn't spoil the look of the site and people how click on the button will actually want to give you feedback.

In this tutorial we will be using both jQuery and PHP. We are will use jQuery for the slideout effect on the on-click event of the feedback button and then this will be sent to a PHP page on the server to submit the feedback to an admin email. With this tutorial just being about feedback we will only be asking the visitor to provide us with a message in the form, you will find that if people don't have to give a name or email address you will get more people submitting the form, which is want to want most from feedback.

Creating The Feedback Form

Feedback
Before we start coding we need to decide where to place the feedback button this can be anywhere on the page as it doesn't matter too much as the jQuery will be able to slide the box in any direction but for the sake of this tutorial I will placing the feedback button in the bottom left of the screen, and the slider will slide-up to display the form which is just a textarea and a submit button.

The HTML for the is a simple piece of mark-up.

  • First create a div with a class name of feedback.
  • Create an anchor tag inside the div with a id of feedback_button, type in the anchor text Feedback.
  • Next create a div for the feedback form with a class of form.
  • Inside the form div add a title using the h2 tag.
  • Add a status span for the status of the form to be placed in.
  • Add a textarea and a button for the feedback message and to submit the email.
<div class="feedback">
	<a id="feedback_button">Feedback</a>
	
	<div class="form">
	<h2>Please Send Us Your Feedback</h2>
		<span class="status"></span>
		<textarea id="feedback_text"></textarea>
		<input type="button" value="Send" id="submit_form" />
	</div>
</div>

Positioning The Feedback Button

Positioning
Now we have built the CSS we need to position it and style the button and form to be displayed correctly to the visitor.

  • First we need to position the feedback box.

    We are putting the feedback button in the bottom left of the screen. Use the following CSS.

    .feedback{
    	position:absolute;
    	left:0;
    	bottom:0;
    }

    Now the form is in the bottom left of the page we can style the elements inside the div.

  • We need to style the feedback button you will use to slideout the feedback form. This button will need to stand out on the page and be large enough to be noticed.

    Use the following CSS to style the link to open the feedback form.

    .feedback a {
    	display:block;
    	height:20px;
    	width:100px;
    	text-align:center;
    	background:red;
    	border:2px solid #fff;
    	outline:1px solid #a1a1a1;	
    	padding:5px;
    	float:left;
    	cursor:pointer;
    	
    	/*Font*/
    	color:#FFF;
    	font-weight:bold;
    	font-size:18px;
    }
  • Now we have the button we can create the styling for the form.

    First start with the form and add a height and width give enough room for a large textarea and a button to submit the form.

    Use the following CSS on your form. Make sure you add a display:none to the form so it will start hidden.

    .feedback .form{
    	clear:both;
    	height:300px;
    	width:450px;
    	border:1px solid #000;
    	background:#fff;
    	padding:15px;
    	display: none;
    }
    .feedback .form textarea{
    	height:170px;
    	width:400px;
    	padding:5px;
    }
    .feedback .status{
    	font-size:16px;
    }

Feedback Button

Creating The Slide Effect

Sliders
Now we have created the form and the styling of the form we need to create the slideout effect using jQuery. The good thing about jQuery is that it already has some standard effects built-in which you can use.

One of these effects in the slideToggle() function, which will slide in the opposite direction it currently is displayed. So if the div is hidden it will be displayed and if it's currently displayed the div will be hidden. This is exactly the effect we want from the slideout form.

We will need to add a click event to the link which will slide up the form.

$("#feedback_button").click(function(){
    	$('.form').slideToggle();   		
});

Sending The Feedback Using Ajax

AJAX
Now we have the form and the slide effect we can now sentup the jQuery to send an AJAX request to the server. We need to send the input of the textarea so we can use PHP to send an email to the website admin.

Setup a new function which on the click event of the submit form button will check to see if the textarea is not empty and then send the email to the process_email file.

If the request has been successfully we want to display a message to let the suer know that the feedback has been sent. Also if the feedback failed to send we want to display a message that it has failed.

send_feedback: function(){
    	$('#submit_form').click(function(){
    		if($('#feedback_text').val() != ""){
    			
    			$('.status').text("");
    			
    			$.ajax({  
    				type: "POST",  
      			  	url: "./process_email.php",  
      			  	data: 'feedback=' + $('#feedback_text').val(),  
	      			success: function(result,status) { 
	      				//email sent successfully displays a success message
	      				if(result == 'Message Sent'){
	      					$('.status').text("Feedback Sent");
	      				} else {
	      					$('.status').text("Feedback Failed to Send");
	      				}
	      			},
	      			error: function(result,status){
	      				$('.status').text("Feedback Failed to Send");
	      			}  
      			});
    		}
    	});
    }

Send An Email To Admin

Email
This will send the feedback message through to the PHP script. Now we can use the built-in PHP function mail() to send an email to the website admin.

To get the feedback message from the POST request we need to use the global variable $_POST.

$to = "admin@email.com";
  $subject = "Feedback Form";
  $message = $_POST['feedback'];
 
  if(mail($to,$subject,$message))
  {
   echo "Message Sent";
  }
  else
  {
    echo "Message Not Sent";
  }

If the email was sent successfully it will echo out Message Sent, which we can check in the jQuery to display the success message to the user. If the message failed to send it will echo a message Message Not Sent, which again is checked by the jQuery to display the error message to the visitor.

I have previously wrote an article about creating a coming soon page which used this same functionality of sending an email from PHP using jQuery.

View the demo to see how it will work, you can also download the files I used to create this demo to easily add it to your own site..

Demo Download

Advertise here 50% Off

Comment