# Lovable + n8n: a web form with an AI backend, step by step > A free one-page cheat sheet: a Lovable form posts to an n8n webhook, and an AI Agent logs it in Google Sheets and replies by Gmail. Source: https://learn.ynteractive.com/content/cheat-sheets/lovable-n8n-form-flow · Updated 2026-10-01 · Free from Stepthrough (https://learn.ynteractive.com) [Lesson cheat sheet](https://learn.ynteractive.com/content/cheat-sheets#kind-lesson) · One page · US letter · [Lovable](https://learn.ynteractive.com/content/tool/lovable) · [n8n](https://learn.ynteractive.com/content/tool/n8n) By [Robert Breen](https://learn.ynteractive.com/content/about) · Published October 1, 2026 · From the free lesson [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) A free one-page cheat sheet: a Lovable form posts to an n8n webhook, and an AI Agent logs it in Google Sheets and replies by Gmail. [Download the free PDF (82 KB)](https://learn.ynteractive.com/content/cheat-sheets/lovable-n8n-form-flow.pdf)Print this sheet Free, no sign-up and no email needed. It prints on one letter-size page; the whole sheet is below. *▶*StepthroughFree printable cheat sheet · learn.ynteractive.com Lovable + n8n: a web form with an AI backend, step by step Lovable builds the form, n8n does the thinking and the actions. The only link between them is one webhook URL, kept in a Lovable secret. ## The form in Lovable - **Start with a prompt**, paste the form prompt, click **Build**. - Fields Name, Email, Question and Feedback, sent as JSON with the keys name, email, question and feedback. - The prompt says: don't hard-code any webhook URL. Use the `N8N_WEBHOOK_URL` secret. ## The backend in n8n 1. **Add first step…**, **On webhook call**. Set **Respond** to **Using 'Respond to Webhook' Node**. 2. Add **AI Agent**. Set **Source** to **Define below** and paste a prompt template that reads the body, like `{{ $json.body.name }}`. 3. **+ Add Option**, **System Message**, paste the message below. 4. **Chat Model**: **OpenAI Chat Model**, model **gpt-5-mini**. 5. **Tool**: **Google Sheets Tool** on a **Leads** sheet with the same four columns, each set with **✦**. Then add **Gmail Tool**. 6. After the AI Agent, add **Respond to Webhook**. Nothing to configure. ## The system message Copy ```text You are a helpful assistant. Use the google sheets tool to add the lead to the google sheet. Use the gmail tool to reply to the form submitter. ``` The lesson's whole system message. Add your services and hours so replies sound like you. ## Go live: test URL vs production URL **Publish first** Click **Publish**. The production URL only works once the workflow is published. **Copy the right URL** Open **Webhook**, click the **Production URL** tab, click the URL to copy. The test URL only works during testing. **Store it** In Lovable, click **More**, add the secret `N8N_WEBHOOK_URL`, paste, **Save**. **Test it** **Preview**, **Fill with test data**, **Send Message**, then check the Leads sheet. **Remember:** Publish first, copy the Production URL second, and keep it in a Lovable secret, never in the page. Practice it free: [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/modules/lovable-n8n) at learn.ynteractive.com/modules/lovable-n8n. This sheet: learn.ynteractive.com/content/cheat-sheets/lovable-n8n-form-flow. Businesses in the lesson examples are made up. By Robert Breen, October 1, 2026. ## Practice it in the free lesson **Lovable + n8n: Build a Web App with an 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. You do every step yourself in a practice copy of Lovable and n8n, it checks your work as you go, and “Do it for me” finishes any step you get stuck on. Free, and nothing touches your real accounts. [Start the free lesson](https://learn.ynteractive.com/modules/lovable-n8n) [Or read the full step-by-step guide](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) ## Lessons on this sheet - [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. - [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… ## Related terms Plain-English definitions, each with an example from a free lesson. [Lovable](https://learn.ynteractive.com/content/glossary/lovable) · [Frontend and backend](https://learn.ynteractive.com/content/glossary/frontend-vs-backend) · [Webhook](https://learn.ynteractive.com/content/glossary/webhook) · [Request body (payload)](https://learn.ynteractive.com/content/glossary/request-body) · [AI Agent node](https://learn.ynteractive.com/content/glossary/ai-agent-node) · [Respond to Webhook node](https://learn.ynteractive.com/content/glossary/respond-to-webhook) · [Test URL vs production URL](https://learn.ynteractive.com/content/glossary/webhook-test-url-vs-production-url) · [Publishing a workflow](https://learn.ynteractive.com/content/glossary/publish-workflow) [The full AI glossary](https://learn.ynteractive.com/content/glossary) ## Related prompts - [Lovable web form prompt](https://learn.ynteractive.com/content/prompts/web-form-builder-prompt): Write a Lovable prompt for a web form that posts to n8n: fields, validation, button states, a thank-you message, and a webhook… - [AI agent system message prompt](https://learn.ynteractive.com/content/prompts/agent-system-message-draft-prompt): Draft the system message for an n8n AI Agent: who it is, what it knows, its rules and how it writes, including a rule never to… - [Email subject lines prompt](https://learn.ynteractive.com/content/prompts/email-subject-lines-prompt): Get ten honest subject lines for a finished email, each with preview text and a character count, grouped by approach so you can… - [Social post ideas prompt](https://learn.ynteractive.com/content/prompts/social-post-ideas-prompt): A four-part ChatGPT prompt for social post ideas built on your services and real customer questions: platform, hook and call to… [All free prompt templates](https://learn.ynteractive.com/content/prompts) ## More cheat sheets - [n8n AI Agent to Google Sheets Cheat Sheet](https://learn.ynteractive.com/content/cheat-sheets/n8n-ai-agent-google-sheets): A free one-page cheat sheet for an n8n AI agent: chat trigger, AI Agent, system message, OpenAI model, Simple Memory and a Google Sheets tool. - [AI Glossary Cheat Sheet: 30 Terms in Plain English](https://learn.ynteractive.com/content/cheat-sheets/ai-glossary-top-30): A free one-page cheat sheet of 30 AI and automation terms in plain English: models, prompts, n8n workflows, apps and data. - [n8n Basics Cheat Sheet: Triggers, Items, Webhooks](https://learn.ynteractive.com/content/cheat-sheets/n8n-basics): A free one-page cheat sheet of n8n basics: triggers, expressions, items, executions, the workflow timezone and webhook test vs production URLs. [All free cheat sheets](https://learn.ynteractive.com/content/cheat-sheets) · [All free tutorials](https://learn.ynteractive.com/content)