Custom forms are used when you want to show a feedback form, that is different from the default form, to a specific group of visitors.
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 disable the screenshot feature for any feedback given on specific pages.
In this article, we'll explain how you can show a Custom Forms using one of the 4 targeting options. 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: 7min
Difficulty: Intermediate
Creating a Custom Form
First off we'll go through 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.
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.