# Lovable + n8n: Build a Web App with an AI Backend > Build a contact form in Lovable and connect it to an n8n webhook, AI agent, Google Sheets and Gmail. A free, interactive, no-code step by step tutorial. Source: https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend · Updated 2026-10-27 · Free from Stepthrough (https://learn.ynteractive.com) ## Practice it step by step [Start the free practice](https://learn.ynteractive.com/modules/lovable-n8n) [Take the free module: why it matters, practice and a quick check →](https://learn.ynteractive.com/courses/intro-to-ai-automation/8) 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, about 15 minutes, and nothing touches your real accounts. [Open full screen](https://learn.ynteractive.com/modules/lovable-n8n) Free · Live now · [AI Automation for Beginners](https://learn.ynteractive.com/content/course/ai-automation-for-beginners) · [Lovable](https://learn.ynteractive.com/content/tool/lovable) · [n8n](https://learn.ynteractive.com/content/tool/n8n) · OpenAI · Google Sheets · Gmail · ~15 min · 93 steps · Advanced Updated October 27, 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) This is where the pieces come together. In this free [Lovable](https://learn.ynteractive.com/content/tool/lovable) and [n8n](https://learn.ynteractive.com/content/tool/n8n) tutorial you build a real [contact form](https://learn.ynteractive.com/content/glossary/web-form) without writing code, then connect it to an [n8n workflow](https://learn.ynteractive.com/content/glossary/workflow) where an [AI agent](https://learn.ynteractive.com/content/glossary/ai-agent) saves each lead to Google Sheets and sends a personal reply through Gmail. ## At a glance | Question | Answer | | --- | --- | | What you build | 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. | | Tools | Lovable and n8n | | Time | About 15 minutes, 93 steps in 15 parts | | Level | Advanced | | Cost | Free | | Ways to learn it | [Practice it step by step](https://learn.ynteractive.com/modules/lovable-n8n), watch the video | ### The 15 parts, in short 1. Sign up: Get started with Lovable. 2. Build the form: Click the prompt box, Describe the form, Open the mode picker, Keep Build mode, and 1 more step. 3. New workflow: Start a new workflow. 4. Webhook trigger: Add the first step, Webhook trigger, Change the response mode, Use a Respond node, and 1 more step. 5. AI Agent: Add the next node, Add the AI Agent, Change the prompt source, Define it manually, and 5 more steps. 6. Chat model: Give the agent a brain, Pick OpenAI, Open the credentials, Create a new credential, and 5 more steps. 7. Sheets tool: Add a tool, Add Google Sheets. 8. Create the spreadsheet: Back to the canvas, Open Google Sheets, Name the spreadsheet, Type the first column header, and 5 more steps. 9. Sheets tool: Add a credential, Create a new credential, Sign in with Google, Choose your account, and 13 more steps. 10. Gmail tool: Add another tool, Add Gmail, Add a credential, Create a new credential, and 10 more steps. 11. Respond node: Add the respond node, Respond to Webhook, Back to the canvas. 12. Publish: Publish the workflow. 13. Add the secret: Open the webhook, Production URL, Copy the URL, Back to the canvas, and 7 more steps. 14. Test the form: Open the form, Fill the form, Submit the form. 15. Publish the app: Open Publish, Publish, Check the spreadsheet. **Start here first:** [n8n AI Agent Tutorial: Save Social Media Ideas to Google Sheets](https://learn.ynteractive.com/content/n8n-ai-agent-tutorial-google-sheets) (module 1 of AI Automation for Beginners) **In the course:** [Part 1 · Intro to AI Automation](https://learn.ynteractive.com/content/course/part-1-ai-automation-for-beginners) (Module 4 of the [full course](https://learn.ynteractive.com/content/course)) **Part of:** [Intro to AI Automation](https://learn.ynteractive.com/content/paths/intro-to-ai-automation) (step 3 of 4). Next up: [AI Workflow Automation for Beginners: Sort Every Client Inquiry and Draft the Reply using n8n](https://learn.ynteractive.com/content/ai-workflow-automation-for-beginners) **Part of:** [AI for Sales Teams](https://learn.ynteractive.com/content/paths/ai-for-sales) (step 18 of 26). Next up: [n8n + ProLevelMax: Weekly Review Themes From Trustpilot to Google Sheets](https://learn.ynteractive.com/content/n8n-prolevelmax-trustpilot-review-themes-google-sheets) **Part of:** [Webhooks & Website Forms](https://learn.ynteractive.com/content/paths/webhooks-website-forms) (step 6 of 8). Next up: [Collect Job Applications in Google Sheets with an n8n Form and a Careers-Page Webhook](https://learn.ynteractive.com/content/n8n-job-application-form-webhook-google-sheets) **Part of:** [Lovable Jump Start](https://learn.ynteractive.com/content/paths/lovable-jump-start) (step 6 of 6) ## Lovable + n8n: Build a Web App with an AI Backend: video walkthrough The whole lesson in 9:03, narrated step by step. **Simulated practice environment.** Recorded in Stepthrough’s simulated practice environment, not the live tool. Practice it yourself free at learn.ynteractive.com. 9:03 · 15 chapters · 93 steps · narrated with the lesson’s own voice-over · [Watch on YouTube](https://www.youtube.com/watch?v=9ju-ONvwaJ8) ### Chapters Click a chapter to jump the video there. 1. [0:00 Intro: what you'll build](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=0#watch) 2. [0:13 Sign up](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=13#watch) 3. [0:27 Build the form](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=27#watch) 4. [1:02 New workflow](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=62#watch) 5. [1:13 Webhook trigger](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=73#watch) 6. [1:58 AI Agent](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=118#watch) 7. [3:15 Chat model](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=195#watch) 8. [3:54 Sheets tool](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=234#watch) 9. [4:09 Create the spreadsheet](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=249#watch) 10. [4:48 Sheets tool](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=288#watch) 11. [5:55 Gmail tool](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=355#watch) 12. [6:48 Respond node](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=408#watch) 13. [7:12 Publish](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=432#watch) 14. [7:24 Add the secret](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=444#watch) 15. [8:24 Test the form](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=504#watch) ### Now do it yourself, free Watching is the warm-up. The interactive lesson puts you in a practice copy of Lovable and n8n: you do every step yourself, it checks your work, and “Do it for me” finishes any step you get stuck on. Nothing touches your real accounts. [Practice “Lovable + n8n: Build a Web App with an AI Backend” step by step](https://learn.ynteractive.com/modules/lovable-n8n?after=video) ### Full transcript #### Intro: what you'll build [0:00](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=0#watch) This is where it all comes together. You'll build a contact form in Lovable, then you'll send it to n8n with a webhook, and let an AI agent save the lead and write a personal reply through Gmail. Let's build it. #### Sign up [0:12](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=12#watch) In the first module you built a Custom GPT. In the second, you built an AI agent inside n8n. Now you are going to combine a real web app with an AI-powered backend. Lovable is a tool that builds web apps from a text description. Click get started for free. #### Build the form [0:27](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=27#watch) This is your Lovable dashboard. Every project you build shows up here. Click start with a prompt to create a new one. [0:34](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=34#watch) This is the prompt that tells Lovable what to build. It describes a clean contact form with Name, Email, Question, and Feedback fields, and tells it to send form submissions to an n8n webhook URL pulled from a secret config — not hardcoded. Click paste prompt. [0:49](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=49#watch) Click build. Lovable reads your prompt, generates the code, and deploys a live web app. In a few seconds you have a working contact form. Now we need to build the AI workflow that handles what happens when someone submits it. #### New workflow [1:01](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=61#watch) Now you are in n8n. This is the workflow automation tool you used in the last module. This time, instead of a chat trigger, we are going to use a webhook — so the form can send data directly to n8n. Click create workflow. #### Webhook trigger [1:13](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=73#watch) Every workflow starts with a trigger. Last time we used a chat trigger. This time we want a webhook — an HTTP endpoint the form can POST to. Click add first step. [1:23](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=83#watch) On webhook call. A webhook is just a URL that waits for incoming data. When someone submits the Lovable form, it sends the name, email, question, and feedback as JSON to this webhook. [1:33](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=93#watch) One important setting. By default, the webhook responds immediately, before the AI agent even runs. We need it to wait until the agent is done, so the form knows the submission succeeded. Click the respond dropdown. [1:44](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=104#watch) Using respond to webhook node. This tells n8n: do not send a response yet. Wait until you hit a dedicated respond node further down the chain. That way the form gets a real confirmation after the AI agent has processed everything. [1:55](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=115#watch) That is the webhook set up. Close the node. #### AI Agent [1:58](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=118#watch) Now we decide what happens when the form data arrives. Click the plus on the right edge of the webhook. [2:04](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=124#watch) AI Agent. Same node as last time, but now it handles form submissions instead of chat messages. It will read the form data, save it to Google Sheets, and send a personalized reply via Gmail. [2:14](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=134#watch) This time the prompt does not come from a chat trigger — it comes from the webhook. We need to change the source so we can write our own prompt template. Click the source dropdown. [2:24](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=144#watch) Define below. This lets us write a prompt that pulls the form fields directly from the webhook data. [2:29](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=149#watch) Here is the prompt template. It uses n8n expressions — those double curly braces — to pull the name, email, question, and feedback from the webhook body. Each time the form is submitted, the agent gets a prompt with the real data. Click paste prompt template. [2:43](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=163#watch) Now we need a system message — the standing instruction that tells the agent what to do with every submission. Click add option. [2:50](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=170#watch) System message. This is where we tell the agent to save the lead to Google Sheets and send a reply email via Gmail. [2:57](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=177#watch) Here is the system message. It is short and direct: you are a helpful assistant, use the Google Sheets tool to add the lead, and use the Gmail tool to reply to the form submitter. That is all the agent needs. Click paste system message. [3:09](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=189#watch) The agent is configured. It knows to save to Sheets and reply via Gmail. Close the node. #### Chat model [3:15](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=195#watch) The agent needs a model to think with. Click the plus under chat model. [3:18](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=198#watch) OpenAI Chat Model. If you did the last module, this part will feel familiar. [3:22](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=202#watch) Click the credential dropdown to connect your OpenAI API key. [3:26](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=206#watch) Create new credential. If you already made one in the last module, you could pick it from the list. We will create a fresh one here. [3:32](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=212#watch) Paste your OpenAI API key. If you followed the previous module, you already have one. If not, go to platform dot openai dot com, add credit, and create a key. [3:42](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=222#watch) Hit save. n8n tests the connection and stores the key. [3:45](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=225#watch) Now the model dropdown. [3:47](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=227#watch) GPT five mini. Fast, cheap, and plenty smart for processing form submissions. [3:52](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=232#watch) Model is wired up. Close it. #### Sheets tool [3:54](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=234#watch) Now the tools. The system message told the agent to use Google Sheets and Gmail — but it cannot do either until we give it the actual tools. Click the plus under tool. [4:03](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=243#watch) Google Sheets Tool. This lets the agent save form submissions as rows in a spreadsheet. #### Create the spreadsheet [4:08](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=248#watch) Before we configure this node, we need to create the actual spreadsheet. Close this for now — we will come right back. [4:14](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=254#watch) Switch to the Google Sheets tab. You need to create the spreadsheet that the Sheets node will write to. [4:20](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=260#watch) Name it Leads — this is where the contact form submissions will go. [4:24](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=264#watch) Now set up the column headers. These need to match the form fields. In A1, type Name. [4:28](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=268#watch) B1 — Email. [4:30](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=270#watch) C1 — Question. [4:31](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=271#watch) And D1 — Feedback. Four columns, matching exactly what the Lovable form sends: name, email, question, feedback. [4:37](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=277#watch) The spreadsheet is ready. Switch back to n8n and connect the Google Sheets node to it. [4:42](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=282#watch) Double click the Google Sheets node to open it up again. Now we can connect it to the Leads spreadsheet. #### Sheets tool [4:47](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=287#watch) Click the credential dropdown to connect your Google account. [4:50](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=290#watch) Create new credential. This one uses Google OAuth, so it opens a credential window. [4:55](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=295#watch) Click sign in with Google. This opens the Google account chooser. [4:59](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=299#watch) Pick the Google account that owns the Leads spreadsheet. [5:02](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=302#watch) Google is asking for permissions. Check the first box — this lets n8n read and write your spreadsheets. [5:07](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=307#watch) Second box — Drive access so n8n can find your spreadsheets by name. [5:12](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=312#watch) Last one — this lets Google connect to n8n as an external service. [5:17](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=317#watch) All three checked. Click continue and Google hands the credential back to n8n. [5:21](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=321#watch) Now pick the spreadsheet. Click the document dropdown. [5:24](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=324#watch) Leads — this is the spreadsheet where every form submission gets saved as a row. [5:29](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=329#watch) Click the sheet dropdown. [5:31](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=331#watch) Sheet one. That is the only tab. [5:33](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=333#watch) Now the column mapping. Each column in the spreadsheet has a purple button. Click it and the AI agent figures out what data goes there. Click the purple button next to Name. [5:43](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=343#watch) Email. [5:44](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=344#watch) Question. [5:45](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=345#watch) And Feedback. All four columns are now set to defined automatically by the model. [5:50](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=350#watch) Sheets tool is fully configured — credential, spreadsheet, sheet, and column mapping. Close it. #### Gmail tool [5:55](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=355#watch) The agent can save to Sheets now, but it also needs to send a reply email. Click the plus sign to add another tool. [6:00](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=360#watch) Gmail Tool. This lets the agent send a personalized reply back to whoever submitted the form. [6:05](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=365#watch) Click the credential dropdown. Gmail uses the same Google OAuth as Sheets. [6:10](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=370#watch) Create new credential. Gmail needs its own Google OAuth credential. [6:13](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=373#watch) Click sign in with Google. Same flow as before — Google account chooser then permissions. [6:18](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=378#watch) Pick the Google account you want to send emails from. [6:21](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=381#watch) Google is asking for permissions. Check the first box — this gives n8n full email access. [6:27](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=387#watch) Second box — manage drafts and send emails. [6:30](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=390#watch) Read, compose, and send. [6:31](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=391#watch) View email message metadata. [6:34](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=394#watch) View and modify but not delete. [6:36](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=396#watch) Last one — view your email messages and settings. [6:39](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=399#watch) All six checked. Click continue and Google hands the Gmail credential back to n8n. [6:43](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=403#watch) Gmail is connected. The agent can now send emails. Close the node. #### Respond node [6:47](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=407#watch) One last piece. Remember we told the webhook to wait for a respond node before sending back a reply? We need to add that node now. Click the plus on the right edge of the agent. [6:56](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=416#watch) Respond to Webhook. When the agent finishes processing — saving to Sheets and sending the email — this node sends a success response back to the form, so the user sees a confirmation message instead of an error. [7:07](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=427#watch) Nothing to configure. This node just sends back the response. Close it. #### Publish [7:12](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=432#watch) The workflow is complete. Webhook trigger, AI agent with a model, Google Sheets, Gmail, and a respond node. Click publish to make it live. Once published, the webhook URL is active and ready to receive form submissions. #### Add the secret [7:23](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=443#watch) The workflow is published, but Lovable still needs the webhook URL. Open the webhook node to copy it. [7:29](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=449#watch) Switch to the production URL tab. The test URL only works during testing. The production URL is the one your published workflow uses. [7:37](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=457#watch) Click the URL to copy it to your clipboard. You will paste this into Lovable so the form knows where to send data. [7:44](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=464#watch) Got the URL. Close the node. [7:45](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=465#watch) Switch back to Lovable. We need to paste the webhook URL into a secret so the form can reach the workflow. [7:51](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=471#watch) To add a secret in Lovable, click More in the toolbar. This opens the Cloud settings where you can manage secrets. [7:58](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=478#watch) This is the secrets page. The prompt told Lovable to reference a secret config value called N8N WEBHOOK URL instead of hardcoding it. Click paste secret name. [8:07](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=487#watch) Now paste the production URL you copied from the webhook node. This is the live endpoint your form will POST to. Click paste webhook URL. [8:15](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=495#watch) Click save. The Lovable app now knows where to send form submissions. The webhook URL is stored as a secret, not in the source code — exactly how it should be. #### Test the form [8:24](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=504#watch) Time to test. Click Preview in the toolbar to see the form you built. [8:28](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=508#watch) Fill out the form with sample data. Click the fill button to populate all the fields at once. [8:32](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=512#watch) Click send message. The form posts the data to the n8n webhook. The AI agent processes it — saves a row to Google Sheets with the name, email, question, and feedback, then sends a personalized reply via Gmail. The respond node sends back a success message, and the form shows the confirmation. [8:50](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=530#watch) The form submitted successfully. Now check the spreadsheet — click the Google Sheets tab to see the row the agent just wrote. [8:56](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend?t=536#watch) Simple as that. We show you and you do it. Sign up below to learn AI automation for free. ## Watch the 30-second version 3 short videos from this lesson. Watch, then do it yourself in the free practice copy. ### Your form says thanks too early Short with Robert · 0:32 Your form says thanks too early. Sarah asks about lead generation and the form says "Thanks!" right away, before the AI even runs. One n8n setting fixes it: Respond to Webhook. Now the form waits while the agent saves… **Transcript** Your form says thanks too early. Sarah asks about lead generation and the form says "Thanks!" right away, before the AI even runs. One n8n setting fixes it: Respond to Webhook. Now the form waits while the agent saves her as a lead and writes back in Gmail. ### Same lesson, seven versions Short with Robert · 0:19 Same lesson, seven versions. A plumber gets an emergency request form, HVAC a service request, sales a demo request, finance an expense form. Same build every time: a form, an agent, a sheet and an email, with your… **Transcript** Same lesson, seven versions. A plumber gets an emergency request form, HVAC a service request, sales a demo request, finance an expense form. Same build every time: a form, an agent, a sheet and an email, with your kind of business in it. ### Lovable + n8n – Myth: Lovable only makes mockups Short · 0:13 Lovable + n8n tip: Myth: Lovable only makes pretty mockups. Fact: it builds a working web app from your prompt. In our free lesson, a Lovable contact form sends real data to an n8n webhook, and an AI agent, Google… **Transcript** Lovable + n8n tip: Myth: Lovable only makes pretty mockups. Fact: it builds a working web app from your prompt. In our free lesson, a Lovable contact form sends real data to an n8n webhook, and an AI agent, Google Sheets and Gmail take it from there. No code. Watch the full 9:03 video walkthrough ## What you will build The front end is a simple lead form built in Lovable, an AI app builder where you describe what you want in plain English. It has four fields (Name, Email, Question and Feedback), a heading that reads "Have a Question?" and a button that changes to "Sending..." while it works. The back end is an n8n workflow. A Webhook node receives the form data. An AI Agent reads it, uses a Google Sheets tool to add the lead to a spreadsheet called Leads, and uses a Gmail tool to reply to the person who filled in the form. A Respond to Webhook node tells the form everything worked. You finish by submitting the form and seeing the new row in the sheet. ## Who this is for This module is for anyone who wants a web form that does more than land in an inbox: small business owners, marketers and freelancers who build sites for clients. It is the third module in AI Automation for Beginners. It helps to have done the n8n AI agent module first, since this one moves faster through the agent, model and Sheets steps you learned there. ## What you need before you do it for real - A Lovable account (lovable.dev) to build the form. You can sign up free. - An n8n account; n8n Cloud has a free trial. - A Google account, for the Google Sheet the leads go into and the Gmail the reply is sent from. - A model for the AI Agent: an OpenAI API key with some credit (platform.openai.com, billed separately from ChatGPT), or n8n's free credits. New n8n accounts include them: in the OpenAI Chat Model node pick Gateway credits and skip the key. ## Why this setup works Splitting the app into a front end and a back end keeps each part simple. Lovable only has to collect four fields and send them to one URL. n8n does the thinking and the actions. You can change the reply wording or add a new tool without touching the form. Two details make it reliable. First, the webhook waits for the Respond to Webhook node, so the form only shows success after the agent has finished. Second, the webhook URL lives in a Lovable secret instead of the page code, so it is not exposed in the source and you can swap it later without rebuilding the app. ## How to use this in your business Any form on your site can work this way: quote requests, event sign-ups, support questions or job applications. The agent can log the entry, write a reply that actually answers the question, and hand you a clean spreadsheet of leads. Change the system message to include your services and hours, and the replies will sound like your business instead of an auto-responder. Want a human check first? Point the Gmail tool at drafts instead of sending, the way the AI Email Responder module does. ## Common mistakes this avoids - Pasting the webhook URL into the page. The lesson stores it as a Lovable secret named N8N_WEBHOOK_URL, so it stays out of the source and is easy to change. - A form that reports success too early. Setting the webhook to wait for the Respond to Webhook node means the visitor only sees success once the work is done. - Column names that do not match. The Leads sheet uses the same four names as the form fields, so the agent can fill each column without manual mapping. - Testing an unpublished workflow. The production URL only works once the workflow is published, which is why Publish comes before copying the URL. - Building the Sheets tool before the sheet exists. The lesson pauses the node, creates the Leads spreadsheet, then comes back to connect it. ## How the practice works Every step is shown on the left under Watch, then you do it on the right under Your turn, in practice copies of Lovable, n8n, Google Sheets and Gmail. Each click is checked, and Do it for me completes a step if you get stuck. No accounts are created, no emails are sent and nothing is really published. ## 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 Lovable and n8n, checks each step, and never touches your real accounts. [Start “Lovable + n8n: Build a Web App with an AI Backend”](https://learn.ynteractive.com/modules/lovable-n8n) ## Step by step: Lovable + n8n: Build a Web App with an AI Backend All 93 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. Sign up 1. **Get started with Lovable.** This is the **Lovable** home page. Lovable builds web apps from a plain-English description, so you will not see code in this module. Click **Get started for free** to make an account. This is Lovable's home page. Lovable is a tool that builds web apps from a plain English description, so you will not see any code in this module. In the first module you built a Custom GPT. In the second, you built an AI agent inside n8n. Now you are going to combine a real web app with an AI powered backend. ### 2. Build the form 2. **Click the prompt box.** This is your Lovable dashboard. To start a new project, click the prompt box under **What should we build, Alex?** This is your Lovable dashboard. Your projects show up along the bottom. To start a new one, you just describe it. 3. **Describe the form.** This prompt tells Lovable exactly what to build — a contact form that sends data to an n8n webhook. Paste in the prompt on the box. This is the prompt that tells Lovable what to build. It describes a clean contact form with Name, Email, Question, and Feedback fields, and tells it to send form submissions to an n8n webhook URL pulled from a secret config — not hardcoded. ```text Build a simple, clean lead/contact form for a marketing business. The page should be modern, minimal, and professional. Include these fields: Name Email Question Feedback Use a clear heading such as: Have a Question? Add a short supporting line like: Send us your question or feedback and we'll get back to you. WEBHOOK When the form is submitted, send the data as a POST request to the n8n webhook URL. The data should be sent as JSON with keys: name, email, question, feedback. Do not ask me to paste the webhook URL into the page or source code. SUBMISSION STATES While submitting, change the button text to something like: Sending... After a successful submission, show: Thanks! Your message has been received. If the webhook request fails, show a simple friendly error: Something went wrong. Please try again. VALIDATION Require Name, Email, and Question. Feedback is optional. Validate the email format. Make it responsive for desktop and mobile. Do not add unnecessary sections, navigation, pricing, testimonials, or other marketing content. The main purpose of this project is to demonstrate sending form data from Lovable to an n8n webhook. IMPORTANT Do not hard-code any webhook URL. Reference the N8N_WEBHOOK_URL secret/config value when sending the form submission. The actual secret will be added manually later in Lovable Cloud, under Secrets. ``` 4. **Open the mode picker.** Next to the microphone it says **Build**. That is the mode picker. Click it. Before you send it, look at the word Build next to the microphone. That's the mode picker. 5. **Keep Build mode.** **Build** makes changes directly, **Chat** is for questions, **Plan** writes a detailed plan first. Click **Build**. Build makes changes directly. Chat is for asking questions and exploring ideas, and Plan writes a detailed plan first, which helps on bigger projects. This form is simple, so click Build. 6. **Build the app.** Click the **send arrow**. Lovable builds the app from your prompt and shows it in a preview. Then we switch to n8n to build the backend. Lovable reads your prompt, generates the code, and builds a preview of the app. Nothing is public until you publish it. In a few seconds you have a working contact form. Now we need to build the AI workflow that handles what happens when someone submits it. ### 3. New workflow 7. **Start a new workflow.** Now you are in n8n. Click **Create workflow** to start building the backend. Now you are in n8n. This is the workflow automation tool you used in the last module. This time, instead of a chat trigger, we are going to use a webhook — so the form can send data directly to n8n. ### 4. Webhook trigger 8. **Add the first step.** Click **Add first step…** to choose a trigger. Every workflow starts with a trigger. Last time we used a chat trigger. This time we want a webhook — an HTTP endpoint the form can POST to. 9. **Webhook trigger.** Click **On webhook call** — the form will send data to this endpoint. On webhook call. A webhook is just a URL that waits for incoming data. When someone submits the Lovable form, it sends the name, email, question, and feedback as JSON to this webhook. 10. **Change the response mode.** By default the webhook responds immediately. We need it to wait. Click the **Respond** dropdown. One important setting. By default, the webhook responds immediately, before the AI agent even runs. We need it to wait until the agent is done, so the form knows the submission succeeded. 11. **Use a Respond node.** Click **Using 'Respond to Webhook' Node** — this lets the workflow finish before responding. Using respond to webhook node. This tells n8n: do not send a response yet. Wait until you hit a dedicated respond node further down the chain. That way the form gets a real confirmation after the AI agent has processed everything. 12. **Back to the canvas.** Webhook is configured. Close the node with the **×**. That is the webhook set up. Close the node. ### 5. AI Agent 13. **Add the next node.** Click the **+** on the right edge of the webhook node. Now we decide what happens when the form data arrives. 14. **Add the AI Agent.** Click **AI Agent** — it will process the form data, save it to a sheet, and send an email. AI Agent. Same node as last time, but now it handles form submissions instead of chat messages. It will read the form data, save it to Google Sheets, and send a personalized reply via Gmail. 15. **Change the prompt source.** This time we are not using a chat trigger. Click the **Source** dropdown. This time the prompt does not come from a chat trigger — it comes from the webhook. We need to change the source so we can write our own prompt template. 16. **Define it manually.** Click **Define below** so we can write a custom prompt template. Define below. This lets us write a prompt that pulls the form fields directly from the webhook data. 17. **Write the prompt template.** This template pulls the form fields from the webhook data. Paste in the prompt template. Here is the prompt template. It uses n8n expressions — those double curly braces — to pull the name, email, question, and feedback from the webhook body. Each time the form is submitted, the agent gets a prompt with the real data. 18. **Add an option.** Scroll down and click **+ Add Option** to add a system message. Now we need a system message — the standing instruction that tells the agent what to do with every submission. 19. **System Message.** Click **System Message**. System message. This is where we tell the agent to save the lead to Google Sheets and send a reply email via Gmail. 20. **Write the system message.** This tells the agent to save leads to Sheets and reply via Gmail. Paste in the system message. Here is the system message. It is short and direct: you are a helpful assistant, use the Google Sheets tool to add the lead, and use the Gmail tool to reply to the form submitter. That is all the agent needs. ```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. ``` 21. **Back to the canvas.** The agent knows what to do. Close the node with the **×**. The agent is configured. It knows to save to Sheets and reply via Gmail. Close the node. ### 6. Chat model 22. **Give the agent a brain.** The agent still needs a language model. Click the **+** under **Chat Model**. The agent needs a model to think with. 23. **Pick OpenAI.** Click **OpenAI Chat Model**. OpenAI Chat Model. If you did the last module, this part will feel familiar. 24. **Open the credentials.** Click the **Credential** dropdown. 25. **Create a new credential.** Click **+ Create new credential**. Create new credential. If you already made one in the last module, you could pick it from the list. We will create a fresh one here. 26. **Paste the key.** Paste in the API key to drop in your OpenAI key. No key yet? Make one at platform.openai.com (add credit first), or in your own n8n pick **Gateway credits** and skip this step. If you followed the previous module, you already have one. If not, go to platform dot openai dot com, add credit, and create a key. Or skip it: new n8n accounts include free credits, so in your own n8n you can pick gateway credits instead. 27. **Save the credential.** Click **Save**. n8n tests the connection and stores the key. 28. **Pick the model.** Click the **Model** dropdown. Now the model dropdown. 29. **gpt-5-mini.** Pick **gpt-5-mini** — fast and cheap. GPT five mini. Fast, cheap, and plenty smart for processing form submissions. 30. **Back to the canvas.** Close the model node with the **×**. Model is wired up. Close it. ### 7. Sheets tool 31. **Add a tool.** The agent needs tools to do things. Click the **+** under **Tool**. Now the tools. The system message told the agent to use Google Sheets and Gmail — but it cannot do either until we give it the actual tools. 32. **Add Google Sheets.** Click **Google Sheets Tool**. Google Sheets Tool. This lets the agent save form submissions as rows in a spreadsheet. ### 8. Create the spreadsheet 33. **Back to the canvas.** Before configuring this, create the spreadsheet it will write to. Close the node for now. Before we configure this node, we need to create the actual spreadsheet. Close this for now — we will come right back. 34. **Open Google Sheets.** Click the **Google Sheets** tab to create a new blank spreadsheet. Switch to the Google Sheets tab. You need to create the spreadsheet that the Sheets node will write to. 35. **Name the spreadsheet.** Click the title and rename it to **Leads**. Name it Leads — this is where the contact form submissions will go. 36. **Type the first column header.** In cell **A1**, type **Name**. Now set up the column headers. These need to match the form fields. In A1, type Name. 37. **Email.** In cell **B1**, type **Email**. B1 — Email. 38. **Question.** In cell **C1**, type **Question**. C1 — Question. 39. **Feedback.** In cell **D1**, type **Feedback**. That is all four columns — matching the form. And D1 — Feedback. Four columns, matching exactly what the Lovable form sends: name, email, question, feedback. 40. **Back to n8n.** The spreadsheet is ready. Click the **n8n** tab to go back and connect it. The spreadsheet is ready. Switch back to n8n and connect the Google Sheets node to it. 41. **Open the Sheets node.** Double-click the **Google Sheets** node to configure it. Double click the Google Sheets node to open it up again. Now we can connect it to the Leads spreadsheet. ### 9. Sheets tool 42. **Add a credential.** Click the **Credential** dropdown. 43. **Create a new credential.** Click **+ Create new credential** to sign in with Google. Create new credential. This one uses Google OAuth, so it opens a credential window. 44. **Sign in with Google.** Click **Sign in with Google** to connect your account. This opens the Google account chooser. 45. **Choose your account.** Click your **Google account** to continue. Pick the Google account that owns the Leads spreadsheet. 46. **Allow Sheets access.** Check **See, edit, create, and delete all your Google Sheets spreadsheets**. Google is asking for permissions. Check the first box — this lets n8n read and write your spreadsheets. 47. **Allow Drive access.** Check **See, edit, create, and delete all of your Google Drive files**. Second box — Drive access so n8n can find your spreadsheets by name. 48. **Allow external service.** Check **Connect to an external service**. Last one — this lets Google connect to n8n as an external service. 49. **Sign in.** Click **Continue** to complete the Google sign-in. All three checked. 50. **Pick the spreadsheet.** Click the **Document** dropdown. Now pick the spreadsheet. 51. **Leads.** Click **Leads** — the spreadsheet where form submissions go. Leads — this is the spreadsheet where every form submission gets saved as a row. 52. **Pick the sheet tab.** Click the **Sheet** dropdown. 53. **Sheet1.** Click **Sheet1**. Sheet one. That is the only tab. 54. **Map the Name column.** Under **Values to Send**, click the **✦** button next to **Name** — the AI agent will fill this in automatically. Now the column mapping. Each column in the spreadsheet has a purple button. 55. **Map the Email column.** Click the **✦** button next to **Email**. Email. 56. **Map the Question column.** Click the **✦** button next to **Question**. Question. 57. **Map the Feedback column.** Click the **✦** button next to **Feedback**. And Feedback. All four columns are now set to defined automatically by the model. 58. **Back to the canvas.** Google Sheets is configured. Close the node with the **×**. Sheets tool is fully configured — credential, spreadsheet, sheet, and column mapping. Close it. ### 10. Gmail tool 59. **Add another tool.** The agent also needs to send emails. Click the **+** next to Google Sheets to add another tool. The agent can save to Sheets now, but it also needs to send a reply email. 60. **Add Gmail.** Click **Gmail Tool**. Gmail Tool. This lets the agent send a personalized reply back to whoever submitted the form. 61. **Add a credential.** Click the **Credential** dropdown. Gmail uses the same Google OAuth as Sheets. 62. **Create a new credential.** Click **+ Create new credential** to sign in with Google. Create new credential. Gmail needs its own Google OAuth credential. 63. **Sign in with Google.** Click **Sign in with Google** to connect your account. Same flow as before — Google account chooser then permissions. 64. **Choose your account.** Click your **Google account** to continue. Pick the Google account you want to send emails from. 65. **Allow email access.** Check **Read, compose, send, and permanently delete all your email from Gmail**. Google is asking for permissions. Check the first box — this gives n8n full email access. 66. **Allow drafts.** Check **Manage drafts and send emails**. Second box — manage drafts and send emails. 67. **Allow compose.** Check **Read, compose, and send emails from your Gmail account**. Read, compose, and send. 68. **Allow metadata.** Check **View your email message metadata**. View email message metadata. 69. **Allow modify.** Check **View and modify but not delete your email**. View and modify but not delete. 70. **Allow view.** Check **View your email messages and settings**. Last one — view your email messages and settings. 71. **Sign in.** Click **Continue** to complete the Google sign-in. All six checked. 72. **Back to the canvas.** Gmail is connected. Close the node with the **×**. Gmail is connected. The agent can now send emails. Close the node. ### 11. Respond node 73. **Add the respond node.** One more node. Click the **+** on the right edge of the AI Agent. One last piece. Remember we told the webhook to wait for a respond node before sending back a reply? We need to add that node now. 74. **Respond to Webhook.** Click **Respond to Webhook**. Respond to Webhook. When the agent finishes processing — saving to Sheets and sending the email — this node sends a success response back to the form, so the user sees a confirmation message instead of an error. 75. **Back to the canvas.** Nothing to configure here. Close the node with the **×**. Nothing to configure. This node just sends back the response. Close it. ### 12. Publish 76. **Publish the workflow.** The workflow is complete. Click **Publish** to make it live. The workflow is complete. Webhook trigger, AI agent with a model, Google Sheets, Gmail, and a respond node. Once published, the webhook URL is active and ready to receive form submissions. ### 13. Add the secret 77. **Open the webhook.** Double-click the **Webhook** node to get its production URL. The workflow is published, but Lovable still needs the webhook URL. 78. **Production URL.** Click the **Production URL** tab — this is the live URL your form will POST to. Switch to the production URL tab. The test URL only works during testing. The production URL is the one your published workflow uses. 79. **Copy the URL.** Click the URL to **copy** it. You will paste it into Lovable as a secret. You will paste this into Lovable so the form knows where to send data. 80. **Back to the canvas.** URL copied. Close the webhook node. Got the URL. Close the node. 81. **Back to Lovable.** Click the **Lovable** tab. We need to give it the webhook URL. Switch back to Lovable. We need to paste the webhook URL into a secret so the form can reach the workflow. 82. **Open More.** Your app is open in the Lovable editor: chat on the left, preview on the right. In the toolbar at the top, click **More** (the stacked icon right after **Code**). Here is your app in the Lovable editor, with the chat on the left and the preview on the right. Secrets live in the More view. In the toolbar at the top, click the stacked icon right after the code brackets. That's More. 83. **Open Cloud.** More holds your project tools. Click **Cloud** in the list on the left. More holds the tools for running your app, starting with Analytics. Secrets belong to Cloud, Lovable's built-in backend. 84. **Open Secrets.** Cloud opens on its **Overview**. Click **Secrets** in the list. Cloud opens on its overview, and its pages are listed on the left. 85. **Name the secret.** Paste in the secret name — this matches what the Lovable app expects. This is the secrets page. The prompt told Lovable to reference a secret config value called N8N WEBHOOK URL instead of hardcoding it. 86. **Paste the webhook URL.** Paste in the webhook URL to drop in the production URL you just copied. This is the live endpoint your form will POST to. 87. **Save the secret.** Click **Save**. The Lovable app can now reach the n8n workflow. The Lovable app now knows where to send form submissions. The webhook URL is stored as a secret, not in the source code — exactly how it should be. ### 14. Test the form 88. **Open the form.** Click **Preview** (the globe icon) in the toolbar to test the form. Time to test. 89. **Fill the form.** Click **Fill with test data** to populate the form fields. Fill out the form with sample data. 90. **Submit the form.** Click **Send Message**. The form sends the data to n8n, the agent saves it to Sheets and emails a reply. The form posts the data to the n8n webhook. The AI agent processes it — saves a row to Google Sheets with the name, email, question, and feedback, then sends a personalized reply via Gmail. The respond node sends back a success message, and the form shows the confirmation. ### 15. Publish the app 91. **Open Publish.** The test went through. The preview is only for you, so click **Publish** at the top right to put the form online. The test went through. But the preview is only for you. To put the form online, click Publish at the top right. 92. **Publish.** Lovable suggests a free **lovable.app** address (you can change it) and runs a quick security scan. Click **Publish**. Lovable suggests a free web address ending in lovable dot app, and you can change it before you publish. It also runs a quick security scan. The live app uses the same secret, so it sends to your workflow too. 93. **Check the spreadsheet.** Your app is live. Click the **Google Sheets** tab to see the data the agent saved from your test. Your app is live. Now check the spreadsheet. [All free Stepthrough videos](https://learn.ynteractive.com/content/videos) ## Frequently asked questions **How do I connect a Lovable form to an n8n webhook?** 1. In n8n, add a Webhook node and copy its Production URL. 2. In Lovable, ask for a form that sends each submission to that URL. 3. In n8n, add the steps after the webhook (here an AI Agent with Google Sheets and Gmail tools) and end with Respond to Webhook. 4. Publish the workflow and send a test from the form. The lesson walks through every click. **Do I need to know how to code to connect Lovable to n8n?** No. Lovable builds the form from a plain-English prompt, and n8n connects everything with nodes. You paste a webhook URL into a Lovable secret, and that is the only link between them. **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 Lovable, n8n, OpenAI and Google accounts, and some of those cost money once you use them for real work. **What is a webhook in n8n?** A webhook is a URL that starts a workflow when something sends data to it. Here, the Lovable form sends each submission to the n8n webhook as JSON. **Why use the Respond to Webhook node?** It makes the webhook wait until the agent has saved the lead and sent the email, then tells the form it succeeded. Without it, the form would get an answer before the work was done. **Should I use the test URL or the production URL?** Use the Production URL for the real form, and publish the n8n workflow first. The lesson copies the production URL into the N8N_WEBHOOK_URL secret. The form itself only goes public when you publish it in Lovable; until then it runs in the preview. [Start this module free](https://learn.ynteractive.com/modules/lovable-n8n) - Previous in AI Automation for Beginners: [n8n AI Agent Tutorial: Save Social Media Ideas to Google Sheets](https://learn.ynteractive.com/content/n8n-ai-agent-tutorial-google-sheets) ## More Lovable and n8n tutorials - [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… - [A Support Agent That Answers from Your Own Docs](https://learn.ynteractive.com/content/support-agent-answers-from-your-docs-n8n): Turn an n8n chat agent into a support agent that answers only from your policies in a Google Doc, refuses what it should, and hands off to a person by email. - [Build an AI Follow-Up Agent for HVAC Service Calls](https://learn.ynteractive.com/content/hvac-service-follow-up-ai-agent-n8n): Build an AI agent for Cedar Ridge Heating & Air that writes follow-up messages for completed service calls and saves them to Google Sheets — chat trigger, AI Agent… ## From the blog - [n8n AI Agent Tools: How the Agent Gets Things Done](https://learn.ynteractive.com/content/blog/n8n-ai-agent-tools): n8n AI agent tools explained: Google Sheets Tool and Gmail Tool vs regular nodes, naming tools in the system message, and limiting a tool to drafts. - [What Is JSON in n8n? A Plain-English Guide](https://learn.ynteractive.com/content/blog/what-is-json): What is JSON in n8n? Keys and values, how a form sends JSON, why webhooks use $json.body.name but Gmail uses $json.Subject, and why keys must match. - [Frontend vs Backend, Explained with a Lovable Form](https://learn.ynteractive.com/content/blog/frontend-vs-backend-explained): The frontend is what people see and click; the backend receives the data and does the work. A plain-English guide using a Lovable form and an n8n workflow. [All blog posts](https://learn.ynteractive.com/content/blog) ## Visual guides This lesson’s key ideas as quick visual guides: swipe through the slides, or read the same guide as text. - [Build a web form with an AI backend, no code](https://learn.ynteractive.com/content/visual/lovable-n8n-form): Most website forms just land in an inbox and wait. This one does the work. You describe the form in Lovable, and it builds it. - [Mistake to Avoid: Testing an Unpublished n8n Workflow](https://learn.ynteractive.com/content/visual/mistake-testing-an-unpublished-workflow): A visual tip: an n8n production webhook URL only works once the workflow is published. Publish first, then copy the URL into your app. - [n8n Webhook URL: Don't Paste It into Your Page](https://learn.ynteractive.com/content/visual/mistake-webhook-url-in-the-page): Where should your n8n webhook URL go? Not in the page code. Store it as a Lovable secret so it stays out of the source and is easy to change. [All visual guides](https://learn.ynteractive.com/content/visual) ## Free cheat sheets Print it or save the PDF: the key steps and checks from this lesson on one page, free. - [Lovable + n8n Form Flow Cheat Sheet](https://learn.ynteractive.com/content/cheat-sheets/lovable-n8n-form-flow): 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. - [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 printable cheat sheets](https://learn.ynteractive.com/content/cheat-sheets) ## Terms in this lesson Plain-English definitions, each with an example from a free lesson. [Deployment (publishing a web app)](https://learn.ynteractive.com/content/glossary/web-app-deployment) · No-code (and low-code) · [Request body (payload)](https://learn.ynteractive.com/content/glossary/request-body) · [Vibe coding](https://learn.ynteractive.com/content/glossary/vibe-coding) · [Webhook](https://learn.ynteractive.com/content/glossary/webhook) · [HTTP Request node](https://learn.ynteractive.com/content/glossary/http-request-node) · [Prompt injection](https://learn.ynteractive.com/content/glossary/prompt-injection) · [Web form](https://learn.ynteractive.com/content/glossary/web-form) [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… - [A/B test plan prompt](https://learn.ynteractive.com/content/prompts/ab-test-plan-prompt): Plan one clean A/B test for an email, form or page: a single change, a stated guess, the number that decides the winner and when… - [AI agent system message prompt](https://learn.ynteractive.com/content/prompts/agent-system-message-draft-prompt): An AI agent prompt template for the n8n System Message: who the agent is, what it knows, its rules and how it writes, plus a… - [AI agent test messages prompt](https://learn.ynteractive.com/content/prompts/agent-test-messages-prompt): Test an AI agent before launch with realistic messages: normal requests, borderline cases, missing details and tricky ones, each… [All free prompt templates](https://learn.ynteractive.com/content/prompts) ## More terms on this topic [HTTP status code](https://learn.ynteractive.com/content/glossary/http-status-code) · Model Context Protocol (MCP) · [Respond to Webhook node](https://learn.ynteractive.com/content/glossary/respond-to-webhook) · [Responsive design](https://learn.ynteractive.com/content/glossary/responsive-design) · Submission states · [Tool calling](https://learn.ynteractive.com/content/glossary/tool-calling) · Workflow automation ## More prompts on this topic - [Employee handbook section prompt](https://learn.ynteractive.com/content/prompts/employee-handbook-section-prompt): Turn your own rules into one plain-English handbook section, with every gap and anything touching pay, discipline or privacy… ## Browse related tutorials [AI Automation for Beginners (3)](https://learn.ynteractive.com/content/course/ai-automation-for-beginners) · [Lovable tutorials (16)](https://learn.ynteractive.com/content/tool/lovable) · [n8n tutorials (56)](https://learn.ynteractive.com/content/tool/n8n)