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

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?

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

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

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

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! 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?

Thank you for the response @Rob ! We added the javascript in the lightbox section but it didn’t work - See it here: http://unbouncepages.com/genesys-lp-2/

It works! Thank you so much for everything @Rob - this script is very useful!

Hi @cgaffney thanks for the kind words! I wish I had a better answer for you but unfortunately I don’t think this will be possible. The multi-step workaround only works by showing one field at a time, which doesn’t play well with this script I’m afraid.

I’ve just tested it and it takes the fields that this script hides to make conditional and gives them each their own step in the multi step form. You could try the lightbox workaround here https://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields#content7 as an alternative. It’s not quite as slick as the 2.0 community workaround, but it would make the functionality you’re after possible.

Hope this helps a bit!

Hi @Rob I’m having that problem with the other type field ( the one is not state - province) Could you guide me in which lines I have to make the change for solve this problem in that code ? It will be very helpful. 😃