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

I need exactly this too. The field would display “No” by default, and if the user selects "Yes’, then I need to show 2 additional fields for input.

Hi Rob. Can this script be modified to change either the 2nd drop down (or values inside of dropdown) depending upon the answer to the 1st drop down. To be clearer, my use case requires that the first drop down which contains a list of cities will determine the second drop down, which has a list of available agents within the selected city. Hope this makes sense! Thanks so much!

Hi Rob - I actually figured out that this already does this! So sorry, thanks for the great script!

1 Like

Hi @Rob I have a problem with this code. What I’m trying to do is if people say “Soy profesional de la salud mental” ("#soy_profesional_de_la_salud_mental") yes (#sí) don’t show an extra field. But if they answer no (#no) to show an extra field (Por_favor_cuentanos_por_qué_te_interesa_Psious).

I added the Javascript and when I test it and select “no” it creates a spacing but it’s blank.

Landing:
https://app.unbounce.com/2606601/variants/169916261/edit
Published URL as a test:
http://unbouncepages.com/cliente-directo/

Thanks

@Rob Thanks for all the detail in this post.
A few other community members have asked in this tread, but I have not seen a solution yet.

I am also looking for a way to make this script show two or more new form fields when you select “No” in the conditional dropdown and show none of them (hide) when you select “Yes”.

Any help here would be appreciated.

I’ve noticed that the ‘State/Province’ example will cause form submission issues with newer Unbounce pages (newer pages use HTML 5 validation and the form structure is slightly different), so I wrote little fix.

Here’s the script I used for anyone who’s interested :slight_smile:

Be sure to modify the variable values.

<script>
/*
Unbounce Community :: Tips & Scripts :: Conditional State/ Province Form Field Based on Dropdown 
TS:0002-04-060
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/  
  
  // Conditional Reveal state/province field based on selection of the country dropdown
  // Make sure the "state" field is placed after the country dropdown. Place the province field after the state field
  
  $(document).ready(function(){(function(){
  var submitBtn = $("#lp-pom-button-171"); // Add ID of Submit Button
  var field = $("#Country");  // Add ID of Dropdown field
  var provinceFld = ("Province");  // Add ID of Province field (exclude #)
  var stateFld = ("State");  // Add ID of Province field (exclude #)
  
  var conField01 = field.parent().next();
  var conField02 = conField01.next();
  
  var topPos = conField01.position().top;
  conField02.css({top: topPos});        
  
  conField01.css("display", "none");
  conField02.css("display", "none");
  
  var fieldHeight = conField01.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField02).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  
  var i = true;
  $(field).change(function() {
     if ($(this).val() == "United States") {
      conField01.fadeIn("slow");
      conField02.fadeOut("slow");
      document.getElementById(stateFld).setAttribute("required", "");
      document.getElementById(provinceFld).removeAttribute("required");
      module.lp.form.data.validationMessages.State = "Please select a State"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else if ($(this).val() == "Canada") {
      conField01.fadeOut("slow");        
      conField02.fadeIn("slow");
      document.getElementById(provinceFld).setAttribute("required", "");
	  document.getElementById(stateFld).removeAttribute("required");
      module.lp.form.data.validationMessages.Province = "Please select a Province"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField01.fadeOut("slow");
      conField02.fadeOut("slow");
      document.getElementById(provinceFld).removeAttribute("required");
	  document.getElementById(stateFld).removeAttribute("required");
      if (conField01.css('display') == 'block' || conField02.css('display') == 'block') {
        moreFields.animate({top: "-=" + halfSpace}, 600);
        submitBtn.animate({top: "-=" + halfSpace}, 600);
      }  
    }
  });
  var fieldAdjust = function() {
    moreFields.animate({top: "+=" + halfSpace}, 600);
    submitBtn.animate({top: "+=" + halfSpace}, 600);
  }
})();   });
</script>
1 Like

Hi @Becky. Excellent! Managed to get this working for country/province. What if I want to add more than 2 options? This is the scenario:

USA - show states
Canada - show provinces Canda
Australia - show provinces Australia
New Zealand - show provinces NZ

Any help appreciated :smiley:

i cant do it :expressionless:

Hello. I used this script but now the Submit button doesn’t work. Anyone else has experienced this issue? Here’s the link to my landing page https://www.universidad-icel.info/licenciatura

It’s because you’re requiring an input on each campus dropdown but, the user is only able to make a selection on the campus dropdown that is currently showing based on the degree selection input. I confirmed that’s the case by selecting a campus for each option in the degree selection input. You’ll have to make those individual dropdowns not required. From there you can just not require the input at all, try to make it look to users like it’s required, but do the validation or you could create your own custom validation that fires on the button click.

Hi Rob! Sorry in advance for the silly question, I’m new here!

I wanted to add a simple dropdow with two options and, if they choose option A, a hidden field is shown (as seen in the cat vs dog examples).

In the code I see that the IDs of the field are identified but I don’t see where the condition is configured (if option A> show field, else> none).

Could you help me with this? I am a little lost.

Thank u very much!

Hey Ana, I’m having the same problem right now. Could you solved this?

Thanks!

I got this working but can’t seem to figure out how to get my submit button to move lower once someone uses the dropdown?

Hey guys!

First off, absolutely love the code and the work you guys are putting in to make this work. Really makes the flash stand out and look amazing!

I made a video in my Unbounce playlist showing how to set this up…

Here is the link for those who want to see how to do this from start to finish:

Let me know if you have any questions!!

Ivan

Hello,

I’m hoping to get some information on this thread if it’s not too old - Jess advised me to post here.

The only thing I need different from the current code in the post is making my conditional dropbox 1 - 10 in an NPS survey with 3 different ranges (0 - 5, 6 - 8, 9 - 10). Each range will have a different comment prompt after selecting.

Is there anyone that has/ would know how to do this?

Thank you very much!

@Rob

Hi Rob,

Thank you for the script! However, I would like to create a dynamic form with the below behavior:
When someone clicks on the dropdown and select the first choice> 1 field is appearing below, and when someone chooses the second choice on the primary dropdown> 3 fields appear below and not just 1 as the script is now. Is it possible to create something like this?

Thanks in advance,
Carin

Hey @Carin,

Is it possible - yes.

However, you would have to write JS and CSS to account for the 3 extra fields in the 2nd option.

Also, depending on the fields, you might have to write your own validation or at least some logic in the JS that would not “force” you to fill out fields you are not actually seeing.

Last but not least, the CSS would help position the “hidden” fields once they show up and move up/down the submit button so you don’t cover it with the 3 extra fields.

Unfortunately, all of the above would depend on your particular form and there is no one-size fits all script that you can plug-in and use straight away.

Best,
Hristian

Hi @Hristian,

Thanks for your answer. Maybe you can help me with the JS, here is the form logic that I want it to be. Attached screenshots of the form. The logic of the form should be:

  1. A person choose between “Student” to “Industry Profesional” in the drop-down field (all the below fields should be hidden)
  2. If the person clicks on “Student”, below should be the drop-down field is shown - “Experience” and that’s it.
  3. If the person clicks on “Industry Profesional”, below should be the 3 fields shown - “Company Name”, “Job Title” and dropdown “Industrial Experience”.

Hope I made it clear enough and you can help me :slight_smile:

Thank you!
Carin