Lovable Contact Form
Send a contact form on a Lovable app to your email
Last updated
To send a contact form on a Lovable app to your email, add the component below to your project, put your form's API key in the project's .env file, and publish. The form posts to https://api.staticforms.dev/submit from the browser, so you need no backend, edge function or secret, and Static Forms emails each submission to you. It works on the Static Forms free plan.
Option A: ask Lovable to build it
Paste this prompt into the Lovable chat, then add your key as described below. Check the generated code before you publish: it should post to the URL above and send the apiKey field.
Option B: add the component yourself
Create src/components/ContactForm.tsx in Lovable's code editor, or in your synced Git repository, with this code, then render <ContactForm /> on the page where it should appear.
Add your API key
Copy the key from the General tab of your form in the app and add it to .env.
Lovable's docs put VITE_ values in the project's .env file and describe them as embedded in the client bundle at build time, safe to be public, and say Secrets are for backend values only. The Static Forms form API key is meant to be public and cannot read submissions, so .env is the right place for it. Do not add .env to .gitignore: Lovable needs it committed for previews and published builds. See Lovable's page on secrets and VITE_ variables.
Publish and test it
Publish the app, open the live page, send a message and check that the confirmation appears. The message arrives by email and is listed in the Inbox in the app.
Domain restriction
If you turn on domain restriction (Starter and up), add the domain your published app is served from, and the preview domain if you test there. A domain that is not on the list is rejected with a 403 that names it.
Spam protection
Every submission goes through the built-in spam filter, and the honeypot field catches bots that fill in every field. CAPTCHA widgets and their field names are in the plain HTML guide. A longer walkthrough is in the Lovable contact form tutorial.
Troubleshooting
| What you see | Why, and what to do |
|---|---|
| 400 "API key is required (provide either apiKey or accessKey)" | The key is empty. Check that .env has VITE_STATIC_FORMS_KEY and that the app was rebuilt after you added it. |
| 401 "Invalid API key" | Check that the key matches the one on the form's General tab, with no extra spaces. |
| A field is missing from the email | Give the input a name attribute. |
| 403 "Submission rejected: Domain … is not in the allowed domains list" | Domain restriction is on and the domain the visitor used is not listed. See the domain restriction note above. |
| No email arrives | Check your spam folder, then the Inbox in the app: if the submission is listed, the problem is delivery. |
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard.
Do I need an edge function or a Lovable secret?
No. The form API key is public by design, so it can sit in a VITE_ variable. The browser posts straight to https://api.staticforms.dev/submit, and Static Forms receives the submission.
