Smart Form Webhook Handler ❺
Post form data direct to webhooks, while supporting Webflow's inline success / error messages
Currently supports HTTP POST to webhooks only. We may add HTTP GET support if users are in need of it.
Webflow has a nice form-builder capability with good styling options- however by default, the success and failure messages only work with Webflow's built-in form handler.
SA5 Forms allows you to integrate Webflow forms with other services, and process their responses as success / fail, including error message and results display.
Webflow forms can be redirected to a webhook for external processing, by specifying the
actionin Webflow’s designer. This gives you a lot of capability, including business logic and immediate processing of your form data, however Webflow does not have any in-built way to handle the webhook’s response.
By default, instead of a “success” message, the user sees the JSON response itself- which is not an ideal user experience. Alternatively, you’re forced to create a thank you page, exclude it from search engines, etc- when often all you wanted was a success message.
The WFU forms handler bridges that gap;
- 1.It submits your form directly to the webhook you choose.
- 2.It analyzes the response to determine success or failure.
- 3.It then displays the form success or failure message, depending on that result.
Because each webhook provider responds differently, we have several “handlers” for each situation;
- The Zapier handler looks for “success” in the response, and displays the success message if it is present. However it’s important to note that Zapier’s success response only indicates that the data was received successfully. It does not indicate that the Zap ran successfully.
- The Make ( Integromat ) handler can handle specific responses and display error messages, if you use the HTTP Response node in Make. If you have the request return immediately, you will simply get 'Accepted' from Make as the success text.
- The n8n handler can handle specific responses and display error messages.
- The Other handler always displays the success message. It’s most useful for unknown webhookd providers, and in situations where success/failure aren’t that important, you just need to indicate to the user that their work is done. Use it for simple and less essential form submissions, like newsletter enrollments.
Why use a custom webhook form handler rather than Webflow's?
- Immediate form processing, with no delays. If you’ve used e.g. Zapier’s Webflow trigger, it polls for new forms and can take 10 minutes for a form submission to be detected.
- No need to use Webflow’s built-in forms email notification system. You can go direct to a Sales Force Automation (SFA) system, or to your own email notification with no unsubscribe link problems.
- No form submission limits.
- Make the form behave like a normal webflow form post, where it stays on the same page, and displays the form’s success message.
- Handle error scenarios better, including unique server side logic and error messages ( with Make & n8n ).
Install this code in before HEAD, site-wide or on the specific pages you want the script to affect.
- Setup your webhook on Basin, Zapier, Make, n8n, or your form handler or automation provider of choice. Design it to accept HTTP POST requests.
- Copy the webhook URL and in the Webflow designer, paste it into the
Actionsetting of the form.
- Design the form however you like
- Set the form method to POST
- Make sure to customize your success and fail messages too.
In the designer, select the
Form Blockelement ( not the
Formelement ). On the
Form Blockelement, add a custom attribute of
wfu-form-handler, and specify the handler you want;
Each will behave slightly differently in how it processes the response, since each webhook service does responses differently. See notes above.