How can I add a specific webhook for each form in Webflow to connect to different scenarios in Integromat/Zapier? Thank you for your help, I haven't been able to find a solution on the forums.
TL;DR
- Create a webhook URL in Integromat/Zapier for each form by setting up a new scenario or zap and adding a Webhook trigger.
- In Webflow, create a custom form using an HTML Embed to include the webhook URL as the form's action attribute with the POST method.
- Replicate form fields in HTML, complete with a submit button, and test each form to ensure correct data routing to the intended scenario/zap.
To set up webhooks for individual forms in Webflow that connect to different scenarios in Integromat or Zapier, follow these steps.
1. Create a Webhook URL in Integromat/Zapier
- Log into your Integromat or Zapier account.
- Create a new scenario or zap that you wish to connect with the Webflow form.
- Add a Webhook trigger to your scenario/zap to generate a unique webhook URL for each form.
2. Access Webflow Project Settings
- Go to your Webflow project that contains the form(s) you wish to set up webhooks for.
- Navigate to the Project Settings.
3. Develop a Custom Form with an HTML Embed
- Open the Designer mode in Webflow.
- Select your form and remove the existing submit button to avoid conflicts.
- Use an HTML Embed element to include a custom form setup that aligns with your webhook requirements.
4. Edit Form Action Attribute
- Within the HTML Embed, ensure the
actionattribute of the form points to the specific webhook URL from Integromat/Zapier. - Example:
<form action="https://webhook.integromat.com/unique-url" method="POST">. - Ensure the method is set to "POST" to properly send form submissions to the webhook.
5. Add Form Fields to the HTML Embed
- Replicate the form fields in HTML to match the inputs you need to capture.
- Example:
<input type="text" name="fieldName" required>. - Include a Submit Button in your form, such as
<button type="submit">Submit</button>.
6. Test the Setup
- Publish your site to apply changes.
- Submit a test entry through each form to verify that data is correctly sent to the distinct scenario/zap linked by the webhook URL.
Summary
By creating unique webhook URLs for each form and embedding a custom form with the specified webhook URL as the action in Webflow, you can direct each form submission to a distinct scenario in Integromat or Zapier. This approach bypasses Webflow's default form submission handling and leverages custom action URLs.
