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

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

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

Thanks!

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.

i cant do it 😑

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 🙂

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>

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

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 @beverlym I just had a look and I believe you’ll just need to enable jQuery in the lightbox and that should get the script working. I’ll DM you a screenshot 🙂

Hi Rob – The URL I’m working on is
http://www.covingtontravel.com/eb181017_vtraveler-lp/. Thanks SO much for your support. - Beverly

Hi Rob, I’m a newbie here and thrilled to find such a sharing community but having trouble making this script work. I used the two-field version for a drop down of “Preferred Magazine Format” with choices of “Digital” or “Paper.” The hidden fields are “Email” and “Mailing Address” depending on which they choose. Do I load the script on the form block or the whole page? Have tried both but my two conditional fields after the drop down always show. Suggestions? What am I missing? Many thanks!

Thank you! That’s perfect!