When you have your Usabilla Feedback Button up and running on your website you may want to add some more logic to the feedback button that your visitors see. For example, you may want to show a different feedback form to your employees or logged-in users. Showing a different form to your users can easily be achieved using the Custom Forms feature. Custom Forms allow you to show a different feedback form based on the URL, Country, IP, or using a JavaScript API Command. In addition to showing a different feedback form with its own questions and design, having custom forms also allows you to auto-label any incoming feedback based on the custom form that was used.
In this article, we'll explain how you can show a Custom Form using one of the 4 options, and how you can automatically label using Custom Form. For the fourth option of setting a Custom Form, we'll be using the JavaScript API Commands. We recommend that you have a basic understanding of JavaScript if you want to use that option.
Read time: 9min
Difficulty: Intermediate
Creating a Custom Form
First off we'll go over the steps of creating a Custom Form. Custom Forms are always created as part of an existing feedback form and button. So go to the "Buttons&Forms Setup" page and navigate to your feedback button.
On the right-hand side of your feedback button, you'll see a button labeled "Edit default form". Underneath this button you'll see a link saying "or add a custom form", click on this link to add a custom form.
Note: Keep in mind that a Feedback Button will always have a default form. This is the form that will be shown to users that don't match the targeting options for your custom form(s).
After you've clicked the link you'll be prompted to fill out the name of your custom form. Make sure to keep an easy, but more importantly, a descriptive name to convey the contents of the custom form. After filling out the name click on the "OK" button to move on to the creation of the form itself.
You'll notice that the custom form has the exact same options for editing the form as the default feedback form. You can now edit your form, intro, and exit pages in the same way as setting up a default feedback form. The only extra settings you can specify is the fourth step, the "Visitor Targeting".
Custom Form Visitor Targeting
In the Visitor Targeting step you can specify which visitors will see your Custom Form. There are three targeting options available that check for a match:
- Based on a URL or Path
- Based on the Country
- Based on the IP-address
Custom Forms based on URL or Path
The first option allows you to set a Custom Form based on the matching of a specific URL or Path. You can use both a positive or negative match by selecting either "any/none" and target based on either URL or Path by selecting either "URLs/paths".
Rules for the targeting are easily generated by entering the URL in the field on which you want to show the specific Custom Form. If you then click on the "+" on the right, the rule will automatically be generated.
When you manually create the targeting based on URL or Path you'll be able to select a type of match you want to do.
In the example above, the custom form will be shown when the user is on:
If, instead of "any" we would select "none", then this Custom Form would be shown on all website pages except for:
Custom Forms based on Country
The second option for showing Custom forms is based on country. Using this option allows you to show a Custom Form when the user is from any/none of the specified countries
This targeting option will show the form to users from a specific geographical location. This location is based on the IP address of your visitors. You can add multiple countries to make sure that the correct Custom Form is always shown.
Using this option can help with showing specific feedback form to customers from countries where your organization, for example, does not operate. Or where you do not have a localized website.
Custom Forms based on IP-address
With the third option, you'll have the option to show a specific Custom Form when any/none of the specified IPs match. Use this targeting option to show the Custom Form to visitors with a specific IP address. For the specifying of the IP-address, you can use several notations. We highly recommend that if you want to use this for showing a specific Custom Form to colleagues that you check with your network administrator to set this up properly. He will be able to provide you with an overview of the IP-addresses.
As soon as you're done with specifying the targeting of your customer form you can finish creating your custom form by saving it.
Auto-Labeling Based on Custom Forms
Now that you've created your Custom Forms we'll be adding the auto-labeling. Auto-labeling based on Custom Forms allow you to consistently apply labels to feedback across multiple brands and domains. Which in turn makes the segmenting and feedback management of feedback a lot easier.
Labeling based on Custom Forms is achieved by typing in the label that you want to have applied to each feedback item that comes in from a specific Custom Form using the "Advanced Settings". To do, so edit your Custom Form and click on the "Advanced Settings" found on the left-hand side.
Next, you'll be able to specify the labeling and even the custom styling that you may want to use for your Custom Form. To give you a better understanding of how you can use the Custom Forms and auto-labeling we've created a small use-case on how Custom Forms could be used in a large organization with multiple subsidiaries with consistent auto-labeling applied across multiple feedback buttons and custom forms.
Use case
Let's take our virtual organization McBilla here. Organization McBilla is a large national enterprise that has multiple subsidiaries. Each of the 8 subsidiaries of McBilla offers the same product and acts as competitor brand within the McBilla group. All 8 websites of the subsidiaries are developed by the same Development Team and are structured in a similar way, with the main difference being that they are styled differently to appeal to different demographics. Because the websites of all McBillas subsidiaries are structured in a similar way it makes sense to align the labels applied to all incoming feedback. Aligning the labeling across McBillas subsidiaries makes it easy for management, developers, marketers, or product owners to quickly see all feedback from a certain part of the website across all subsidiaries.
McBilla decides to label based on the customer type, product type, and interaction type. Based on their sitemap, that provided them with an instant overview of the website structure, they started with the following rules:
- /business
- Label all B2B pages feedback with "business"
- /consumer
- Label all B2C pages feedback with "consumer"
- /service
- Label all customer service pages feedback with "service"
- /product
- Label all product pages feedback with "product"
Because each of the subsidiaries tries to target their own demographic McBilla uses multiple feedback buttons and multiple Custom Forms to accommodate the needs of the subsidiaries. They do so by changing the tone of the writing and changing the styling. They do make sure that the labels are applied consistently across all different feedback Buttons van Custom Forms.
Auto-labeling based on Custom Form using the URL/Path depending on the structure of your website can greatly increase the categorizing and segmentation of feedback. Especially when you combine the auto-labeling with Saved Search Emails you'll or our Public API. Having consistent labeling also increases the actionability of feedback in the Usabilla Dashboard and Highlights section
Set Custom Forms using JavaScript
You may run into the situation where you want to show a specific Custom Form not based on URL/Path, Country, or IP but based on your own logic. Using the Usabilla JavaScript API Command you're able to set a specific Custom Form based on your own logic. You could, for example, show a custom form based on:
- The current time
- The user's login status
- The number of website visits
- The browser
- The OS
- The custom button the user clicked
In order to set a specific Custom Form using our JavaScript API commands you'll need to first add the Feedback Button to your website and make sure that you have your Custom Forms ready.
Next, you'll need to use the "setForm" JavaScript API command to set the Custom Form that you require. The "setForm" command can only be used after the Usabilla Feedback Button has been loaded. The "setForm" command uses the name of your Custom Form as the argument for deciding which Custom Form needs to be loaded.
window.usabilla_live("setForm", "Enter the exact custom form name here");Adding your own logic is easily achieved by adding the "setForm" JavaScript API command and your own JavaScript using a Self-Invoking Function that you initialize as soon as your website and the Usabilla Feedback button are loaded. Alternatively, you could use the logic provided by your tag manager trigger rules with the "setForm" command being initialized in a separate tag.
How you add the JavaScript to your website it totally up to you. You can either upload the JavaScript to your website or you can add it to for example using your tag manager.
Down below you'll find an example that we've created where we use three different buttons that show different Custom Forms based on the button that the user clicks.
Need help setting up or advise on what the best approach is? Reach out to your Usabilla Customer Success Manager. He/she will be able to help you with any questions that you may have.