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


Userlevel 6
  • Former Unbouncer
  • 198 replies

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

🚨
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. 🚀


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


142 replies

Userlevel 7
Badge +1

@Rob this is hot fire!!! 🔥

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

Userlevel 6
Badge +1

Oh man sooooo nice … sooooo useful!!! LOVE IT. 😍

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

Ok done with 4 options

Userlevel 6

Looks like you got this figured out already @Daniele_Madia_Privat 🙂

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.

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?

Userlevel 6

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

Userlevel 6

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.

Userlevel 7
Badge +1

You’re a ⭐ Rob!

Rob, you da real MVP.

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

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

Userlevel 6

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.

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

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! 🙂

Userlevel 6

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/

🙂

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

Userlevel 6

My pleasure 🙂

I’ve managed to add additional drop-down fields onto my landing page. However I’ve come across a bit of an obstacle. Your code allows there to be two different additional fields depending on the primary selection. I’m trying to make it work so that it allows nine different additional fields.

Testing this it seems to have worked (sort of). If my primary selection is number 3 or higher - the additional field that appears is positioned further down the page that it should be.

Is there any way you could help in fixing the code so that the position of any additional fields sits directly under the primary field (which happens with selection 1 or 2)?

Here is my preview page: https://app.unbounce.com/1189183/pages/06d025f0-3e4d-4af1-9718-d2d5380166bf/preview?variant_id=131744512#desktop

Thanks in advance!

Rajen

Userlevel 6

Hi @Rajen it’s true, I wrote the original script to only work with 2 fields. I’ve since updated it though to give you more flexibility to make it work with as many fields as you need it to. You can grab it here - https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

I’ve updated the post to with instructions on implementing the new script. I haven’t tested it with nine fields but I don’t see any reason why it wouldn’t work. You’ll need to adjust the space variable a bit I’d imagine but that should be as hard as it gets.

Let me know how it goes!

Userlevel 6

Just a heads up for anyone using the multiple fields version of this script. I’ve just updated the code in GitHub to fix a small bug pointed out by @jxtgroup where the code wasn’t accounting for fields added before the conditional field and causing some display issues.

If you’re using the script and having issues (or gave up on using the script) that’s probably why. You can find the updated version with the fix in the post above or here: https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

If you don’t feel like re-adding the entire script you can change the .siblings() in lines 21 and 22 to be .nextAll() instead and that will fix the issue.

Happy converting!

Is there any chance this same code base could be used to redirect someone to a thank you page based on how they answered a question from a dropdown list?

Userlevel 6

Hi @Amy_Sera, you could potentially adapt this code for that purpose for sure. It would take a bit of customization. This older workaround from @noah does exactly what you need as well, so you could always just include both pieces of code on the page. https://gist.github.com/noahub/ee4fd2a1eb8b3096cf29952548ebedab

Let me know if there is anything I can do to help!

So what if you wanted nested hidden fields. So I’m basically just showing one field at a time? The idea would be that rather than shoving a form at them, we ask a series of softball questions to get them engaged, and once they’ve answered 3 questions we show them the full lead form?

Reply