Learn how to use a combobox or autocomplete field to select individual items or call an external services, such as address validation, to retrieve information in your Smart Form.
Use a Combobox/Autocomplete field to help respondents enter information such as an address. A list of suggested addresses appears when the respondent starts typing in the field; the respondent simply selects an address and it’s entered correctly on the form.
You can use different search providers to help autocomplete answers. For example, you can use Canada Post to autocomplete addresses in Canada and other countries. You can also use one of the pick lists provided with FormHero Builder, such as a list of languages or provinces. Contact FormHero for help creating a custom list for your organization.
Tip The Combobox/Autocomplete field lets resonpendents choose an answer from a list. You’ll also need Short Text fields to store the answer. For example, if the respondent selects an address, you need a Short Text field to store each part of the address (street number, street, city, and so on).
Example
When respondents start typing an address in the Search for your address field, a list of possible addresses is shown. When the respondent selects an address from the list, the parts of the address are automatically entered in the Short Text fields (Street no, Apt/Suite, Street Name, and so on).
Example (with Enable field toggle)
The Enable field toggle option gives respondents a choice: they can select an address from a list or type in an address.
Field Settings
Required
Label
Enter the text you want to show in the answer field. This could be the question or a hint to help respondents fill in the field. When the respondent begins typing, the label moves above the field.
Search Provider
Select the source of information to autocomplete the field. For example, if the field contains an address, you might select Canada Post. You can also select a pick list, similar to the lists used for Dropdown fields.
1. Select a Search Provider.
2. If you select a provider (such as Canada Post), additional fields may appear where you can choose options (such as a list of countries).
3. If you select FormHero PickList, then use the Select a Pick List field to choose a list. Please contact FormHero for assistance creating custom lists.
Data Binding
Enter the data binding for the field. The data binding is used to label and store the information the respondent enters in this field.
Tip For more information on how to name your data bindings, see Assign data bindings.
Multi-field Data Population
Map the values returned from the Search Provider to Short Text fields on your form. For example, you could map an address returned from Canada Post to fields such as street, city, province and postal code.
You must use Multi-field Data Population if you’re using Enable field toggle.
Tip Use Enable field toggle if you want to give respondents the option to enter an answer manually. You must select Enable field toggle BEFORE you fill out the Multi-field Data Population section.
1. Add a Short Text field for each Search Provider value you want to map. Make sure to add a data binding for each Short Text field. For example, you might add these fields for an address:
2. In the Multi-field Data Population section, map the Short Text fields to the values from the Search Provider.Using the Short Text field examples from step 1, your mappings might look like this:
Do the following for each Short Text field.
* Data Binding
* Select the data binding for the Short Text field.
* PickList Property
* Select the Search Provider value that you want to map to the Short Textfield.
* Replace
* Select Yes if you want to replace the value (if any) the respondent has entered manually with the value from the Search Provider.
* Toggleable
* Select this checkbox if you’re using the Enable field toggle option.
3. Click + to save the mapping.
4. To remove a mapping, click ( 🗑) beside the mapping.
Optional
Hint
Enter a short hint to help explain the question. The hint appears below the answer field.
Info-bubble HTML
Enter more information to help explain the question. Users can view the info-bubble by hovering over an icon beside the answer field. You can use HTML tags to format the info-bubble content.
Enable field toggle
If you select this option, respondents will see a link allowing them to choose to enter an answer manually or use the Search Provider list.Make sure you’ve created and mapped Short Text fields that respondents can use to enter the answer manually. For example, if the respondent is entering an address, you would need Short Text fields for street, city, province and so on. See Multi-field Data Population for details.
Select Enable field toggle.
Enter the Toggle label for the link (for example, Enter address manually). When respondents click this link, the Short Text fields appear so they can enter the answer manually.
Enter the Toggle off label for the link (for example, Search for address). When respondents click this link, they’re able to use the Search Provider list.
For example:
Make this field required
Respondents must answer the question to move to the next panel. Click the toggle switch to select this option.
Tip An * is shown beside the question to indicate that it’s required. You can style the * using CSS.
Allow User to Enter Custom Value
Allow respondents to enter an answer that isn’t in the Search Provider list. Click the toggle switch to select this option.
Show Full List on Click
Show a dropdown list with all possible values when the respondent starts typing. The list is filtered to show possible matches as the respondent continues typing. Click the toggle switch to select this option.
