# How to Write a Lovable Prompt for a Form > A Lovable prompt for a form, section by section: fields, heading, webhook keys, submission states, validation and the secret, and how to adapt it. Source: https://learn.ynteractive.com/content/blog/lovable-prompt-for-a-form · Updated 2026-10-13 · Free from Stepthrough (https://learn.ynteractive.com) Quick answer A good Lovable [prompt](https://learn.ynteractive.com/content/glossary/prompt) for a form names the purpose and look, lists the exact fields, gives the heading and supporting line, says how to send the data (a [POST request](https://learn.ynteractive.com/content/glossary/http-method) with exact [JSON](https://learn.ynteractive.com/content/glossary/json) keys, to a URL kept in a secret), spells out what the visitor sees while sending, after success and on failure, and says which fields are required. This guide is for owners and office staff building a form in Lovable without code, and the free [Lovable + n8n lesson](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) uses a prompt like this to build a working contact form. Last updated October 13, 2026 By [Robert Breen](https://learn.ynteractive.com/content/about) · Published October 13, 2026 · Updated October 13, 2026 · 7 min read Lovable · Prompts · n8n · Forms ## Watch: the idea in 0:52 ### A Lovable prompt for a form Explainer · 0:52 · with captions A Lovable prompt for a form, section by section: fields, heading, webhook keys, submission states, validation and the secret, and how to adapt it. **Transcript** You can ask ChatGPT to write almost anything. The next step is a real form, built in Lovable. Click Start with a prompt, and say its purpose and look. List each field the visitor will see. Its form asks for Name, Email, Question and Feedback. Add a WEBHOOK section. Send it as a POST request, as JSON, with exact keys like name, email and need. Copy those keys into your n8n prompt template. They must match, capitals too, or the answer is blank. Then spell out what the visitor sees. Sending while it works, a success message after, and a friendly error if it fails. Never hard-code the webhook URL. Use the N8N_WEBHOOK_URL secret instead. Copy the structure, and change only your parts. Practice it free in the Lovable + n8n lesson. In Lovable you click **Start with a prompt**, paste the description and click **Build**. The more you describe, the less Lovable has to guess. ## What goes in a Lovable form prompt? Every form prompt in the Stepthrough lessons has the same eight parts, in the same order. Here they are, with the contact form's wording from the lesson: 1. **Purpose and look:** "Build a simple, clean lead/contact form for a marketing business. The page should be modern, minimal, and professional." 2. **Fields:** Name, Email, Question, Feedback. 3. **Heading and supporting line:** "Have a Question?" and "Send us your question or feedback and we'll get back to you." 4. **WEBHOOK:** send the data as a POST request, as JSON, with exact keys. 5. **SUBMISSION STATES:** "Sending...", a success message and a friendly error. 6. **VALIDATION:** which fields are required, plus email format. 7. **Scope:** responsive for desktop and mobile, and "Do not add unnecessary sections, navigation, pricing, testimonials, or other marketing content." 8. **IMPORTANT:** don't hard-code the webhook URL; use the N8N_WEBHOOK_URL secret. Capitalized labels like WEBHOOK aren't required syntax; they just make a long prompt easy to scan. ## How do you describe the fields and heading? List each field on its own line, using the label the visitor will see, and give the heading and supporting line as examples. The lessons write "Use a clear heading such as:" and "Add a short supporting line like:", which leaves Lovable a little room while keeping the meaning. Field labels can be questions. The [AI Demo Request Form lesson](https://learn.ynteractive.com/content/ai-demo-request-form-lead-qualification) uses "What do you need help with?" and the [AI Lead Magnet Signup Form lesson](https://learn.ynteractive.com/content/lead-magnet-signup-form-ai-welcome-email) uses "How do you brew now?" A question tells the visitor what kind of answer you want. Every lesson form has exactly four fields. ## What does the WEBHOOK section do? The WEBHOOK section tells Lovable where the data goes and in what shape. The lesson's version: ```text 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. ``` The keys line is the most important sentence in the whole prompt. The labels the visitor sees can be anything, but the keys are what n8n reads. Each lesson picks short keys that match its fields: | Form | Visible fields | JSON keys | | --- | --- | --- | | Contact (lovable-n8n) | Name, Email, Question, Feedback | name, email, question, feedback | | Book a Demo (sales) | Name, Email, What do you need help with?, Team size | name, email, need, teamSize | | Get the Free Guide (marketing) | Name, Email, What do you want to improve?, How do you brew now? | name, email, interest, brewMethod | If you're new to the idea, [What Is a Webhook?](https://learn.ynteractive.com/content/blog/what-is-a-webhook) explains what the form is sending and why. ## Why must the keys match the n8n prompt template? n8n finds each answer by its key, so a mismatch leaves a blank. The AI Agent's prompt template in n8n reads the same keys from the webhook body. For the demo form: ```text Name: {{ $json.body.name }} Email: {{ $json.body.email }} Need: {{ $json.body.need }} Team size: {{ $json.body.teamSize }} ``` The keys must match character for character, including capitals. `teamSize` in the Lovable prompt means `$json.body.teamSize` in n8n; `teamsize` or `team_size` would come through empty. Decide the keys once, write them in the Lovable prompt, and copy them into the n8n template. ## Try it free, step by step **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) ## What are submission states, and why spell them out? Submission states are what the visitor sees after clicking the button: a "Sending..." label while it works, a success message when it's done, and a friendly error if it fails. Spelling them out means the form tells the truth about what happened. Each lesson writes its own messages to fit the form: - **Contact:** "Thanks! Your message has been received." / "Something went wrong. Please try again." - **Book a Demo:** "Request received! Check your email for your next step." - **Free guide:** "Check your inbox! Your free guide is on its way." Success should say what happens next; the error should give the visitor something to do. On the n8n side, setting the webhook's **Respond** option to **Using 'Respond to Webhook' Node** makes the form wait for the real result before choosing which message to show. ## How should validation be written? Say which fields are required, which are optional, and ask for email format checking. Short, explicit lines work best: - Contact: "Require Name, Email, and Question. Feedback is optional. Validate the email format." - Book a Demo: "All four fields are required. Validate the email format." - Free guide: "Require Name, Email, and What do you want to improve. How do you brew now is optional." Make a field optional when a good lead might not know the answer. A coffee beginner may not know what to call their brewing setup, and you'd rather have the signup. ## Why tell Lovable what not to add? The lessons' line "Do not add unnecessary sections, navigation, pricing, testimonials, or other marketing content" keeps the page to one job, and keeps Lovable from inventing testimonials or prices you'd have to delete. A one-sentence purpose, such as "The main purpose of this project is to send demo requests from Lovable to an n8n webhook," settles anything you didn't specify. ## Where does the webhook URL go? In a Lovable secret named **N8N_WEBHOOK_URL**, never in the page code. The lessons' IMPORTANT section says: ```text 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 through Lovable Settings. ``` After building and publishing the n8n workflow, you copy its **Production URL**, click **More** in the Lovable toolbar, add the secret with that exact name and click **Save**. [Connect a Lovable Form to n8n with a Webhook](https://learn.ynteractive.com/content/blog/lovable-form-n8n-webhook) walks through the wiring. ## How do you adapt the prompt for your own form? Copy the structure and change only the parts that are about your business. A checklist: 1. Rewrite the purpose line: what kind of form, for what kind of business. 2. Pick three to five fields, with the labels visitors will see. 3. Choose short, lowercase-first keys for each field and write them in the WEBHOOK line. 4. Write a heading, a supporting line, and success and error messages in your own voice. 5. Mark required and optional fields. 6. Keep the "do not add" line and the IMPORTANT section exactly as they are. 7. Copy the keys into the n8n prompt template as `{{ $json.body.yourKey }}`. Then click **Build**, open **Preview** and submit a test entry with your own email. The lessons are free and run in practice copies. A real build needs Lovable (free and paid plans), n8n (n8n Cloud is paid after a free trial, or self-host it) and, for an AI agent, an OpenAI API key, which is pay-as-you-go and billed separately from ChatGPT plans. More lessons are on the [Lovable tool page](https://learn.ynteractive.com/content/tool/lovable). ## Key takeaways - A Lovable form prompt works best with eight parts: purpose and look, fields, heading, WEBHOOK, SUBMISSION STATES, VALIDATION, scope limits and the IMPORTANT secret rule. - The JSON keys in the WEBHOOK line, such as name, email, need and teamSize, must match the n8n prompt template exactly, including capitals. - Spelled-out submission states make the form show "Sending...", a success message that says what's next, and a friendly error. - The line "Do not add unnecessary sections, navigation, pricing, testimonials, or other marketing content" keeps the page to one job. - The webhook URL belongs in a Lovable secret named N8N_WEBHOOK_URL, not in the page code. ## Frequently asked questions **Do I need to know code to write a Lovable form prompt?** No. The prompt is plain English. The only technical parts are the JSON keys and the secret name, and you can copy those patterns from the lessons. **Can I change the form after Lovable builds it?** Yes. You can describe changes to Lovable in more prompts. If you change a key, change it in the n8n prompt template too. **Why don't I paste the webhook URL into the prompt?** So it's not hard-coded into the page. Storing it as the N8N_WEBHOOK_URL secret keeps it out of the code and lets you change it without rebuilding. **How many fields should a form have?** Only what you need. Each lesson form has four, and some are optional. ## Free lessons in this post - [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. - [Build an AI Demo Request Form That Qualifies Leads](https://learn.ynteractive.com/content/ai-demo-request-form-lead-qualification): Build a "Book a demo" form in Lovable for Northwind Scheduling Software and connect it to n8n — the AI agent rates each lead hot, warm or nurture, saves it to Google… - [Build a Lead Magnet Signup Form with an AI Welcome Email](https://learn.ynteractive.com/content/lead-magnet-signup-form-ai-welcome-email): Build a "Get the free guide" signup form in Lovable for Harbor & Pine Coffee Roasters and connect it to n8n — the AI agent tags each lead by interest, saves it to… ## Watch it in a free lesson: Post to Every Channel Daily from One Sheet using n8n + Blotato ### Post to Every Channel Daily from One Sheet using n8n + Blotato: video walkthrough Full walkthrough · 3:26 · with captions Plan posts in a Google Sheet. Every morning n8n takes the next row marked ready, has AI write an Instagram, Facebook and TikTok caption, posts through Blotato and marks the row posted. The whole lesson narrated step by step, recorded in Stepthrough’s simulated practice environment. [Watch it with chapters and the full transcript](https://learn.ynteractive.com/content/post-everywhere-from-google-sheets-n8n-blotato#watch) From the free lesson [Post to Every Channel Daily from One Sheet using n8n + Blotato](https://learn.ynteractive.com/content/post-everywhere-from-google-sheets-n8n-blotato) ## Related terms Plain-English definitions, each with an example from a free lesson. [Prompt](https://learn.ynteractive.com/content/glossary/prompt) · [HTTP method (GET vs POST)](https://learn.ynteractive.com/content/glossary/http-method) · [JSON](https://learn.ynteractive.com/content/glossary/json) · [Audience segmentation](https://learn.ynteractive.com/content/glossary/audience-segmentation) · [Browser agent](https://learn.ynteractive.com/content/glossary/browser-agent) · [Call routing](https://learn.ynteractive.com/content/glossary/call-routing) · [Conversion rate](https://learn.ynteractive.com/content/glossary/conversion-rate) · [Data processing agreement (DPA)](https://learn.ynteractive.com/content/glossary/data-processing-agreement) [The full AI glossary](https://learn.ynteractive.com/content/glossary) ## Related prompts - [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… - [Buyer persona prompt](https://learn.ynteractive.com/content/prompts/buyer-persona-prompt): Write a buyer persona from real customer words, such as signup answers and reviews: their goal, worries, words they use and what… - [Data cleanup plan prompt](https://learn.ynteractive.com/content/prompts/data-cleanup-plan-prompt): Turn messy spreadsheet columns into clean, consistent ones: a column-by-column plan with standard values, rules for odd entries… - [Demo no-show follow-up prompt](https://learn.ynteractive.com/content/prompts/demo-no-show-follow-up-prompt): Follow up after a prospect misses a booked demo: no blame, real times to rebook, a text version for the same day and an easy out… [All free prompt templates](https://learn.ynteractive.com/content/prompts) ## Visual guides The same ideas as quick visual guides: swipe through the slides, or read each one 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: Pasting a Webhook URL into Your Page](https://learn.ynteractive.com/content/visual/mistake-webhook-url-in-the-page): A visual tip: don't paste your n8n webhook URL into the page. Store it as a Lovable secret so it stays out of the source and is easy to change. - [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. [All visual guides](https://learn.ynteractive.com/content/visual) ## Keep reading - [Automate a Lead Magnet Welcome Email with AI](https://learn.ynteractive.com/content/blog/lead-magnet-welcome-email): Lead magnet welcome email automation: a signup form sends each lead to an n8n AI agent that tags it, saves it and emails the guide with one tip. - [How to Sort Requests with AI: Writing Triage Rules](https://learn.ynteractive.com/content/blog/ai-triage-rules): How to sort requests with AI: write triage rules an agent can follow, with few labels, real examples, a default bucket and a person who checks. - [What Is Vibe Coding? Build a Real Form with Lovable](https://learn.ynteractive.com/content/blog/what-is-vibe-coding): Vibe coding means building software by describing it in plain words to an AI. What it is, what it's good for, and a real Lovable form example. [All blog posts](https://learn.ynteractive.com/content/blog) · [All free tutorials](https://learn.ynteractive.com/content)