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

Show first post

142 replies

Rob
Userlevel 6

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>
Rob
Userlevel 6

HI @Matias_Errecart Glad you found some value here 🙂

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.

kevinridolfi

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.

Amy_Sera

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!

E

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

C

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

Rob
Userlevel 6

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 🙂

Rob
Userlevel 6

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!

Rob
Userlevel 6

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!

E

Hi,
Is there anyway to nest these? For example, the first form people select is Yes, No, or Maybe. This then leads to a second drop down form which will have a yes or no option. If they select yes I want it to reveal an email/phone number form. I want this to apply to all of the yes, no or maybe options.
I’ve been trying to do this with a second version of the above code, but when the email form is revealed it just ends up overlapping the original text box, regardless of the distance I put in.

Rob
Userlevel 6

Hi @ESSDigital Unfortunately I don’t think this specific functionality will be possible. I didn’t design the script to make more than one field in the form conditional. It may be possible with some adaptations to the existing script, but that would require some javascript knowledge and I haven’t had the time to dig into adding that functionality.

Apologies I don’t have a better answer for you

W

Hello all,

I am trying to get two fields to display once an option from the dropdown has been selected. Has anyone had any luck with this?

Thanks very much

D

I have no idea why but I cannot seem to get this to work on our form. I want the last field to appears if the second drop down on the second last field is selected. https://fleet.drivewyze.com/drivewyzeforfleets-1/

L

Hi @Rob can you please help? I added 2 form fields after the conditional field but it only displays one.
https://ecosystemreport.startupblink.com/
Your help is really appreciated!!

Rob
Userlevel 6

Hi @Lorena, I just had a look and I only see one field coming after the dropdown (I assume you removed the second since it wasn’t working). You can add a second field and have it show conditionally as well, you’ll just need to add another option to the dropdown field.

For example for the “I would like to pre-purchase” field make the default option something generic but not an actual option (like “choose one”), and then the following two you have already “August 2018 Report ($750)” and “August 2018 Report&Premium Benefits ($1950)” as the next two options. Also be sure to check the “First menu choice is not a valid value” checkbox in the form editor.

Hope this helps!

L

Thanks Rob for the answer and the help! 👌

J

Has anyone been able to modify this code to show more than one field with each option? I would like it to reveal 5 fields but that doesn’t seem to be supported.

D

Hi Rob,

First of all thanks for the script.

I have used it in my form here is the page: https://book.cloudninecare.com/gift-a-pregnancy-hamper/

Where I have to show/hide two fields Name and Contact, but its showing only one (name only).

Can you please help?

Thanks in advance!

M

Hi Rob,
Thanks for the code. I have it implemented on a variant of this page: https://get.ltcconsumer.com/ltcinfo_indv/

It is almost working perfectly, I have a question expand after the ‘phone type’ field. I want the extra question to show if someone selects “Cell”, but not if they select “Land Line”. Any tips? I basically know nothing about JavaScript!

Thank you!

S

Could you please send me the Script?

Thanks!

Rob
Userlevel 6

Hi @MCA yes this is definitely possible! It’s actually just a simplified version of the original script. I made the adjustments for you below, so no need to know anything about javascript 🙂
Just makes sure the IDs in those first 3 lines all match whats on your page and you’ll be ready to rock.

<script>
(function(){
  var submitBtn = $("#lp-pom-button-27"); // Add ID of Submit Button
  var field = $("#phone_type");  // Add ID of Dropdown field 
  var condOption = "Cell"; // Add value to trigger showing the additional field
  
  // No need to edit below :)
  var conField1 = field.parent().next(); 
  var topPos = conField1.position().top;       
  conField1.css("display", "none");  
  var fieldHeight = conField1.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField1).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  var i = true;
  $(field).change(function() {
    if ($(this).val() == condOption) {
      conField1.fadeIn("slow");
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField1.fadeOut("slow");
      if (conField1.css('display') == 'block' || conField2.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>
M

Thank you! That’s perfect!

J

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!

beverlym

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!

Rob
Userlevel 6

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.

Reply


Terms & ConditionsCookie settings