How to integrate Webhook Form with N8N
Last updated
Last updated
This guide shows you how to link Webstudio Forms with n8n for workflow automation. We will move data from Webstudio to n8n, save it in a Supabase table, and then ping a Slack channel when certain conditions are met.
n8n is a platform designed to automate workflows. It helps you set up a series of tasks that run automatically, connecting different apps and services in the process.
One of the key features of n8n is its visual editor, which allows you to build these automated workflows without having to write any code.
For our Webstudio integration, we will create a workflow that sends form submissions to Supabase and notifies a Slack channel if certain requirements are met.
Get started with n8n
Create the workflow trigger
Connect the webhook to your Webstudio Form
Integrate with External Applications (Supabase)
Add an IF Node
Add a Slack Node
Finalize your workflow
Start by logging in to your n8n account.
Inside your dashboard, go to Credentials > Add credential. For this demo, we will be using Supabase and Slack. You can find detailed instructions for all supported credential setups.
After setting up the relevant credentials, go to “Workflows” and create a new workflow to start building your automation.
To initiate our n8n workflow with a webhook, we need to configure a webhook trigger.
Add a Webhook node to your workflow by going to Add first step > Select a trigger > On webhook call
Set HTTP Method to POST.
Copy the “Test Webhook URL” and head over to Webstudio.
You can learn more about the Webhook node and its parameters.
Open the Webstudio builder, select your form instance, go to Settings and add two properties— Action and Method.
Paste your copied Test Webhook into the Action property.
Write the word “POST" in the Method property.
Name every input field in your form so n8n can identify them in a form submission.
Head back to n8n and click on “Listen for test event”. It is important to submit your form on the published site to trigger the test submission.
Open the published version of your website and submit the updated form.
Back in n8n, you will now see the submitted form data in the Output Section.
Next, let’s add an external application to our workflow. To demonstrate this step, we will be adding form records to Supabase.
Go to Add Node > Action in an app > Supabase > Create a row.
Select the Supabase account you have linked to n8n and modify the other relevant parameters.
Link your form’s input fields to your Supabase table by mapping them to your Webhook’s Output Data.
You can learn more about the Supabase node and its parameters.
IF and other flow nodes are used to trigger automations when specified conditions are met.
For this example, we will create a condition to send a Slack channel message only if the value of a lead is over $10,000.
Go to Add Node > Flow > IF.
Add a condition that sets your IF node to “true” if the value from your input is $10,000 or under.
Click on “Execute Node” This will return a true/false result.
a. On “true”, the value is under $10,000.
b. On “false”, the value is over $10,000.
You can learn more about the IF node and its parameters.
Finally, let’s add a Slack node to our workflow. We will configure this node to send a message to the Sales channel in Slack.
On your n8n canvas, click the “+” sign next to the IF node’s “false” branch.
Go to Action in an app > Slack > Send a message.
Select your target Slack account
Set “Message Type” to “Simple Text Message” from the dropdown.
Map the relevant data from the “Input” Section to your Slack message in the “Message Text” parameter.
You can learn more about the Slack node and its parameters.
After setting up your workflow, you should test it to ensure it runs properly.
Execute the n8n workflow.
Create a new submission on your published Webstudio site.
If the workflow runs without any errors, all nodes will have a green border.
After the checks are concluded, activate your workflow.
Replace the “Test Webhook URL” with the “Production Webhook URL” in your Form’s Action property.
Go to the upper left of your n8n canvas and activate your workflow by toggling it from “Inactive” to “Active”.
