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

Show first post

142 replies

S

Could you please send me the Script?

Thanks!

M

Hi Rob,
Thanks for the code. I have it implemented on a variant of this page: https://get.ltcconsumer.com/ltcinfo_indv/

It is almost working perfectly, I have a question expand after the ‘phone type’ field. I want the extra question to show if someone selects “Cell”, but not if they select “Land Line”. Any tips? I basically know nothing about JavaScript!

Thank you!

D

Hi Rob,

First of all thanks for the script.

I have used it in my form here is the page: https://book.cloudninecare.com/gift-a-pregnancy-hamper/

Where I have to show/hide two fields Name and Contact, but its showing only one (name only).

Can you please help?

Thanks in advance!

J

Has anyone been able to modify this code to show more than one field with each option? I would like it to reveal 5 fields but that doesn’t seem to be supported.

mpashen

I’d like this, too, @Rob !

I need two fields (maybe 3) to show if a user selects ‘yes’ in the dropdown and nothing to happen if they select ‘no.’

L

Thanks Rob for the answer and the help! 👌

Dominick_Tecson

Hi Rob,

I’ve set up a giveaway form where I’d like multiple fields to reveal at the same time if the user wants the giveaway. You can see the form here: https://alwaysforward.angelusnews.com/newsletter-test/

If the user elects “no” I’d like for the user to just be able to input their email and for no other form fields to show. If the user elects “yes,” I’d like for the rest of the form fields to be revealed at the same time (5 other fields that collects their name, address, city, state, and zip).

Is there an edit to the code I can make to have this happen? Thanks!

Dominick

Rob
Userlevel 6

Hi @Lorena, I just had a look and I only see one field coming after the dropdown (I assume you removed the second since it wasn’t working). You can add a second field and have it show conditionally as well, you’ll just need to add another option to the dropdown field.

For example for the “I would like to pre-purchase” field make the default option something generic but not an actual option (like “choose one”), and then the following two you have already “August 2018 Report ($750)” and “August 2018 Report&Premium Benefits ($1950)” as the next two options. Also be sure to check the “First menu choice is not a valid value” checkbox in the form editor.

Hope this helps!

L

Hi @Rob can you please help? I added 2 form fields after the conditional field but it only displays one.
https://ecosystemreport.startupblink.com/
Your help is really appreciated!!

D

I have no idea why but I cannot seem to get this to work on our form. I want the last field to appears if the second drop down on the second last field is selected. https://fleet.drivewyze.com/drivewyzeforfleets-1/

W

Hello all,

I am trying to get two fields to display once an option from the dropdown has been selected. Has anyone had any luck with this?

Thanks very much

Rob
Userlevel 6

Hi @ESSDigital Unfortunately I don’t think this specific functionality will be possible. I didn’t design the script to make more than one field in the form conditional. It may be possible with some adaptations to the existing script, but that would require some javascript knowledge and I haven’t had the time to dig into adding that functionality.

Apologies I don’t have a better answer for you

E

Hi,
Is there anyway to nest these? For example, the first form people select is Yes, No, or Maybe. This then leads to a second drop down form which will have a yes or no option. If they select yes I want it to reveal an email/phone number form. I want this to apply to all of the yes, no or maybe options.
I’ve been trying to do this with a second version of the above code, but when the email form is revealed it just ends up overlapping the original text box, regardless of the distance I put in.

Rob
Userlevel 6

Hi @Etienne Unfortunately I don’t think these scripts are compatible out of the box. Neither Noah or myself created these workarounds with the intention of them working together and neither of us have tested it. Sorry about that!

Rob
Userlevel 6

Hi @ClixMarketing this is possible in a couple of ways. The state/province version of the script is looking for a specific string in order to reveal the field. You could adapt that to your purposes, although that would require a little bit of javascript know-how. You can change the line in the conditional statement to look for “other”:

if ($(this).val() == "other") {
// do stuff
}

There would be some other modifications required though, so I wouldn’t recommend this approach if you’re not comfortable with javascript.

Alternatively you can use the default version of the script. Set the “count” variable to 1 and then make the “other” option the first option in the dropdown. Then make the text box the field that immediately follows the dropdown in the form.

Hope this helps!

Rob
Userlevel 6

Hi @Gerardo_Morales happy to have a look for you. Could you share the URL for the page and I’ll take a look. If you just need the same functionality with the state or province fields being required you can also use the script I pasted above 🙂

C

@Rob Is it possible to conditionally display a form field ONLY if a certain option is selected and otherwise not show anything? In this instance, I have a dropdown with several job titles. If a user chooses “Other,” I would like to conditionally show a text box for them to specify a job title. If they choose any job title in the dropdown besides “Other,” I don’t want to show a field.

E

Hi @Rob and @Noah , I can’t make it work with Conversational Forms [Create] Conversational Forms in Unbounce
Are those 2 scripts compatible ?

G

Hi @Rob I’m having that problem with the other type field ( the one is not state - province) Could you guide me in which lines I have to make the change for solve this problem in that code ? It will be very helpful. 😃

G

Hi @kevinridolfi I’m having that problem, wich lines you should change for it?. I’m new with javascript and I need to solve this.

Thank you!

Rob
Userlevel 6

Hi @cgaffney thanks for the kind words! I wish I had a better answer for you but unfortunately I don’t think this will be possible. The multi-step workaround only works by showing one field at a time, which doesn’t play well with this script I’m afraid.

I’ve just tested it and it takes the fields that this script hides to make conditional and gives them each their own step in the multi step form. You could try the lightbox workaround here https://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields#content7 as an alternative. It’s not quite as slick as the 2.0 community workaround, but it would make the functionality you’re after possible.

Hope this helps a bit!

C

Hello @Rob. I have just read through this entire thread, I would like to thank you for your excellent work and information, really great stuff! I was wondering if you could shed light on a question I have? I am looking to combine this ability of Conditional Display Form Fields inside of a Multi-Step Form 2.0

The grand plan would be to have a form with the ability to do something like this:
Multi-Step form 1)
First Name, Last Name, Email [Next]
Multi-Step form 2)
Company Name, Job Title, Address, State, City, Zip [Next]
Multi-Step form 3)
Industry - with conditional display forms (Industry options go from general categories to specific with 3 breakdowns)
SUBMIT

Any help with this would be absolutely exquisite! Thanks!

mclopezz

It works! Thank you so much for everything @Rob - this script is very useful!

Rob
Userlevel 6

I just had a look and you’ll need to check the box for jQuery 1.4.2 in the javascript section of the builder. Once jQuery is included on the page the script should work as expected 🙂

mclopezz

Thank you for the response @Rob ! We added the javascript in the lightbox section but it didn’t work - See it here: http://unbouncepages.com/genesys-lp-2/

Reply


Terms & ConditionsCookie settings