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

forms

#21

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


#22

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!


#23

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!


#24

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?


#25

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!


#26

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?


#27

Hey @Amy_Sera,

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!


#28

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.


#29

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?


#30

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 :slight_smile:

Have a great day, Amy!


#31

Awesome, @Vic! Let’s build this into an official Tip & Script that we can add to the library. :slight_smile:


#32

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.


#33

@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.

  1. If I fill out any of the fields it won’t redirect to the designated url.
  2. 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


#34

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?


#35

@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.


#36

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 :slight_smile:


#37

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


#38

Hello @Rob,

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.


#39

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.


#40

Hey @AlanJ the state/province version is meant to work specifically with the default state province fields for a form. You could try using the original version of the script here: https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

Happy to take a closer look for you if you share the URL for the page :slight_smile: