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,
- 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")
- If the ID matches with what you placed, then the New-Field will show. Otherwise, it won’t
- That’s it!
That’s it. Now publish and test the form!
Webflow - Code to the Rescue
The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.
Need further help?
Need further help in understanding the resources or how to implement them? Feel free to reach out
About Ali Saeed
Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.
Send an email if you'd like to collaborate :)
View his portfolio website