How To Show A New Field When A Specific Drop-down Item Is Selected In A Form

credit: Michael Wells

Here’s a very easy code script to make your form more dynamic on Webflow

This script will allow you to show or hide a form field based on a value selected on the previous dropdown

Here’s how you do it

We have here 2 form fields for example. Once the user selects “email” from there dropdown, we will show the next field, which is “Email Address”. It is important that you assign a value to the “email item” (This will be referenced in the custom script)

We will give an ID to the dropdown (Select Field). In this case, I named it “dropdown-ID” for ease of understanding

Next, we will wrap the field that will show in a Div block and give it an ID. In this case, I gave it “new-field-ID”

In the below example, we want the “Email Address” field to show once the user selects “Email me” from the dropdown. Make sure to give it a value. In this case, the value is “email”

Once this is done, just add the code script in Before body tag of the page. Or if the form is present in multiple pages, you can add the same code in project settings.

To understand how the code works quickly, here’s a quick summary,

1. The form gets updated, where the first function is to search for the value of the dropdown that you placed in the script (in this case, it will be placed in "enter-dropdown-value-here")
2. If the ID matches with what you placed, then the New-Field will show. Otherwise, it won’t
3. That’s it!

‍

‍

That’s it. Now publish and test the form!