Monday, July 23, 2012

How to Customize the Feedback Form

So, one common request we've received is to allow our clients to modify the embedded LoopTodo feedback collection form.

Our goal with LoopTodo is to focus on simplicity, which is sort of the mortal enemy of complexity. Every feature that we add requires a design change, the question of where to place the controls in the settings page, and of course, support.

We have an evolving API, we decided to give control to our clients through the Feedback Collection Form Integration API, which is part of the embed code. With the API, you can control the message, the placeholders in the textbox, the names of the tabs, as well as the tags that each tab corresponds to. By using the API, we eliminate a major source of complexity, figuring out where to put these controls in settings without cluttering up the interface.

The API is very easy to use. Of course, easy is a subjective term. I'm a developer, so things like this come easy to me, but I'm willing to bet that someone who is careful, detail oriented, and who only modifies the text -- "inside the quotes" and not the code structure itself -- will be able to make changes to the form via the API without any problems. To help make this easier for people who are novice programmers or who are intimidated by code, I've put together a demo.

Look for the "looptodo_feedback_btn_init" line in the embed code, and replace it with the code block below the line that says "with this integration example". Once you see the new form on your website, customize the text in quotes to your liking.

Find this part of the embed code:

    

 looptodo_feedback_btn_init();

And replace the above embed code with this code block:

    
 // Form integration API example
 looptodo_feedback_btn_init({
     tabs: [
         { 
             label: "Tab1-Good",
             desc: "Tab1 - Tell us the good! :)",
             buttonText: "Tab1 - Good",
             tag: "tab1-tag"
         },
         {
             label: "Tab2-Bad",
             desc: "Tab2 - Tell us the bad! :(",
             buttonText: "Tab2 - Bad",
             tag: "tab2-tag"
         },
         {
             label: "Tab3-Ugly",
             desc: "Tab3 - Tell us the ugly?! :|",
             buttonText: "Tab3 - Ugly",
             tag: "tab3-tag"
         }
                
     ],
     message: "Please tell us how we're doing!"
 });


Below is a demo of what the form would look like, using the above integration code. Take note of where the text in the code matches the text in the form, and this will give you an idea of what you can customize.

  View the demo of the Loop form using the above integration API example

If you get stuck with the integration process, we're happy to answer any questions that you may have. Just email us at info [at] loopto.do and we'll happily help!

4 Comments:

At July 25, 2012 at 8:29 AM , Anonymous Anonymous said...

Hi

I just thought I can share this. The tab wise feedback collection is great concept. But I thought may be it would be really helpful if we allow the users to send their different types of opinions on the same feedback form. just allow them to share Pros and Cons (Good and bad) from the same window.

Thank you!

 
At July 25, 2012 at 9:00 AM , Blogger James said...

That is something that could be configured with this API. For instance, instead of "Good", "Bad", and "Ugly" you could use "Pros", "Cons", and "Neutral" in the tabs.

James

 
At May 20, 2014 at 1:49 AM , Blogger Raphael said...

Hi

Is it also possible to customize the check boxes? (for example change the text or hide the "anonymous" check box).

Raphael

 
At June 17, 2014 at 9:08 AM , Blogger Galu said...

Raphael, to hide "anonymous" check box you can check this document:
http://blog.loopto.do/2012/06/feedback-collection-form-integration.html

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home

Ready to get a FREE Loopround account?
All you need is a Google account and 30 seconds!

Create a Free Account

Sign up with your Google login!

Terms of Use

Privacy Policy