Lovable + n8n: a web form with an AI backend, step by step

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

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.