Properly setting up Forms and Input fields in Webflow

Input Fields

When working with input fields each one of our projects comes with some coded defaults.

In order to have the best possible experience for the users we’re using:

Nice Select JS

• Used to create custom dropdowns that look nice
• Used to create scrolable select dropdowns
• Used for Country selectors
  

*Free Resource coming soon...

Custom Validation Messages

• It is much better to alert the user if the field is not pre filled correctly with a custom message before they submit the form.
• That’s why we’re adding this specific logic and design to all input fields
  

*Free Resource coming soon...

All States

Designing all states like:

• Hover
• Focus
• Default
• Pre Filled
• Error
• Active
  

Naming Input Fields

• Each input field needs to have a specific name connected to it
• Make sure each input has the proper type selected e.g. Number or Email
• Each input needs to have a Unique ID
  

Forms

When adding forms to Webflow there are few items we should take care of like:

• Each form needs to have a unique name
• If there are multiple forms of the same type on different pages they need to have the same name
• We need to make sure that the forms are going to the proper CRM of the clients choice