How can I publish two separate forms with different fields and instances on the same website using Webflow?
TL;DR
- Add and customize two separate Form blocks with unique fields, labels, and button text.
- Optionally assign unique names or IDs, configure each form’s submission settings (e.g., custom action URLs), and test independently.
You can publish two separate forms with different fields and configurations on the same Webflow website by creating each form as a distinct form block with unique settings and optional custom actions. Here's how to do it:
1. Create Two Separate Form Elements
- Drag two separate Form blocks from the Webflow Elements panel onto your page or into different pages/sections as needed.
- Webflow allows multiple forms on the same project without conflict, as long as each has its own structure and optional identifiers (e.g., custom form names or IDs).
2. Customize Each Form Independently
- Edit fields, labels, and placeholders differently for each form. For example:
- Form 1: Name, Email, and Message fields.
- Form 2: Company, Phone Number, and Budget fields.
- You can include different button texts (e.g., "Contact Us" vs. "Get a Quote").
3. Set a Unique Form Name or ID (Optional for Custom Backends)
- In the Element Settings Panel, give each form a unique name using the Form Name field. This helps when sending submissions to different backend services or identifying them in Webflow form data.
- Optionally assign a unique ID to each Form (e.g.,
form-contact,form-quote) if you plan to use custom code or third-party integrations.
4. Configure Form Submission Settings
- By default, Webflow captures all form submissions in Project Settings → Forms.
- If you want each form to submit to a different destination (e.g., custom action URLs or form handlers like Zapier, Make, or Formspree):
- Disable Webflow form handling via Form Settings (delete the default Action field value).
- Enter a custom Action URL for each form (e.g.,
https://hooks.zapier.com/...).
5. Use Conditional Success Messages (Optional)
- Each form can have its own custom Success and Error messages.
- Customize the success block within each form wrapper so users get relevant feedback per form.
6. Test Each Form Independently
- Publish your Webflow site and test both forms to ensure:
- Each submits correctly.
- Success messages are distinct.
- Data ends up in the right storage (Webflow's dashboard or external service).
Summary
To place two different forms on the same Webflow site, simply add and customize two separate Form blocks. Assign unique form names or IDs if needed, edit fields individually, and configure their submission settings based on whether you're using Webflow's form system or third-party services.