How to Show Form Fields Based on a Dropdown Selection

This script shows a different follow-up field depending on what a visitor selects in a dropdown. It keeps forms short by only asking for information that applies, for example showing a state field or a province field based on the country selected.

See the demo page built in Unbounce and the state and province demo.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add conditional fields to your form

1. Copy one of the following scripts and add it to the JavaScripts section.

   • Conditionally reveal form fields based on dropdown selection works with any dropdown.
   • Reveal a state or province field based on a country dropdown is set up for the country example.
2. Add a dropdown field to your form, followed by the fields it controls. The script hides those fields and shows the first one when the visitor picks the first option, the second one for the second option, and so on. For the state and province version, place the state field before the province field.
3. In the script, replace the example IDs with the IDs of your dropdown field, your submit button, and the box that contains the form, if there is one. Then set the count variable to the number of fields to show or hide.
4. If the dropdown isn't the last field in your form, adjust the spacing of the fields that follow with the space variable. A higher number moves the fields up and a lower number moves them down. You may need to try a few values. The script is set up for 5 fields by default. For 2 fields, for example, set count to 2 and space to 15.
5. Save and republish the page.

An earlier version of the script that works with two fields only is available as Conditionally show the following form field based on a dropdown selection.