Creating a Floating Feedback Tab

4 minutes to read

This article shows how to create a submission form that can function as a feedback form on all of your public-facing web pages. Many companies offer this service at an additional fee, but you can set up this same functionality using Caspio DataPages.

Since you’re using a Caspio solution, you can fully customize your forms to collect the exact data you want. The sample includes functionality that will automatically record the URL of the DataPage’s host page. The sample JavaScript also includes basic form hiding, and animated form floating for advanced users.

Steps:

Create a Submission Form. You might consider adding some additional fields:

Host URL – Text(255)
Category (Idea, Praise, Criticism, Question) – Text(255)
Mailing List – Yes/No

Once your submission form is formatted correctly, add the code that will allow the form to float on and off the page. On the Configure fields screen of the DataPage wizard, use the insert button to add Header & Footer sections.

In the header section, disable the HTML editor in the Advanced tab, then add the following code:
In the footer section, disable the HTML editor in the Advanced tab, then add the following code:

Formatting Concerns

Feel free to change the hexadecimal color values of the feedback tab to match your website.

The feedback tab will have vertical formatting in Internet Explorer 9 and above. If you would like all browsers to have vertical formatting you will have to replace the code to use image as the Feedback tab using the below code in the Footer:

Change the set the width of your DataPage.

Now you will need to determine the width of your DataPage in pixels. In the header of your DataPage you just inserted some sample code that will move your DataPage 200px to the left. That value will need to be adjusted to match the total width of your DataPage.

If you would like a tool to determine the width of your DataPage (or any element on your web page) Firefox has a great add-on called MeasureIt that gives you a ruler directly in your Firefox browser. This is an easy way to determine the exact height of your web design elements.

The sample starts with 200px, you can gradually increase that number until you Feedback form is hidden, and the clickable Feedback tab is still visible.

Configure the final message.

On the final screen of the DataPage wizard, you can add the following script after your success message to make the message visible when the page reloads after submission. Go to the Source mode and add the following script.

Handling Validation Errors

If your feedback form has validation on any fields (an email field, a unique field, or any required fields) you will need to create a special Localization to handle any situation where the user incorrectly enters information.

In the Localizations view, make a copy of your default localization and add the word feedback to the end. Click Edit. This should open the Localization wizard. Find Element ID 350 – “You did not enter valid information in one or more of the fields”, and add the following script after the text in the Custom Text panel. Apply the Localization to your feedback Web Form.

You did not enter valid information in one or more of the fields.

Click Finish and test your feedback form by entering invalid information. When the page reloads the feedback form should again become visible.

Animate the feedback form.

You can add animations to the feedback form using JQuery. Add the following script link to your webpage header to load JQuery from Google’s API hosting service:

Note: For testing purposes, you can add this script link to the header of your DataPage.

In the header, the animated JQuery calls are excluded from the JavaScript using comments (/*…*/). To use the animated JQuery un-comment the JQuery lines and comment out the inline JavaScript lines:

Be sure the left position (DataPage width) value is updated accordingly. The suffix px (pixels) is not required when using JQuery.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio’s standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<script>
function showfeedback(){
if(document.getElementById('cbfeedback').style.left == "0px"){
document.getElementById('cbfeedback').style.left = "-200px";
/*$('#cbfeedback').animate({left:'-200'}, 300);*/
}
else{
document.getElementById('cbfeedback').style.left = "0px";
/*$('#cbfeedback').animate({left:'0'}, 300);*/
}}
</script>
<table id="cbfeedback" style="position:fixed; left:-200px; top:20%;"><tr><td>

code2

</td><td style="-ms-transform:rotate(90deg); transform:rotate(90deg);-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg); text-align:left; position:relative; height:120px;">

<h2 onclick="showfeedback()" style="position:relative; top:37px; cursor:pointer; background:#ffffff; border:1px solid #cccccc; padding:4px;"> Feedback</h2>

</td></tr></table>

code3

</td><td style="text-align:left; position:relative; height:120px;">
<img src="URL OF FEEDBACK TAB IMAGE" onclick="showfeedback();" title="feedback" alt="feedback">
</td></tr></table>

code4

<script>
window.onload = function(){ showfeedback();}
</script>

code5

<script>
window.onload = function(){ showfeedback();}
</script>

code6

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

code7

if(document.getElementById('cbfeedback').style.left == "0px"){
/*document.getElementById('cbfeedback').style.left = "-200px";*/
$('#cbfeedback').animate({left:'-200'}, 300);
}
else{
/*document.getElementById('cbfeedback').style.left = "0px";*/
$('#cbfeedback').animate({left:'0'}, 300);
}}