How can I publish two separate forms with different fields and instances on the same website using Webflow?
TL;DR
- Add and customize separate Form Blocks with distinct fields for each form.
- Assign unique names to each form via the settings panel to track submissions and enable integrations.
To publish two separate forms with different fields on the same Webflow website, you need to create and configure each form independently using Webflow’s native Form element.
1. Add Separate Form Blocks
- Drag a new Form Block from the Add panel for each form you want.
- Place each Form Block in the appropriate section of your layout (e.g., homepage and contact page, or two on the same page).
- Each Form is a self-contained element, so you can style and customize them separately.
2. Customize Each Form’s Fields
- Edit the fields within each Form Block to match your specific needs. One could have just a name and email field, while the other might include a dropdown or file upload.
- Be sure to rename form field labels and input names to avoid confusion when you view form submissions in Webflow or via integrations.
3. Rename Forms for Clarity
- Select each form and go to the Element Settings panel.
- Under the Form Settings section, assign a unique form name (e.g., “Newsletter Form” and “Support Form”). This helps track submissions separately.
4. Set Unique Success and Error Messages (Optional)
- For each Form Block, customize the Success and Error message blocks as needed under the same Form Block to prevent UI overlap or confusion.
5. Publish or Export as Needed
- Publish your Webflow site to see both forms working independently.
- Test each form to confirm that submissions are processed and routed correctly based on their form names.
6. Integrate or Automate (If Needed)
- If using Zapier, Make, or Webflow Logic, refer to the form name to route submissions differently.
- For custom backend or analytics, use the form-name in the payload to distinguish between form sources.
Summary
To show two separate forms on one Webflow site, insert and configure multiple Form Blocks, customize their fields, and assign each a unique form name for tracking or integration. Webflow supports multiple distinct forms by default, so no special workaround is required.