[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection

forms

#1

Want to avoid scaring someone off with too many form fields? Or maybe you want to collect an additional bit of information based on the context of a separate field (state/province based on the country selection, for example). Now you can with our latest addition to Tips and Scripts!

Introducing: Conditional Dropdown Fields :parrot:

This script will allow you to add a drop down field that will conditionally show which field appears next based on what the user chooses.

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/conditional-reveal/

And the State/Province example here:
http://unbouncepages.com/stateprovince-conditional-form-field/


Instructions

Click here to view the instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1. Add the Javascript

You can find the javascript here: https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

Since this gets asked for fairly often in Support land, there is also a version of this script designed specifically to conditionally show a state or province field based on the selection of a country: https://gist.github.com/RobertCam/d7ac63b249eba28941872443cb9f2643

Step 2. Create the Form

If you haven’t already, add a dropdown field to the form on your page. The script will target the specified number of fields that follow the dropdown, hiding them and displaying the first field if the first dropdown option is selected, the second field if the second dropdown option is selected, ect…

If you are using the state/province version make sure that the state field comes before the province field in your form.

Step 3. Update the ID of the Dropdown Field, the box containing the form (if there is one), the Submit button, and the “count” Variable

Replace the ID in the script for the for the ID of dropdown field you wish to trigger the conditional logic on your page. Do the same with the submit button and any element the form is nested in. Then adjust the number for the the “count” variable to determine how many fields to conditionally show/hide.

Step 4. Adjust the Spacing of the Following Fields

If the conditional dropdown field is not the last field in your form you may need to slightly adjust the spacing for the fields that follow.

Change the number coming after the “space” variable in the code to adjust the vertical spacing of the following fields. Increasing the number will bring the fields up towards the top of the screen, decreasing it will push them down. It’s going to take a bit of trial and error (sorry).

The default in the script is for 5 fields. To get it working with 2 fields, for example, set the count to ‘2’ and the space to ‘15’.

**V.1 of this script is set to work only with two fields. You can find that here - https://gist.github.com/RobertCam/2e1fee450668037b237a450562fdcae3

You’re Done! :slowparrot:


Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + convertables to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

@Rob this is hot fire!!! :fire: :fire:


#3

This. Is. Awesome! Love this basic form logic functionality, @Rob. :slight_smile:


#4

Oh man sooooo nice … sooooo useful!!! LOVE IT. :heart_eyes:


The Ultimate List of Unbounce Tips, Scripts & Hacks
#5

It’s possible to use it for more than 2 option?


#6

Ok done with 4 options


#7

Looks like you got this figured out already @Daniele_Madia_Privat :slight_smile:

For anyone else reading this, you can easily use this multiple times by copy/pasting the javascript and changing the ID to match the new dropdown and the submit button.


#8

I’m trying with no sucess to integrate conditional display with Dynamic Form Confirmation URL’s Using Browser Redirects. For example my goal is a form with “select state/country” -> after selection appear the form with all city of selected country -> selection city with redirect to a specific url.com/city. Anyone have an idea how to do that?


#9

@Daniele_Madia_Privat Feel free to direct message me and include the page URL and I can take a look for you :slight_smile:


#10

If anyone is interested, thanks to @Daniele_Madia_Privat’s question, I’ve adapted the script to work with more than 2 fields. Shoot me a message if you’d like to conditionally display more than two fields with the script.


#11

You’re a :star: Rob!


#12

Rob, you da real MVP.


#13

We push to the limit! Thanks for support @Rob !


#14

Just tried out this script today, really nice work! I too would be interested in having more than two fields if possible


#15

Thanks @stefanei! How many fields do you need this to work with? It’s for sure possible but requires a bit of reworking the script how it’s currently written. I’m working on making it more dynamic, but I can help you out with this one in the meantime.


#16

Thank you! If the script could work with 5 fields at this point that would be great!


#17

This is great! Is it possible to have only the next field display (or not), but then have fields afterward that always display or does this only work when the fields are at the end of the form? I’m not much of a coder so any guidance or tips would be so appreciated! :slight_smile:


#18

Thanks for requesting this @stefanei! I put together a version of the script that will allow you to choose the number of fields to reveal. Change the number after “var count =” to the number of fields you need to conditionally hide. It ill work the same way in that it will apply to the fields immediately following the dropdown.
You can grab the updated script here - https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

The number for the space variable will slightly adjust the spacing of the visible fields after the dropdown (if there are any). I’ve defaulted it all to work with 5 fields. But if you change the number you may need to play around with the space variable a bit to get it perfectly placed.

@ltaylor You can definitely have fields that are always visible after the conditionally displayed field. Here’s an example: http://unbouncepages.com/conditional-dropdown-multiple-fields/

:slight_smile:


#19

Awesome got it working now, thanks so much for the help! @Rob


#20

My pleasure :slight_smile: