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

Thank you! That’s perfect!

Hi Rob, thanks for sharing this script. I’m having some difficulty getting this to work for our landing page. https://app.unbounce.com/2479305/pages/e334bcc9-b108-4c90-bd70-2f9722c3c9e8

What we want to do is to show a checkbox field for the user to give us explicit email consent IF they choose Europe in the dropdown field. We don’t want the checkbox to show if they choose the other choices in the region. Any insight as to how to get this to work? Thanks!

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!

Hi @beverlym welcome to the community!! Happy to take a look for you. Could you share the page URL where you’re trying to get this working? If the page is unpublished you can share the URL in the browser when you’re on the edit screen and I can access it directly.

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, hate to bug you since you’re so generous to help but I’m under a deadline next week & getting a little nervous since this will be my first public page. :slight_smile: Have you had a chance to look at https://www.covingtontravel.com/eb181017_vtraveler-lp/ yet?

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

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?