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

Oh man sooooo nice … sooooo useful!!! LOVE IT. 😍

@Daniele_Madia_Privat Feel free to direct message me and include the page URL and I can take a look for you 🙂

Ok done with 4 options

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.

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

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>

Opps, I just read one reply with the same condition. Im checking the provided solution. Im all good thank yoU!

I’m trying with no sucess to integrate conditional display with Dynamic Form Confirmation URL’s Using Browser Redirects. For example my goal is a form with “select state/country” -> after selection appear the form with all city of selected country -> selection city with redirect to a specific url.com/city. Anyone have an idea how to do that?

Thanks @stefanei! How many fields do you need this to work with? It’s for sure possible but requires a bit of reworking the script how it’s currently written. I’m working on making it more dynamic, but I can help you out with this one in the meantime.

Thanks for requesting this @stefanei! I put together a version of the script that will allow you to choose the number of fields to reveal. Change the number after “var count =” to the number of fields you need to conditionally hide. It ill work the same way in that it will apply to the fields immediately following the dropdown.
You can grab the updated script here - https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

The number for the space variable will slightly adjust the spacing of the visible fields after the dropdown (if there are any). I’ve defaulted it all to work with 5 fields. But if you change the number you may need to play around with the space variable a bit to get it perfectly placed.

@ltaylor You can definitely have fields that are always visible after the conditionally displayed field. Here’s an example: http://unbouncepages.com/conditional-dropdown-multiple-fields/

🙂

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?

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?