Have you seen our feedback button at the bottom left of our website? Well, if not then take your eyes there. Expandable feedback box is one of the most efficient ways of getting feedback from your visitors. If you have a feedback button on page and if it takes your visitors to another page, dedicated to feedback, when clicked then that discourages the visitor to leave a feedback. So expandable feedback boxes are must-haves for your websites.
Our expandable feedback box appears on every page of your website or blog and lets your visitors leave a feedback right on spot without navigating them to any other page. One thing to know here is that your visitors don’t want to give away their personal information or must I say, any information, just to leave a feedback about your site. So it is highly recommended to keep nothing but a ‘Message’ box in your feedback form.
Expandable Feedback Box for Websites
Feedback Form Creation
Let’s begin. First of all, head on to drive.google.com and sign-up (if you haven’t used it before) and then on the left hand side, click on ‘Create‘ and the select ‘Form‘.
Then name your form as ‘Feedback‘ and let the ‘Question Title‘ and ‘Help Text‘ fields be blank. Then in ‘Question Type‘ choose ‘Paragraph text‘ and DO NOT tick ‘Make this a required question‘ and hit ‘Done‘. Delete the Sample Question 2. After all these, it should look like the image below :
Now you need to add certain pieces of code into your site’s html construct.
Feedback Form Integration
Add this just above </head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js” type=”text/javascript”></script>
<style type=’text/css’>
#typtipsfdbbox{width:433px;margin:0px 0px -3px 0px;padding:3px 0px 0px 3px;position:fixed;bottom:0px;left:0px;overflow:hidden;}
.typtipsfdbform {height:295px;width:430px;background-color: #fff;padding:0px;margin:-3px 0px -3px -3px;border-bottom:5px solid #888888;box-shadow: 0px 0px 5px 1px #888888;}
.typtipsfdbsup {display:none;width:100px;height:28px;margin:0px;overflow:hidden;background-color:#ffffff;box-shadow: 0px 0px 5px 1px #888888;}
a.typtipsimport{display:visible;color:#ccc;text-decoration:none;font-size:10px;float:right;}
a.typtipsfdbsup {display:block;padding:8px 3px 2px 3px;text-align:center;color:#888888;text-decoration:none;font-weight:bold;font-size:16px;}
a:hover.typtipsfdbsup{color:#282828;}
</style>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.typtipsfdbform”).hide();
$(“.typtipsfdbsup”).show();
$(‘.typtipsfdbsup’).click(function(){
$(“.typtipsfdbform”).slideToggle();
});
});
</script>
And add this just above </body>
<div id=’typtipsfdbbox’>
<a class=’typtipsfdbsup’ href=’#’>Feedback</a>
<div class=’typtipsfdbform’><a href=’http://www.typicaltips.com/2013/01/click-to-expand-feedback-box.html’ class=’typtipsimport’ title=’Feedback Box by Typical Tips’ rel=’dofollow’>Feedback Box By Typical Tips</a><iframe frameborder=’0′ height=’283′ marginheight=’0′ marginwidth=’0′ scrolling=’no’ src=’YOUR_FORM_URL‘ width=’430’/>
</div>
</div>
Here replace ‘YOUR_FORM_URL‘ with the form embed code which is shown at the bottom of the Google Drive form creation page (shown by the arrows in the above image).
That’s it. Your on-page feedback box is now ready! Come back for more 🙂
