# Lovable web form prompt: free ChatGPT template > Write a Lovable prompt for a web form that posts to n8n: fields, validation, button states, a thank-you message, and a webhook URL kept out of the code. Source: https://learn.ynteractive.com/content/prompts/web-form-builder-prompt · Updated 2026-10-01 · Free from Stepthrough (https://learn.ynteractive.com) [SOPs and operations](https://learn.ynteractive.com/content/prompts#job-sops-and-operations) · Works in ChatGPT, Claude, Gemini and Copilot Updated October 1, 2026 · By [Robert Breen](https://learn.ynteractive.com/content/about) Use this when you want a simple form, such as a service request, a quote request or a signup, that sends each submission to an n8n workflow. Lovable builds what you describe, so a vague request can come back as a full landing page with pricing and testimonials you never asked for. This prompt follows the structure of the form prompts in the [Lovable and n8n lesson](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend): fields, webhook, submission states, validation, and what not to build. ## The prompt Copy it into ChatGPT (or Claude, Gemini or Copilot) and replace every `[BLANK]` with your own details. It uses the four parts from [Prompt Writing 101](https://learn.ynteractive.com/content/prompt-writing-101-role-context-task-format): Role, Context, Task and Format. Copy prompt ```text Role: You are helping me write a prompt for Lovable, an AI app builder, to build one simple web form for [BUSINESS]. Context: The form is for [FORM PURPOSE] and should feel [TONE]. It needs these fields: [FIELDS]. Submissions go to an n8n webhook as JSON. The webhook URL must not be hard-coded: the app should read it from a secret named N8N_WEBHOOK_URL that I add later in Lovable's settings. If sending fails, people should [FALLBACK]. Task: Write the Lovable prompt. Include a heading and one supporting line, the fields in order, short JSON keys for each field, the button text while sending, the success message, a friendly error message, which fields are required, email format validation, a mobile-friendly layout, and a line telling it not to add navigation, pricing, testimonials or other sections. Format: Plain text in short sections labeled WEBHOOK, SUBMISSION STATES, VALIDATION and IMPORTANT, ready to paste into Lovable as is. After it, list the JSON keys on one line so I can use them in n8n. ``` ## Fill in the blanks **`[BUSINESS]`** Your business name and what you do. **`[FORM PURPOSE]`** Who fills it in and why: "customers reporting a plumbing problem", "staff requesting reimbursement". **`[TONE]`** Two or three words for the look, like "modern, minimal and professional" or "warm and friendly". **`[FIELDS]`** Each field label as people will see it, and which are required. Four is plenty for a first form. **`[FALLBACK]`** What to tell people if sending fails, such as "call us instead" or "tell your supervisor". ## Example, filled in **A made-up example** from the free lesson [Build an AI Emergency Request Form for Your Plumbing Company](https://learn.ynteractive.com/content/plumbing-emergency-request-form-ai-lovable-n8n). Blue Maple Plumbing is the made-up plumbing company in the emergency request form lesson. They want customers with a plumbing problem to reach them through a short form that an n8n agent can prioritize. Copy example ```text Role: You are helping me write a prompt for Lovable, an AI app builder, to build one simple web form for Blue Maple Plumbing, a residential plumbing company. Context: The form is for customers reporting a plumbing problem at their home, including emergencies, and should feel modern, minimal and professional. It needs these fields: Name, Email, What's the problem?, Service address, all required. Submissions go to an n8n webhook as JSON. The webhook URL must not be hard-coded: the app should read it from a secret named N8N_WEBHOOK_URL that I add later in Lovable's settings. If sending fails, people should call us instead. Task: Write the Lovable prompt. Include a heading and one supporting line, the fields in order, short JSON keys for each field, the button text while sending, the success message, a friendly error message, which fields are required, email format validation, a mobile-friendly layout, and a line telling it not to add navigation, pricing, testimonials or other sections. Format: Plain text in short sections labeled WEBHOOK, SUBMISSION STATES, VALIDATION and IMPORTANT, ready to paste into Lovable as is. After it, list the JSON keys on one line so I can use them in n8n. ``` ## What a good answer looks like - JSON keys like name, email, problem and address, the same four the lesson's form sends. - An error message that gives people another way through: "Something went wrong. Please call us instead." - An IMPORTANT section that names N8N_WEBHOOK_URL and says not to hard-code any webhook URL. - A plain no-extras line, so Lovable builds a form, not a website. ## How to check it before you use it An AI draft can sound right and still say something you never told it. Use the habit from the [Reply Faster lesson](https://learn.ynteractive.com/content/chatgpt-reply-to-customer-emails): check every promise, name, date and number against what you gave it before anything goes out. - Copy the JSON keys into your n8n prompt template exactly, as expressions like {{ $json.body.problem }}. A key spelled differently arrives empty. - Once the workflow is published, add the secret in Lovable using the Production URL from the Webhook node, not the test URL. - Click Preview, fill the form with test data and submit it before you share the link. - Don't ask for more than you need. Every extra field is more personal data stored in your sheet. ## Why this prompt works The secret keeps the webhook address out of the page's code, which is what [environment variables](https://learn.ynteractive.com/content/glossary/environment-variables) are for. Spelling out the success and error messages means you decide what people see, not the builder. ## Practice it in the free lesson **[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. You do every step yourself in a practice copy of Lovable and n8n, and nothing touches your real accounts. [Start the free lesson](https://learn.ynteractive.com/modules/lovable-n8n) Also useful: [Build an AI Emergency Request Form for Your Plumbing Company](https://learn.ynteractive.com/content/plumbing-emergency-request-form-ai-lovable-n8n) · [Build an AI Service Request Form for Your HVAC Company](https://learn.ynteractive.com/content/hvac-service-request-form-ai-lovable-n8n) ## Terms used here [Lovable](https://learn.ynteractive.com/content/glossary/lovable) · [Web form](https://learn.ynteractive.com/content/glossary/web-form) · [Form validation](https://learn.ynteractive.com/content/glossary/form-validation) · [Secrets and environment variables](https://learn.ynteractive.com/content/glossary/environment-variables) ## Related prompts - [Google Sheets columns plan prompt](https://learn.ynteractive.com/content/prompts/sheet-columns-plan-prompt): Plan the Google Sheets columns for an n8n automation: header names, what goes in each, who fills it, and which must match your… - [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… - [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… [All free prompt templates](https://learn.ynteractive.com/content/prompts) · [AI glossary](https://learn.ynteractive.com/content/glossary)