Why this matters
A workflow is only useful when information can get into it. Customers fill in a quote request, a website sends a message, and somebody has to copy it into a sheet.
n8n has two doors for this. A form trigger builds and hosts a simple form for you. A webhook is a web address that waits for data from another app, such as your website.
In this module you help Riverbend Landscaping. You build a "Request a free quote" form, save each answer to Google Sheets, then add a webhook so the website’s contact form lands in the same sheet.
What you’ll build
One workflow with two triggers, a form and a webhook, that both add a row to a Google Sheet called Riverbend Quote Requests.
You test each one on its Test URL, see where the fields arrive, and know which address to share once the workflow is published.
What you need
- Nothing to start the practicen8n, the website editor and the sheet are practice copies. Riverbend Landscaping and its customers are made up.
- An n8n account, to do it for realSign up with this link (affiliate link: I may earn a commission, at no cost to you).
- A Google Sheet for the answersMake one called Riverbend Quote Requests with Name and Email in row 1, and keep the tab named Sheet1. The lesson shows the sheet before you connect it. Connect Google in n8n by choosing Sign in with Google.
- Something that can send data to a web address (for the webhook)A website form or form tool with a "send to URL" or webhook setting. You paste the Production URL from the n8n Webhook node into it.
Concepts
3 ideas you’ll use in the practice.
A form trigger builds the form for you
Pick On form submission. Give the form a title, then click Add Form Element for each question. The first is a Text Input labelled Name. For the second, choose Email, and n8n checks that people type a real address.
You need no other form tool. n8n hosts the form at its own address.
Test URL for trying, Production URL for sharing
Both the form and the webhook show two addresses. The Test URL (form-test or webhook-test) only works while you click Execute step or Listen for test event in the editor. The Production URL (form or webhook) only works once the workflow is published.
Test first. After a test, the Output shows Name, Email, submittedAt and formMode for a form. For a webhook, the fields sit inside body.
A webhook waits for data to arrive
Click Add another trigger and choose Webhook. Set the HTTP Method, then click Listen for test event and copy the Test URL. The website posts a sample entry, and n8n answers Workflow was started.
Add a second Append row in sheet after the Webhook, and map name and email from body into the same columns. Both doors now fill one sheet.
Practice
Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.
Do it for real
Now repeat it in your own account. Tick each step as you go.
Quick check
3 questions to check you’ve got it.
1. What is the difference between the Test URL and the Production URL?
- The Test URL works only while you test in the editor, and the Production URL works once the workflow is published
- They are the same
- The Production URL is only for developers
Show the answer
The Test URL works only while you test in the editor, and the Production URL works once the workflow is published. Test while building. Share the Production URL after you publish.
2. Where do the fields of a webhook entry appear in the Output?
- Inside body
- Nowhere
- In the workflow name
Show the answer
Inside body. The webhook output shows the whole request, with the fields inside body.
3. What does a webhook do in this workflow?
- It designs the form
- It is a web address that waits for data from another app and starts the workflow
- It sends the email
Show the answer
It is a web address that waits for data from another app and starts the workflow. Your website posts the entry to the webhook, and n8n starts running.