How to Hide Form Fields Based Upon User Selection
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.
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.
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.