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



Hello @Rob,

Just messaged you. :speech_balloon:

Thank you for the help.


Hey @Rob. Yes that’s fine if you publish it. Just a note, in the preview mode I can only get a page redirect if I don’t click on any of the other fields. As soon as I click on a field other than the drop down (regardless of whether I type something in or not) the page no longer redirects.


Hi James,

I just published the page and everything is working correctly. I think it was just Preview mode that was causing the issues. Most external links don’t function properly in Preview as it’s actually an iframe of the page (since it’s technically unpublished). As soon as I published it everything was working fine. I didn’t even touch the code :slight_smile:

Nice work!


Awesome! Thanks for looking at this for me. I’ll make sure to keep that in mind next time I’m having an issue with preview mode!


Hello @Rob !

I have tried using the script for state/province and I’m not having any luck. I don’t know JS but even with some trial and error I’m still stuck. Can you help? My need is somewhat urgent.



Hi @Sharon_Schanzer happy to take a look for you. Could you share the URL of the page? Are you just trying to use the state/province fields in conjunction with the country dropdown when the USA or Canada are selected?


Yes, just need state/province, which is required, to appear/disappear for USA/Canada vs being hidden for all other countries. Here’s the URL:




just had a look and I can see you are using the default version of the script. I’ve actually created a version specific to your use case, which is linked below the main script at the beginning of the post. I created a new variant for the page and implemented the state/province version of the script for you. I titled the variant “state - province working version” for you (variant F).

Hope this helps!!


Hi @rob - yes I saw that version but there’s still one issue which is that in my case I need state & province to be in the same field (we are pushing to pardot and that’s how the form there is set up.) I duplicated what you did and renamed, can you make the 1 field version work? That’s where I got stuck last time. THANKS!


Ah I see, sorry about that. I just took another look and made some minor adjustments for you so the script only show/hides the one field. I saved the changes in the G variant so you can have a look in Preview mode. The state province field will show if either Canada or the USA is selected :slight_smile:


Hej Rob,

I’m trying to use your code for a similar but slightly different purpose.
I have a form with a dropdown that consists of different products. The prices of these products differ and I would like a box (or a picture) to appear next to the form depending on which product they choose.
The box/image should then show the price and info regarding that specific product.

I’m kinda a newbie in scripting, so I may be out of my league here.

I hope I explained my case well enough :slight_smile:


Hi @rob http://community.unbounce.com/u/rob Thanks! But now the zip/postal code is permanently hidden. That field should always appear. Thanks! Sharon


I’m previewing variant G where I made the changes and I can see the zip/postal code fine. Are you looking in variant G as well?


@Rob Ah yes, I see that. I was looking at F. What about the bounding box, can we fix it so that shrinks and grows too?


Hi @Rob checking back in about my question about the bounding box growing and shrinking. Thanks!


Hi @Sharon_Schanzer I just made a quick edit to variant G for you and it should be good to go :slight_smile:


hello All,

I have to create a form where radio button appear based on country selection from drop down list. For example if user select Canada they will see radio button option. If the option is United state than radio button should not be visible.

Can someone help me how to do that.


Is it possible to show more than one field once the user has selected an option on the dropdown field? Script is working fine with one field, but depending on user selection I need to show more fields.


Hi Rob! Thanks for this “How to”, it was just what I was looking for!

I have a small problem when i use the code with “var cont”. I paste the code as it is, but it only shows one field per chosen option. Why can this happen?

Currently I only have three example options in the drop-down menu. Is there any other variable that needs to be modified?

Here is my preview page: http://unbouncepages.com/final-asseguras/

I would appreciate your help


Your state/province test page has a bug. Both state and province are set to be required. That means the form can’t be submitted. As a test, I selected Afghanistan as my country and I received an error that state is required and province is required (neither of which are obviously showing for Afghanistan).

Do you have a workaround for making either the state or province field required but only when they are visible?