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

Hi! Thank you so much for this. For some reason the script works when my form is on the page but not when it’s in a lightbox - any way to make it work in a lightbox?

Does this work with the “Conversational Forms” script ?
https://community.unbounce.com/t/create-conversational-forms-in-unbounce/

I can’t figure it out on my end.

Hi @voodha unfortunately I haven’t built in this functionality my apologies. It is possible with some adjustments to the code though. Unfortunately I haven’t had the time to make those changes though.

Good catch @kevinridolfi ! Thanks for letting me know! I’ve made some adjustments to the script to allow for each field to be required when visible. It could use a bit of refactoring, but it works. You can see it in action on the example page now: http://unbouncepages.com/stateprovince-conditional-form-field/

One caveat is that the first option in each field will need to be made blank with no text. This will also only work specifically with the state and province fields. Some minor edits are needed to make it work with other fields. Let me know if this does the trick for you.

Here’s the updated script:

<script>
 // NOTE when using a dropdown select for the State and Province fields:
 // If you would like the fields to be 'required' conditionally, the first option must be blank with no text
  
(function(){
  var submitBtn = $("#lp-pom-button-65"); // Add ID of Submit Button
  var field = $("#country");  // Add ID of Dropdown field
  
  var conField1 = field.parent().next();
  var conField2 = conField1.next();
  
  var topPos = conField1.position().top;
  conField2.css({top: topPos});        
  
  conField1.css("display", "none");
  conField2.css("display", "none");
  
  var fieldHeight = conField1.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField2).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  
  var i = true;
  $(field).change(function() {
     if ($(this).val() == "United States") {
      conField1.fadeIn("slow");
      conField2.fadeOut("slow");
      module.lp.form.data.validationRules.state.required = true;
      module.lp.form.data.validationRules.province.required = false;
      module.lp.form.data.validationMessages.state = "Please select a state"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else if ($(this).val() == "Canada") {
      conField1.fadeOut("slow");        
      conField2.fadeIn("slow");
      module.lp.form.data.validationRules.province.required = true;
      module.lp.form.data.validationRules.state.required = false;      
      module.lp.form.data.validationMessages.province = "Please select a province"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField1.fadeOut("slow");
      conField2.fadeOut("slow");
      if (conField1.css('display') == 'block' || conField2.css('display') == 'block') { 
        moreFields.animate({top: "-=" + halfSpace}, 600);
        submitBtn.animate({top: "-=" + halfSpace}, 600);
        module.lp.form.data.validationRules.province.required = false;
        module.lp.form.data.validationRules.state.required = false;
      }  
    }
  });
  var fieldAdjust = function() {
    moreFields.animate({top: "+=" + halfSpace}, 600);
    submitBtn.animate({top: "+=" + halfSpace}, 600);
  }
})();  
</script>

Hi Rob! Thanks for this “How to”, it was just what I was looking for!

I have a small problem when i use the code with “var cont”. I paste the code as it is, but it only shows one field per chosen option. Why can this happen?

Currently I only have three example options in the drop-down menu. Is there any other variable that needs to be modified?

Here is my preview page: http://unbouncepages.com/final-asseguras/

I would appreciate your help
Thanks!
Matias.

hello All,

I have to create a form where radio button appear based on country selection from drop down list. For example if user select Canada they will see radio button option. If the option is United state than radio button should not be visible.

Can someone help me how to do that.

Hi @Rob checking back in about my question about the bounding box growing and shrinking. Thanks!

I’m previewing variant G where I made the changes and I can see the zip/postal code fine. Are you looking in variant G as well?

Hej Rob,

I’m trying to use your code for a similar but slightly different purpose.
I have a form with a dropdown that consists of different products. The prices of these products differ and I would like a box (or a picture) to appear next to the form depending on which product they choose.
The box/image should then show the price and info regarding that specific product.

I’m kinda a newbie in scripting, so I may be out of my league here.

I hope I explained my case well enough 🙂

Hi @rob - yes I saw that version but there’s still one issue which is that in my case I need state & province to be in the same field (we are pushing to pardot and that’s how the form there is set up.) I duplicated what you did and renamed, can you make the 1 field version work? That’s where I got stuck last time. THANKS!

Yes, just need state/province, which is required, to appear/disappear for USA/Canada vs being hidden for all other countries. Here’s the URL:

http://unbouncepages.com/all-in-one-robot-software-for-easy-application/

Thanks!

Hello @Rob !

I have tried using the script for state/province and I’m not having any luck. I don’t know JS but even with some trial and error I’m still stuck. Can you help? My need is somewhat urgent.

TIA!