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

7 years ago
22 January 2017
142 replies
2561 views

Userlevel 6

Rob
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

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!

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?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Show first post Hide first post

142 replies

Page 4 / 6

Hello !

I've just tested this script on my landing page, everything works perfectly, except that it's impossible to submit the form. When you click on the submit button, nothing happens...
Could you help me?

Thanks a lot,
Perrine

I would like to do the same thing. Did you ever figure this out?

I’m also having an issue with this solution. Everything is working except upon submit of form, nothing happens. Any suggestions on what could be wrong?

Hi, I am looking for a similar functionality,

I need a form which when a checkbox is checked it shows an additional phone number field. Is there an existing script for this?

Userlevel 7

Hi @Perrine & @Timf,

It might be a number of reasons… is the console throwing up any errors?

Can you duplicate your pages on the unboucepages.com domain and share a link here so the community can try and troubleshoot it for you?

Hello everyone! I have a doubt on how to make this happen:

Basically, I want to:

When Dropdown = 0, no fields are shown and the submit button becomes just a link to a specific page.
If dropdown = 1 I ask for the email
If dropdown = 2, I ask for email and phone

Right now, the scripts I’m using are:

But this is not allowing me to show 2 fields (email and phone) when dropdown is 2.

Thanks

Hi @Hristian

Thanks for your feedback.

Here's the link to my test page with the form: http://unbouncepages.com/test-atawa/

Thanks for your help!

Perrine

Hey @Carin Did you manage to do this? I’m looking for the same thing

@Hristian & @Perrine

I figured it out… at least with my use case. I’m using dropdown selectors for conditionally displaying options. Apparently drop-down selectors appear as required by default if the option“first menu choice is not a valid value” is checked. This also applies to conditionally displayed dropdowns causing these fields to be required and causing form submission not to work. Since the form builder doesn’t have a required checkbox to enable/disable for dropdown selectors, I read on another thread to simply uncheck the option “first menu choice is not a valid value.” So apparently this change makes the dropdowns not required. The logic for this kind of makes sense but ideally I’d like to have the main dropdown required and still have instructional text as first option that is not selectable.

I ended up doing something more “manual” and less pretty, but it works.

Hope somebody can answer my questions so I can make it better.

hello @Timf

You're right, I've just tested without the "first menu choice is not a valid value" option and my form sends correctly! Like you, it's quite important for me to be able to keep this functionality.
Do you think there is a solution @Hristian?

Thanks :)

Userlevel 7

Hi @Alfonsosbla,

You’ll need some custom JS and CSS to get the form working as you want.

The actual JS/CSS would have to be written specifically for your use case since you’ll have to adjust the position of the fields depending on your exact form. The JS would dictate the logic of what fields are shown when and based off of that the CSS would position the actual fields where they need to go.

On top of that you’ll have to play around with the fields validation and turn it on and off depending on what state the form is currently at. I posted a brief snippet above in regards to the validation.

Best,
Hristian

Hi Gary,
Did you ever figure this out?

Userlevel 7

Hi @Perrine,

It should be possible to adjust the JS and “play” around with what’s required and what not at a particular state - if the field is visible or if it isn’t visible.

I don’t have a ready made script but based on my experience with these Unbounce forms, it should be possible.

Hello,

Thank you very much for the script. Im new here, I have no knowledge in doing jscript, I copied the script that was given but I cant seem to make it work with the below conditions, may I ask for help for the script on this one please:

When I select US, it should show City, State, Postcode fields.
Else, it hides city, state, postcode fields.

Thank you for the help!

Hi Rob,

I have implemented conditional form here on a lightbox "http://preference.lookyounger.net/look-younger/"

Now its not letting me submit the form, basically submit btn is not working :(.

Thanks

Justin
Former Unbouncer
1556 replies
7 years ago
30 January 2017

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

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

Userlevel 7

Jess
Former Community Manager @ Unbounce
831 replies
7 years ago
22 February 2017

You’re a ⭐ Rob!

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

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

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

Userlevel 6

Rob
Author
Former Unbouncer
198 replies
7 years ago
30 March 2017

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

Page 4 / 6

Introducing: Conditional Dropdown Fields

Instructions

Step 1. Add the Javascript

Step 2. Create the 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

Step 4. Adjust the Spacing of the Following Fields

You’re Done!

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded