How can I publish two separate forms with different fields and instances on the same website using Webflow?
TL;DR
- Add two separate Form Blocks to your Webflow site and configure each with unique field names and form settings.
- Customize form names for clarity, route submissions individually if needed, and test both forms to ensure proper functionality.
To add and publish two separate forms with different fields on the same Webflow site, you need to configure each form independently while ensuring they work without conflict.
1. Add Two Separate Form Elements
- Drag a Form Block onto your canvas in the desired page or section for Form 1.
- Create a second Form Block for Form 2, placing it on the same or another page.
- Each form block is self-contained and can have independent fields, styling, and submission settings.
2. Customize Form Fields Independently
- Ensure each form has unique field labels and field names to avoid confusion when reviewing submissions.
- E.g., Form 1 might include fields like: Name, Email, Message; Form 2 might include: Company, Phone, Budget.
3. Use Unique Form Names (Optional but Helpful)
- Select each form’s Form Block, then in the Settings Panel, update the Form Name (e.g., “Contact Form”, “Quote Request Form”) to differentiate them in Webflow’s Submissions tab.
4. Adjust Form Settings Individually
- Each form can direct submissions to the same or different recipients by:
- Going to Project Settings > Forms.
- Setting Form name–based routing for different email recipients per form name.
- If using Webflow’s default form handling, all submissions go to the site admin by default unless routed.
5. Publish and Test Both Forms
- Publish your site after designing and setting up both forms.
- Test each form separately to confirm:
- Submissions are sent.
- Fields are collected correctly.
- Confirmation or redirect messages work as expected.
6. Optional: Custom Integrations
- If using integration tools (e.g., Zapier, Make, or custom scripts), you can:
- Use the form name or hidden fields to identify submission source.
- Route data based on the form content or fields.
Summary
To publish two distinct forms on the same Webflow website, add two separate Form Blocks, configure their fields, names, and settings independently, and test thoroughly. Webflow supports multiple forms as long as each is clearly distinguished by name or structure.
