Create a Floating Feedback Tab

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 Bridge 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 to create a floating feedback form:

Create a Submission Form

First, create a Submission Form as normal in Caspio Bridge.  Some additional fields you might consider adding:

  • 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 add the following code:

<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>

Now add the following code to the DataPage footer:

</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>

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:

 

</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>

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.

Destination and Triggers

On the final screen of the DataPage wizard you can add the following script after your success message.  This will make the message visible when the page reloads after submission.

<script>
window.onload = function(){ showfeedback();}
</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. Enable custom text for Element ID 350 – “You did not enter valid information in one or more of the fields.”  Click Next and apply the Localization to your feedback Web Form. In the Custom Text panel add the following script after the text:

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

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

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:

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

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:

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

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

 Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge'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.