[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection
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:
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.
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’.
Have you considered this script instead? It allows you to start with the easy questions and work your way up to the meaty questions. If you give this a try I’d love to hear how it works out for you!
Awesome! I’ll check it out and let you know. While I have you, do you have any tips for hiding a box based on the time of day? Like if I have a floating phone number click to call box, but my call center closes at a certain time, it would be nice to hide that box after 6pm MST for example.
Ahhhhhh, very interesting use case. I’m sure this would be possible with a bit of code. @Vic / @Rob / @Noah - you know of anything off the top of your head?
Hi Amy!
I do have some code that can help you hide any element on your landing page between two hours.
Simply paste this code in the javascripts section of your page selecting ‘Head’ as the placement:
<script>
$(document).ready(function(){
//Add the start and end time using the format hh:mm (24 hour format) Time is in UTC.
var startTime = '13:00';
var endTime = '21:00';
var curr_time = getval();
if (curr_time > startTime && curr_time < endTime) {
}else{
//Change #lp-pom-box-15 for the ID of the element you want to hide.
$('#lp-pom-box-15').hide();
}
function getval() {
var currentTime = new Date()
var hours = currentTime.getUTCHours()
var minutes = currentTime.getUTCMinutes()
if (minutes < 10) minutes = "0" + minutes;
var current_time = hours + ":" + minutes;
return current_time;
}
});
</script>
Now, change the ‘startTime’ and the ‘endTime’. This is the period of time the element will be visible on the page. Keep in mind this times are in UTC, to make sure it’s the same time all around the world. There are many resources on line to help you find your UTC time, here’s one of them.
Don’t forget to change #lp-pom-box-15 for the ID of your own box or element, save and republish.
That’s it! Please give it a try and feel free to reach out if you have any other questions. Keep in mind we are not always able to support this type of unofficial workarounds, but we are always happy to take a look and at least try to point you in the right direction 🙂
Have a great day, Amy!
Awesome, @Vic! Let’s build this into an official Tip & Script that we can add to the library. 🙂
Thank you both so much, this is awesome! If it ever makes it into a feature it would be good to have the flexibility to combine day of week. So hide it monday for these hours, tuesday for those hours, etc.
@Rob Hi Rob, I’m trying to combine this code with your “Dynamic form confirmation urls using browser redirects” code. I’m trying to have the phone number/comment section display conditionally based on what they’re looking for. I’ve got both working, however there are some issues.
If I fill out any of the fields it won’t redirect to the designated url.
If I choose more than one dropdown option (without filling any other fields) it doesn’t redirect to the final choice’s designated url (or any url for that matter).
If I don’t fill out any fields and only select one dropdown option it works like I want it to (I just don’t get any information aside from knowing what they’re looking for).
Any idea of what’s causing this issue and a possible solution? Or is what I’m trying to achieve not even possible? Any help is greatly appreciated!
Thanks, James
I’ve implemented the github code on this page, http://test.pretrm.com/pretrm-test-guide/, the idea is to take people who answer ‘21 weeks or over’ for field ID im_pregnant to pretrm.com as a test but it’s not working. It still sends people to the default URL from the click action on the form?
@Rob - I was able to get it to work, but only by reducing spaces in the drop down. So if ‘21 weeks or more’ is an option the code doesn’t work, however, ‘21+’ works. It would be nice if the code was capable of handling menu options with spaces. If that is not possible I’m okay with the workaround I have.
Hey @JamesNhappy to take a look for you, could you share the URL of your page? To be honest the Dynamic Form Confirmation workaround I posted a while back isn’t my favourite (I find it to be overly complex and there are a lot of pitfalls when implementing it). This little script from Noah is a much nicer way of doing it in my opinion: https://gist.github.com/noahub/ee4fd2a1eb8b3096cf29952548ebedab
Let me know on that URL though and I’ll take a look for ya 🙂
Hey @Rob, I got the script from Noah to work. I like how yours still allowed the Form Confirmation dialog to show though since I don’t want all all my selections to have a page redirect and would like if possible to use that code (unless you know how to get a FCD with Noah’s code). I don’t have the page published as I created a test page with just the form on it, so I don’t know if that’ll matter with what you need but if it does please let me know and I can publish it. The preview url for the page with your codes is https://app.unbounce.com/1634653/pages/8136cf10-907e-4a78-a1ee-ad8b8af4052b/preview?variant_id=140740896#desktop Please let me know if you have any ideas. Thanks, James
I was able to get the Country/Province script to work by itself but if I wanted to add another field option like an additional dropdown for Australia State/Territory, how do I make it work? I have tried adding a conField3 to cover this option and now none of options are working.
Thank you.
Sorry for the late reply on this James! I’ve had a look and I don’t see any obvious reason why the code isn’t working on the page. Would it be ok with you if I published the test page to an unbouncepages.com URL so I can test it fully? The redirect won’t occur in Preview.
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 🙂
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!
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.
TIA!
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 🙂
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.
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks