# Webhooks and Forms in n8n: Capture Data from Anywhere

> Learn the n8n Form Trigger and Webhook node: build a form, test it, catch a website's POST request, save both to Google Sheets and publish. Free.

Source: https://learn.ynteractive.com/content/n8n-webhook-and-form-trigger-tutorial · Updated 2026-10-14 · Free from Stepthrough (https://learn.ynteractive.com)

## Practice it step by step

[Start the free practice](https://learn.ynteractive.com/modules/n8n-webhooks-forms)

[Take the full module: why it matters, practice and a quick check →](https://learn.ynteractive.com/courses/n8n-jump-start/9)

You do every step yourself in a practice copy of n8n. It checks your work as you go, and “Do it for me” finishes any step you get stuck on. Free, about 12 minutes, and nothing touches your real accounts. [Open full screen](https://learn.ynteractive.com/modules/n8n-webhooks-forms)

Free · Live now · [n8n Automation Toolkit](https://learn.ynteractive.com/content/course/n8n-automation-toolkit) · [n8n](https://learn.ynteractive.com/content/tool/n8n) · Google Sheets · ~12 min · 51 steps · Advanced

Updated October 14, 2026. Built against the tool’s current screens and checked step by step. [How we check this lesson](https://learn.ynteractive.com/content/about#how-we-check)

Most [automations](https://learn.ynteractive.com/content/glossary/automation) start with data arriving from somewhere. In [n8n](https://learn.ynteractive.com/content/tool/n8n), two triggers cover most of it. The n8n Form Trigger gives you a form n8n hosts for you, and the [Webhook](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) node gives you a web address any other app can send data to. In this free n8n [webhook](https://learn.ynteractive.com/content/glossary/webhook) and form trigger tutorial you build both in one workflow, test each with its [Test URL](https://learn.ynteractive.com/content/glossary/webhook-test-url-vs-production-url), save every entry to Google Sheets and publish so the Production URLs run on their own.

## At a glance

| Question | Answer |
| --- | --- |
| What you build | Stop losing quote requests between inboxes. Build a form n8n hosts for you, catch entries from your own website with a webhook, and save every request to one Google Sheet. |
| Tools | n8n |
| Time | About 12 minutes, 51 steps in 6 parts |
| Level | Advanced |
| Cost | Free |
| Ways to learn it | [Practice it step by step](https://learn.ynteractive.com/modules/n8n-webhooks-forms) |

### The 6 parts, in short

1. Build the form: Add the first step, On form submission, Give it a title, Add a question, and 5 more steps.
2. Test the form: Execute step, Fill in the test form, Add an email, Submit, and 2 more steps.
3. Save to Google Sheets: Add the next step, Search for Google Sheets, Google Sheets, Append row in sheet, and 8 more steps.
4. Add a webhook: Open the nodes panel, Add another trigger, On webhook call, HTTP Method, and 2 more steps.
5. Test the webhook: Listen for test event, Copy the Test URL, Go to the website editor, Paste the Test URL, and 3 more steps.
6. Save website entries too: Add the next step, Search for Google Sheets, Google Sheets, Append row in sheet, and 7 more steps.

**Start here first:** [Find and Use n8n Templates](https://learn.ynteractive.com/content/find-and-use-n8n-templates) (module 1 of n8n Automation Toolkit)

**In the course:** [Part 9 · n8n Automation Toolkit](https://learn.ynteractive.com/content/course/part-9-n8n-automation-toolkit) (Module 55 of the [full course](https://learn.ynteractive.com/content/course))

**Part of:** [Webhooks & Website Forms](https://learn.ynteractive.com/content/paths/webhooks-website-forms) (step 4 of 7). Next up: [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend)

**Part of:** [n8n Jump Start](https://learn.ynteractive.com/content/paths/n8n-jump-start) (step 6 of 14). Next up: [n8n: Turn Meeting Notes into Action Items in a Google Sheet](https://learn.ynteractive.com/content/meeting-notes-to-action-items-google-sheets-ai-n8n)

## What you will build

You will build one workflow for Riverbend Landscaping, a small landscaping business that gets quote requests in two places. The first is a Request a free quote form that n8n builds and hosts, with a Name field and an Email field. The second is the contact form on the business's own website, which sends each entry to an n8n webhook.

Both paths end in the same Google Sheet, Riverbend Quote Requests, where each request becomes a new row. Once you publish it, it keeps running when you close the editor.

## Who this n8n webhook tutorial is for

This module is for small business owners, office managers and anyone who has heard that n8n can "catch data from anywhere" but never quite understood webhooks. You do not need to code or have an n8n account to practice. The lesson starts from an empty workflow and explains each screen as you go.

## Test URL vs Production URL, explained

Every n8n webhook and form has two addresses. The Test URL has webhook-test or form-test in it, and it only works while you are listening in the editor: after you click Listen for test event on a webhook, or Execute step on a form trigger. Test runs show up right inside the editor.

The Production URL has plain webhook or form in it, and it only works once the workflow is published. Those runs do not appear in the editor; you find them in the executions list. The most common beginner mistake is putting the Test URL into a website, then closing n8n.

## Why a webhook's data sits inside body

A form trigger hands n8n fields named after your labels, so Name and Email drag straight onto your sheet. A webhook receives a whole HTTP request instead: headers, params, query and body. The fields a website sends live inside body, which is why the copied sheet step is remapped to body name and body email, and why the HTTP Method is POST: forms send their data in the body of a POST request.

## How to use this in your business

Use the n8n form when you want a quick intake, booking or feedback form without paying for a separate form tool: share its Production URL in an email or behind a button. Use a webhook when the data already lives somewhere else. Many website builders, form tools, payment systems and CRMs can send each new entry to a webhook URL, and n8n can then save it, send an alert or start a follow-up. With both triggers in one workflow, every request ends up in one place.

## How the interactive lesson works

Every step is shown first on the left, in the Watch panel, with a short voice-over. Then you do it yourself on the right, in Your turn, on a practice copy of n8n, the test form and a simple website editor. Each click is checked, so you know right away if you picked the right button. If you get stuck, press Do it for me and the step is done for you. Nothing goes online, so you can make mistakes freely, then build it for real.

## Try it yourself, free

Reading the steps is a start. Doing them is how it sticks. The interactive module walks you through every click in a practice copy of n8n, checks each step, and never touches your real accounts.

[Start “Webhooks and Forms in n8n: Capture Data from Anywhere”](https://learn.ynteractive.com/modules/n8n-webhooks-forms)

## Step by step: Webhooks and Forms in n8n: Capture Data from Anywhere

All 51 steps of the interactive module, in order. In the module you watch each one, then do it yourself in a practice copy that checks your work.

### 1. Build the form

1. **Add the first step.** This is a new, empty workflow. Click **Add first step…**
   Riverbend Landscaping wants every quote request in one Google Sheet, whether it comes from a form or from their website. In a new workflow, click Add first step.
2. **On form submission.** In **What triggers this workflow?**, pick **On form submission**.
   Pick On form submission. n8n builds and hosts the form for you, so you need no other form tool.
3. **Give it a title.** The **Form Title** is required and shows as the heading of the form. Type **Request a free quote**.
   The form needs a title. It becomes the heading people see.
4. **Add a question.** Each question on the form is a form element. Click **Add Form Element**.
   Now the questions. Every question is a form element.
5. **Label it.** New elements start as a **Text Input**, which suits a name. In **Label**, type **Name**.
   New elements start as a Text Input, which is right for a name. In Label, type Name.
6. **Add another.** Add a second element for the email address: click **Add Form Element** again.
   Add a second element, for the email address.
7. **Label it Email.** In the new element's **Label**, type **Email**.
   Label this one Email.
8. **Element Type.** Open its **Element Type** drop-down.
9. **Choose Email.** Choose **Email**.
   The form will then check that people type a real email address before they can submit.

### 2. Test the form

10. **Execute step.** At the top, **Form URLs** shows the **Test URL** and the **Production URL**. Test first: on the left, click **Execute step**.
    At the top are two addresses. The Test URL is for trying things out. The Production URL is the one you share, once the workflow is published. On the left, click Execute step.
11. **Fill in the test form.** The test form opened in a new tab. Fill it in like a customer: type **Dana Whitfield** as the name.
    The test form opened in a new tab. Fill it in like a customer would.
12. **Add an email.** Type an email, for example **dana.whitfield@example.com**.
    And an email address.
13. **Submit.** Click **Submit**.
14. **Back to n8n.** The form says **Form Submitted**. Switch back to the **n8n** tab.
    Form Submitted. Switch back to the n8n tab.
15. **Look at the output.** The **OUTPUT** shows one item: **Name**, **Email**, **submittedAt** and **formMode**. Close the node with the **×**.
    There's the submission: the name, the email, and when it came in. Close this window.

### 3. Save to Google Sheets

16. **Add the next step.** Click the **+** on the right of **On form submission**.
    Now save each submission to a sheet.
17. **Search for Google Sheets.** In **Search nodes...**, type **sheets**.
    Search for sheets.
18. **Google Sheets.** Click **Google Sheets**.
19. **Append row in sheet.** Under **Sheet Within Document Actions**, click **Append row in sheet**.
    It adds a new row for every submission.
20. **Choose the spreadsheet.** If you connected Google Sheets before, **Google Sheets account** is already picked (if not, create the credential and sign in with Google). Open the **Document** list.
    Your Google Sheets account is already picked, if you connected it before. If not, create it here and sign in with Google.
21. **Pick the sheet.** Pick **Riverbend Quote Requests**.
    Pick Riverbend Quote Requests. It has a Name column and an Email column.
22. **Choose the tab.** Open the **Sheet** list.
23. **Sheet1.** Choose **Sheet1**.
    n8n reads its columns and lists them under Values to Send.
24. **Map the name.** Drag **Name** from the **INPUT** on the left onto the **Name** field under **Values to Send**. (Here, click it.)
    Now map the answers.
25. **Map the email.** Drag **Email** onto the **Email** field.
26. **Test the step.** Click **Execute step**.
    n8n adds Dana's answers as a new row in the sheet.
27. **Close the node.** The row went in. Close the node with the **×**.
    The row is in. The form is done. Close this window.

### 4. Add a webhook

28. **Open the nodes panel.** Riverbend's website has its own contact form. Click the **+** at the top right of the canvas.
    Now the website. Riverbend's site has its own contact form, and it can send each entry to n8n through a webhook.
29. **Add another trigger.** A workflow can have more than one trigger. At the bottom, click **Add another trigger**.
30. **On webhook call.** Choose **On webhook call**.
31. **HTTP Method.** A webhook is a web address that waits for data. Open **HTTP Method**.
    A webhook is a web address that waits for data to arrive. First, open HTTP Method.
32. **POST.** Choose **POST**.
    That's how website forms send their data. GET is mostly for asking for data.
33. **Path.** The **Path** is the end of the address, and n8n started it with a random ID. Replace it with **quote-request**.
    The Path is the end of the address. n8n started it with a random ID. Replace it with quote-request, so you can recognize it later.

### 5. Test the webhook

34. **Listen for test event.** Under **Webhook URLs**, the **Test URL** has **webhook-test** in it; the **Production URL** just **webhook**. Click **Listen for test event**.
    Look at the Webhook URLs. The Test URL has webhook-test in it. The Production URL just says webhook.
35. **Copy the Test URL.** n8n is waiting for one POST request to the Test URL. Click the URL to copy it.
    n8n is now waiting for one request to the Test URL.
36. **Go to the website editor.** Switch to the **Riverbend website** tab.
    Switch to the tab with Riverbend's website editor.
37. **Paste the Test URL.** The contact form can send each entry to a webhook. Paste the **Test URL** into **Webhook URL**.
    This contact form can send each entry to a webhook.
38. **Send a test.** Click **Send test submission**.
    The website posts a sample entry to n8n.
39. **Back to n8n.** n8n answered **Workflow was started**. Switch back to the **n8n** tab.
    The website got a reply: Workflow was started. Now go back to the n8n tab.
40. **Look at the request.** The **OUTPUT** shows the request. The form fields are inside **body**: name, email and message. Close the node.
    Here's the request. The website's fields are inside body: name, email and message. Close this window.

### 6. Save website entries too

41. **Add the next step.** Website entries should land in the same sheet. Click the **+** on the right of **Webhook**.
    Website entries should land in the same sheet.
42. **Search for Google Sheets.** In **Search nodes...**, type **sheets**.
    Search for sheets again.
43. **Google Sheets.** Click **Google Sheets**.
44. **Append row in sheet.** Click **Append row in sheet**. n8n names this one **Append row in sheet1** and connects it to the Webhook.
    n8n calls this one Append row in sheet 1, and it is already connected to the Webhook.
45. **Choose the spreadsheet.** Open the **Document** list.
    Same sheet as before.
46. **Pick the sheet.** Pick **Riverbend Quote Requests**.
47. **Choose the tab.** Open the **Sheet** list.
48. **Sheet1.** Choose **Sheet1**. **Name** and **Email** appear under **Values to Send**.
    Name and Email appear under Values to Send.
49. **Map name.** On the left, the website's fields are inside **body**. Drag **name** onto **Name**.
    On the left, the website's data is inside body.
50. **Map email.** Drag **email** onto **Email**.
51. **Close the node.** Close the node with the **×**.
    Close this window.

## Frequently asked questions

**What is a webhook in n8n?**

A webhook is a web address that waits for data. When another app sends a request to it, the Webhook node starts your workflow with that request, including anything the app sent in the body.

**What is the difference between the n8n Form Trigger and the Webhook node?**

The Form Trigger builds and hosts a form page for you and passes each submission to the workflow. The Webhook node has no page; it gives other apps an address to send data to, such as your website's own contact form.

**Why does my n8n webhook stop working when I close the editor?**

You are probably using the Test URL, which only works while n8n is listening for a test event. Publish the workflow and use the Production URL instead.

**Is this course really free?**

Yes. Stepthrough is completely free, and the practice copy needs no accounts. To build it for real you need your own n8n and Google accounts, and some of those cost money once you use them for real work.

[Start this module free](https://learn.ynteractive.com/modules/n8n-webhooks-forms)

- Previous in n8n Automation Toolkit: [n8n: Execute Step, Execute Workflow and Publish](https://learn.ynteractive.com/content/n8n-execute-step-execute-workflow-publish)
- Next in n8n Automation Toolkit: [IF and Switch in n8n: Route Work by Rules](https://learn.ynteractive.com/content/n8n-if-and-switch-node-tutorial)

## More in n8n Automation Toolkit

- [Find and Use n8n Templates](https://learn.ynteractive.com/content/find-and-use-n8n-templates): Skip the blank canvas. Find a ready-made workflow in the n8n template gallery, import it into your workspace, connect Google Sheets and Gmail, test it with a real form…
- [Litescrape in n8n: Swap SerpApi for a Cheaper Search API](https://learn.ynteractive.com/content/litescrape-n8n-serpapi-alternative): Switch a weekly n8n competitor-price workflow from SerpApi to Litescrape's Google Shopping API: change the HTTP Request URL, move the key into a Bearer Auth credential…
- [n8n: Talk to Your Google Sheets with ChatGPT, from Zero (Free Credits or API Key, Google, Sheet, Chat)](https://learn.ynteractive.com/content/n8n-talk-to-google-sheets-chatgpt-ai-agent): Start from nothing: copy n8n template 7639, use n8n's free credits (or your own OpenAI API key), connect Google, make your own sheet, then ask it questions in plain…
- [Get Your Daily Revenue Total by Email, Automatically, using n8n](https://learn.ynteractive.com/content/n8n-schedule-trigger-google-sheets-daily-report): Stop spending 20 minutes every evening adding up the day by hand. In n8n, a Schedule Trigger runs at 5pm, Google Sheets pulls today's jobs, Summarize totals the revenue…
- [n8n AI Agent with Tools: Check Google Calendar, Book It and Log It](https://learn.ynteractive.com/content/n8n-ai-agent-tools-google-calendar-booking): Stop playing phone tag over appointments. Give an n8n chat agent three tools: check Google Calendar for a free hour, book it, and log the booking in Google Sheets.
- [Get Alerted When an n8n Automation Fails, and Let It Retry by Itself](https://learn.ynteractive.com/content/n8n-error-handling-retry-on-fail-error-workflow): A silent failure means a stale price sheet and wrong quotes. In n8n, build an error workflow that emails you, make a flaky step retry by itself, send its failures down…

[All 11 modules in n8n Automation Toolkit](https://learn.ynteractive.com/content/course/n8n-automation-toolkit)

## More n8n tutorials

- [n8n AI Agent Tutorial: Save Social Media Ideas to Google Sheets](https://learn.ynteractive.com/content/n8n-ai-agent-tutorial-google-sheets): Build an AI agent for BrightPath Marketing that generates social media post ideas and saves them to Google Sheets — chat trigger, AI Agent, system prompt, model…
- [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend): Build a contact form in Lovable and connect it to an n8n workflow — webhook trigger, AI Agent, Google Sheets, Gmail, and a Respond node that ties it all together.
- [AI Receipt Extractor: Receipts to Google Sheets with n8n](https://learn.ynteractive.com/content/ai-receipt-extractor-n8n-google-sheets): Drop a photo of a receipt into an n8n chat. An AI agent reads it, pulls out the date, vendor and amount, picks a category, and adds a row to Google Sheets.
- [n8n AI Email Responder: Draft Gmail Replies Automatically](https://learn.ynteractive.com/content/ai-email-responder-gmail-drafts-n8n): Build an n8n agent that watches your Gmail, reads each new customer email, and writes a reply as a draft in the same thread, ready for you to check and send.
- [Daily Job Alerts: Email Each Tech Their Jobs from Google Sheets with n8n](https://learn.ynteractive.com/content/n8n-daily-job-alerts-google-sheets-gmail): Every morning at 7, n8n reads a plumbing company's jobs sheet, skips anything not assigned yet, and emails each job to the tech it's assigned to — customer, address…
- [Gmail AI Triage: Auto-Label Every Email and Draft Replies](https://learn.ynteractive.com/content/gmail-ai-triage-labels-drafts-n8n): Build an n8n workflow that reads each new email, sorts it as a lead, a client or an invoice with a Text Classifier, adds the matching Gmail label, and drafts a reply to…

## Terms in this lesson

Plain-English definitions, each with an example from a free lesson.

[Automation](https://learn.ynteractive.com/content/glossary/automation) · [Webhook](https://learn.ynteractive.com/content/glossary/webhook) · [Test URL vs production URL](https://learn.ynteractive.com/content/glossary/webhook-test-url-vs-production-url) · [Web form](https://learn.ynteractive.com/content/glossary/web-form) · [Execute step](https://learn.ynteractive.com/content/glossary/execute-step) · [Append row](https://learn.ynteractive.com/content/glossary/append-row)

[The full AI glossary](https://learn.ynteractive.com/content/glossary)

## Browse related tutorials

[n8n Automation Toolkit (11)](https://learn.ynteractive.com/content/course/n8n-automation-toolkit) · [n8n tutorials (40)](https://learn.ynteractive.com/content/tool/n8n)