Hello, I have a simple form, and when it is submitted, I trigger a webhook and send data (POST request) to the automation platform n8n.io.
When one service triggers a webhook, it can also receive a response if the request is successful (webhook response). This webhook response can contain any data – I need to display those data on the page with the form.
Is this possible with Webflow?
Thanks for any ideas, direction or tips!
All the best!
H.
n8n is great, and the answer is yes - you can do that with custom code.
Sygnal Attributes has a basic handler for success/fail messages and some simple response information like success & error messages. I haven’t needed use cases much further than that, but it might make sense to support callbacks for handling extended data.
Hey, thank you! That looks promising.
Welcome @honzapav 
Yea, this is absolutely doable.
I don’t use n8n much, but here’s a screencast using Make (Integromat). It submits a form to that service (swap in n8n) via custom Javascript and then awaits the response.
This example triggers the default success/error message of a native Webflow form, but instead you’d want to take the returned JSON (from n8n) and simply display it via that Javascript snippet.
I do this a lot, and it’s fairly straightforward.
Hi, thanks for the tip! I am trying to implement both solutions, but in the case of your solution, I’m getting a CORS error.
Regarding the solution from @memetican – I am also unsuccessful. I am getting the result in a new window (the response from n8n is fine), but I can’t display it one the website. Am I missing something?
Here is my proof of concept: https://konfigurator-poc.webflow.io/
Thanks for any ideas!
I couldn’t see much without the readonly link, but glancing at the published link you shared- I don’t see your custom code for handling the webhook response.
Not sure what you’re doing there, or what you’re wanting to do with the response. If you need some programming assistance, you can PM me with your project readonly link and details of what you’re needing built, and I’ll send you an estimate based on what you need.
Remember the SA handler doesn’t have custom callback support yet, so you’ll use the Github source as a model to create your own response handler. Sygnal Attribute currently has a handler specific to the Webflow success/failure response messages only.
@memetican Thank you – I don’t want to waste your time, and I’ll consider asking for your services. But it’s not only up to me. 
Regarding my POC, I attempt to do only this:
I did this:
I followed these steps: Form Webhook Handler - Sygnal Attributes | Designed for Webflow
The live version is the latest. There are no custom scripts at the moment. The success/error messages are the default.
I understand that the library “only” accepts the status from n8n and then displays the success message – I cannot display any customized data coming from n8n without tweaking the code. Is that correct?
Thank you.
You’ll need to actually return a response from your webhook to correctly indicate success / fail of your automation.
If the status code is in the 200 range it’s a success, otherwise it’s an error.
In your webhook response JSON, you can include an item named message containing the plain text you want to display for a simple success/fail message.
The library will automatically display that in a text element inside of the form’s success fail blog, if you tag that text item with a custom attribute of wfu-form-message.
This will only work for plain text, as it’s only designed for simple responses.
Anything more complex than that, like a rich text response, line breaks, etc. etc. you’ll need to adapt it for what you want to achieve;
https://github.com/sygnaltech/webflow-util/blob/master/src/modules/webflow-form.js
If you followed the steps I’ve outlined you should never get a CORS issue. Something doesn’t sound right with your setup.
Without knowing more, I’d guess you are trying to call the Webflow API directly from your web browser via Javascript (that’s the most common issue).
Post more details if you want to continue down this path 
As far as I know, this problem is related to self-hosted n8n. It works with Make.com.
I use self-hosted n8n as well. Works great.
sorry, it’s confusing. This was related to the other solution by @ChrisDrit.
So are you all goods now? My solution should never be creating a CORS issue. Something doesn’t sound right on your end. A lot of confusion going on here
Hi, I am using this method with Integromat/ Make. However, for some reason, it shows the error message on successful submission instead of the success message.
Read-only link.
Hi @pkir , I designed SA5’s forms handler to use Make’s round-trip capabilities. If you do not include a Webhook response element, Make returns plain-text “Accepted” instead of valid JSON.
However the latest version of SA5’s Make handler will support either.
Update your version and it should work fine without a webhook response from Make.
Some Make-specific notes for you as well;
Hey @memetican,
Like @pkir, I’m also facing the same error.
My setup from Integromat/Make works great and I have a Webhook response setup with a 200 code and a text/plain custom header but I keep getting the error message in Webflow after successfully filling in the form. I have the sygnal js in the ‘Inside Head’ and tried in the ‘Before Body’ but got no success. I also tried the Key name as message in the Webhook response but no success.
I will also mention that I have some uploadcare upload file buttons included in the form but these do not impact the display of the Success/Error message as I had this issue prior to adding the buttons.
What am I missing here? Hope you can help!
Hi Ashley, I can’t access your readonly link.
In general you want to return JSON from your Webhook responses, which means a Key of Content-Type and a value of application/json. Then the Body should be a valid JSON string, like
{ "message": "Success." }
However the latest version of the library should handle plaintext responses when you have not configured a Make Webhook response.
I’ve added a video here as well to break down the Make scenario setup best practices.
Hey @memetican, thanks for your reply and explanation of the Webhook response, I now understand how it works after following your brilliant video explanation and have that all in there now.
I can also see that after filling in the form, the green ticks appear in the Make scenario
However I’m still getting the “Oops…” error message shown in Webflow. On reviewing the Inspector I see this error message 500, any ideas?
Are you using the current version?
That done the trick! Thanks so much for your help @memetican.
