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

forms

#62

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>

#63

HI @Matias_Errecart Glad you found some value here :slight_smile:

This is actually the intended behaviour of the code I’m afraid. The ‘count’ variable determines how many of the fields following the dropdown are hidden. It will then show one field based on the option selected. First dropdown option will show the field immediately after the dropdown, the second dropdown option will show the second field after the dropdown, ect…

Unfortunately I haven’t created the script to show multiple fields. Sorry about that. It would be possible to adapt the script to achieve this functionality though, however this would take a little bit of javascript knowledge.


#64

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.


#65

Thanks @Rob! It implemented well.

A note for others who implement this new version: The module.lp.form.data.validation lines in the script are dependent on specific names for the state and province form fields. If you are using field names other than “state” and “province”, you will need to modify 8 lines of JavaScript code to swap out the absolute field names. It’s easy enough to do that, but something you need to be aware of.


#66

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.


#67

I believe I just need someone to point me in the right direction for an existing article. In a similar vein to this hack, I’d like to add a radio box. I already have a dropdown field where the user selects how many weeks pregnant they are and I can’t change that, so I need an alternative question type to trigger the new fields, is it possible to make this happen with someone selecting a particular radio button option?

So my form is offering a free guide to premature birth testing, and I want to give users the option of ‘would you like to know if your doctor is offering our test?’ if they select ‘yes’ then 2 additional fields would appear. So the same idea as the drop down trigger, but with radio buttons?

Any help would be appreciated!


#68

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?


#69

Hi @mclopezz it might be just that you need to add the javascript to the lightbox itself and not the main page. When you open the lightbox in the builder try adding the workaround script to the javascript section there (instead of the main page). Since the lightbox content is in an iframe and javascript on the main page won’t be applied to the lightbox content.

Give that a try and let me know if it fixes the issue for you :slight_smile:


#70

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/


#71

I just had a look and you’ll need to check the box for jQuery 1.4.2 in the javascript section of the builder. Once jQuery is included on the page the script should work as expected :slight_smile:


#72

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


#73

Hello @Rob. I have just read through this entire thread, I would like to thank you for your excellent work and information, really great stuff! I was wondering if you could shed light on a question I have? I am looking to combine this ability of Conditional Display Form Fields inside of a Multi-Step Form 2.0

The grand plan would be to have a form with the ability to do something like this:
Multi-Step form 1)
First Name, Last Name, Email [Next]
Multi-Step form 2)
Company Name, Job Title, Address, State, City, Zip [Next]
Multi-Step form 3)
Industry - with conditional display forms (Industry options go from general categories to specific with 3 breakdowns)
SUBMIT

Any help with this would be absolutely exquisite! Thanks!


#74

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!


#75

Hi @kevinridolfi I’m having that problem, wich lines you should change for it?. I’m new with javascript and I need to solve this.

Thank you!


#76

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. :smiley:


#77

Hi @Rob and @Noah , I can’t make it work with Conversational Forms [Create] Conversational Forms in Unbounce
Are those 2 scripts compatible ?


#78

@Rob Is it possible to conditionally display a form field ONLY if a certain option is selected and otherwise not show anything? In this instance, I have a dropdown with several job titles. If a user chooses “Other,” I would like to conditionally show a text box for them to specify a job title. If they choose any job title in the dropdown besides “Other,” I don’t want to show a field.


#79

Hi @Gerardo_Morales happy to have a look for you. Could you share the URL for the page and I’ll take a look. If you just need the same functionality with the state or province fields being required you can also use the script I pasted above :slight_smile:


#80

Hi @ClixMarketing this is possible in a couple of ways. The state/province version of the script is looking for a specific string in order to reveal the field. You could adapt that to your purposes, although that would require a little bit of javascript know-how. You can change the line in the conditional statement to look for “other”:

if ($(this).val() == "other") {
// do stuff
}

There would be some other modifications required though, so I wouldn’t recommend this approach if you’re not comfortable with javascript.

Alternatively you can use the default version of the script. Set the “count” variable to 1 and then make the “other” option the first option in the dropdown. Then make the text box the field that immediately follows the dropdown in the form.

Hope this helps!


#81

Hi @Etienne Unfortunately I don’t think these scripts are compatible out of the box. Neither Noah or myself created these workarounds with the intention of them working together and neither of us have tested it. Sorry about that!