How to Hide Form Fields Based Upon User Selection

  Forms


Functional forms are arguably the most important part of any lead generation strategy. Strategically hiding form fields until selected by a user can greatly improve user experience -- and boost your form's chances of being filled.

How to Hide Form Fields Based Upon User Selection

Your website's forms -- whether on a landing page or on your website directly -- exist to do one critical thing: gather information about interested individuals for sales leads. However, not all forms are created equal. Sometimes, putting out every form option can be overwhelming for a user and provide a negative user experience.

Hiding certain form fields until a user triggers them with a previous answer can be a simple way to withhold certain questions until a user is ready for them. It also gives you the ability to clearly define what form sections are required and which ones are not, thus improving UX. 

Ultimately, making certain form fields conditional on based upon previous user-inputed options makes your forms much more versatile and help drive better quality conversions.

HTML

The HTML here is a simple Bootstrap form, with some flex groupings. Not that each form field grouping should have its own unique ID. This ID will be used in jQuery target specific sections to show or hide.

JS

The Javascript uses jQuery to change the DOM depending on the selections made. Essentially, depending on the conditions of a field answer, you can bulk turn show/hide other components of the form. For validation purposes, some extra attributes are changed depending on the selection. If a field is hidden, then all required properties should be removed. If a field is visible, then it should/could be required.

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser window to various sizes to see how the banner would look on mobile display.

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.