Webflow has few limitations as high-spec Web Builder and CMS, but one right now is Conditional Form fields and this extends to other form builders or HTML forms. Conditional form fields are inputs, selects, radios etc that are conditional on a pre-selected option(s). One common use is to add an ‘Other’ input box to a Select dropdown. This jQuery snippet fills that gap and also gives options for extensive modification to hide/show a multitude of form components, divs, images and any other HTML element.
‘Other’ Input box for Select dropdown. Great for Conditional Webflow Forms.
Add the following jQuery before </body> tag on your page.
1. Ensure that you include jQuery: –
2. Add a form with ID #form (if you change the form id then update the ID in the jQuery code)
3. Add a select with an option with text ‘Other’
4. Add the ‘Other’ text input and give it class .inputvis (again if you change the class then make sure you change the jQuery code). Give the initial .inputvis a CSS style of none (display: none;).
That’s all you need to do for a conditional select so what when the user selects ‘Other’ in the dropdown the new text input field will display to capture the additional info not covered by your original list of options.
A bit about Webflow
If you don’t know Webflow then it’s highly recommended as a ground-up web design and development tool that features a fully-fledged CMS. We rate Webflow well above WordPress as the go-to tool for creating high-end brochure based websites on an enterprise-grade platform.