How can I create a form in Webflow that allows users to select options from a list and submit their selections?
TL;DR
- Add a Form Block, insert Dropdowns, Checkboxes, or Radio Buttons for user selections, and customize each field’s label and values.
- Set form settings, style the form as needed, configure success/error messages, publish the site, and test the form to ensure submissions are captured.
To create a form in Webflow that allows users to select options from a list and submit, you’ll need to use the native Form block and add selection elements like dropdowns, checkboxes, or radio buttons.
1. Add the Form Block
- Drag a Form Block from the Add panel (press
A, then go to Forms > Form Block) onto your page. - The basic Form Block includes default fields (Name, Email, etc.) that you can customize or delete.
2. Insert Selection Elements
- Choose from the following selection elements depending on how you want users to choose options:
- Dropdown: For single-option selection from a list.
- Checkboxes: For multiple selections.
- Radio Buttons: For single selection (like a dropdown but more visual).
- Drag any of these elements from the Add panel into your form.
3. Customize Options
- Select each field and, in the Settings panel, update:
- Field Label
- Option Names and Values (for Dropdowns, Checkboxes, and Radios)
- Default Selections if needed
- Use meaningful labels and values to help with form submissions and backend integrations.
4. Update Form Settings
- Click on the Form Block (not individual fields) and go to the Element Settings panel.
- Set the Form Name to identify it clearly.
- Optionally, you can add custom actions (if integrating with platforms like Zapier, Make, or custom endpoints).
5. Style the Form (Optional)
- Use classes and Webflow’s Style panel to design the form and its elements.
- Adjust spacing, typography, colors, and layout as needed.
6. Configure Success & Error Messages
- Webflow includes Success and Error message blocks inside the Form. Customize their text and styling so users get clear feedback after submitting.
7. Publish and Test the Form
- Click Publish to push changes to a live or staging site.
- Submit the form yourself to ensure it’s working and that selections are captured properly.
- Webflow stores form submissions under Project Settings > Forms tab if you're using Webflow’s native form handling.
Summary
To create a user selection form in Webflow, add a Form Block, then use Dropdowns, Checkboxes, or Radio Buttons to allow option selection. Customize the form fields, configure display and submission settings, and publish your site to start capturing selections.