Lovable web form prompt: free ChatGPT template
Updated · By Robert Breen
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: 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: Role, Context, Task and Format.
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. 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.
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: 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 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: 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.
Also useful: Build an AI Emergency Request Form for Your Plumbing Company · Build an AI Service Request Form for Your HVAC Company
Terms used here
Related prompts
- Google Sheets 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: Test an AI agent before launch with realistic messages: normal requests, borderline cases, missing details and tricky ones, each…
- AI agent system message 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…