Build & style forms
Forms are how websites collect information — from contact requests to sign-ups and lead generation. In this video, we’ll design and build a form in Webflow, configure its fields, style its elements, customize focus and placeholder states, and adjust built-in success and error states. We’ll also preview and test the form to make sure it behaves the way we expect.
Video transcript
Forms in Webflow let you collect information from visitors — things like contact forms, sign-up forms, or survey forms. In this video, we'll cover how to build and style a form in the Webflow Designer.
To add a form, drag a Form Block from the Add panel onto your canvas. By default, it comes with a Name field, an Email field, and a Submit button, plus a success state and error state that show after submission. You can see those states by clicking on the form block and toggling between them in the settings.
To add more fields, drag additional form elements inside the form block. You can add text inputs, textareas, checkboxes, radio buttons, select menus, and file uploads. Each input has settings for things like placeholder text, whether the field is required, and the field name — which is what shows up in the submission data, so make it descriptive.
Styling a form works just like styling any other element in Webflow. Select a field and use the Style panel to adjust padding, border, background, font, and so on. You can create a class on your inputs and style them all at once. The submit button is just a regular button element, so you can style it the same way you would any button.
One important thing to note: the form label and input need to be connected for accessibility. Webflow handles this automatically if you use the built-in Form Label element — it links to the input via the "For" attribute in the settings. Keep that connected when you rearrange elements.
That's the basics of building and styling a form in Webflow. In another video, we cover where form submissions go and how to manage them.
