# How to add a working contact form in Lovable

Connect your Lovable contact form to email and Telegram. Copy a ready prompt, verify your email, and check your first submission in Formgong.

Author: Formgong
Published: 2026-10-01
Language: en
Canonical: https://formgong.com/blog/lovable-contact-form-email-telegram?lang=en

To connect a Lovable contact form to Formgong, get a public form key, verify your email, and paste the integration prompt into Lovable. The form posts to /submit; Formgong stores submissions and sends notifications to email and your connected Telegram chat. You do not need to run your own backend for this form.

## When a separate form service makes sense

Your Lovable landing page already has fields, a button, and a thank-you message. The next job is making sure a submission actually reaches you. A success message on the page does not, by itself, prove that anything was saved or emailed.

Lovable has its own backend and email and Telegram connectors. If your app already uses those for accounts, database records, and other workflows, keeping the form there can be sensible. Formgong is useful when you want a contact form, email and Telegram notifications, and a separate inbox for submissions. The form's design stays on your website.

Below, we will connect a form with name, email, and message fields. You need a Lovable project, an email address you can access, and optionally a Telegram account.

## 1. Get your form key and verify your email

Open [Formgong](/?lang=en#top) and enter your email address. Your form key appears on screen. Open the email from Formgong and follow the verification link. This gives you dashboard access and enables notification delivery to your address.

Before email verification, submissions may be held pending confirmation. Finish this step before testing delivery. You can also sign in with Google when that button is available.

In the dashboard, open your form and then **Connect website**. This section contains the key and a prompt for that particular form. Use that key in place of the sample `fk_your_access_key`.

**The form key is public.** It allows submissions and can appear in your site's code. It does not grant access to read your inbox or edit your settings. You do not need to put a password, a Telegram bot token, or an email provider's secret key in the frontend.

## 2. Paste the prompt into Lovable

Open your project's chat. If you already have a form, start with: “Connect my existing form to Formgong. Keep its design and fields.” Then paste the prompt from Connect website.

This is a sample prompt. Replace `fk_your_access_key` with your form key before using it. If your form has additional fields, ask Lovable to keep their names.

```text
Add a contact form that sends leads to Formgong. Do not create a backend, database, or secrets.

Requirements:
- POST https://formgong.com/submit
- Hidden field access_key with value fk_your_access_key (this key is public and belongs in frontend code)
- Fields: name, email, optional phone, message
- Honeypot: a text field named botcheck, hidden off-screen with CSS (position:absolute; left:-10000px), tabindex="-1", autocomplete="off"
- No file uploads
- Plain HTML form: method="POST" action="https://formgong.com/submit"
- If you use fetch: Content-Type application/json and Accept: application/json. Success means json.success === true
- After success, show a thank-you state
- Do not add server functions or Resend
```

### What the API request looks like

```javascript
async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Formgong error");
}
```

## 3. Check the submission, not just the success message

When Lovable finishes the changes, open your form in its preview. Enter a test name, an email address you control, and a message you can recognize. Submit the form once.

- The website should display a successful submission message.

- In Formgong, open that form's Submissions section. Check that the test message and all expected fields are present.

- Check your notification email, including the spam folder. When the visitor supplied an email, replying to the notification should address that visitor.

After publishing the site, repeat the test on its real domain. A working editor preview is not a substitute for testing the published version.

**If the form uses fetch:** show the success state only after Formgong returns `success: true`. Keep the visitor's input when a request fails so they can try again.

## 4. Connect Telegram

Open the Telegram section in this form's settings and use the connect button. It opens the Formgong bot with a link for your form. Start the bot to finish the connection. You do not need to create your own bot or put a bot token in Lovable.

For a group, follow the instructions in the same section: add the bot and send `/connect` with the supplied code. The connection code is different from your public form key.

Return to the settings and check that the chat is connected. Send another test submission from your website. It should appear in that chat and the Formgong inbox. Email and Telegram are separate notification channels.

## What to check when a submission does not arrive

**The site says success, but the inbox is empty**
Check that the form sends a POST to `https://formgong.com/submit` with a real `access_key`. Ask Lovable to show success after the API response, rather than immediately after the button click.

**The submission is there, but the email is missing**
Check email verification, the recipient address in settings, and the spam folder. If the submission is flagged as spam, check the Spam tab and the `botcheck` field: a visitor should never fill it in.

**The submission is there, but Telegram is quiet**
Check that the chat belongs to this form, the bot has been started, and it has not been blocked. For a group, confirm the bot is a member and the `/connect` step was completed.

**The form stopped working after enabling Turnstile**
Refresh the prompt in Connect website and add the widget with the current site key. Your form needs to send the resulting Turnstile token. See the [integration instructions](/docs/lovable?lang=en) for details.

**You need to accept files**
This workflow is for text fields. Formgong does not accept file uploads; do not add them to this form.

## Before you go live

Test the form on a phone and a computer, on the published domain. Confirm who receives notifications, which thank-you state the visitor sees, and what happens when a request fails. Do not clear their fields after a failed submission.

Once the form works, change recipients, Telegram, the email subject, and the destination after submission in Formgong. Those settings do not require rebuilding your site. If you want to see where visitors leave a form unfinished, add [form analytics](/docs/analytics?lang=en).

The Free plan includes 300 submissions per account per month, plus email and Telegram. Start with one form and a test submission you have checked.

## Frequently asked questions

### Does a Lovable contact form need Supabase?

No. A form connected to Formgong does not need a separate Supabase project; it sends submissions directly to Formgong. If your app already uses Lovable Cloud or Supabase, you can keep the form on that existing backend instead.

### Can I put the Formgong key in frontend code?

Yes. access_key is a public submission key. It does not allow reading your inbox or changing settings. You do not need to put an email provider's secret key or a Telegram bot token in your website's code.

### Are Telegram notifications free?

Email and Telegram are included in Formgong's Free plan, with 300 submissions per account per month. Verify your email and connect a chat to the relevant form before testing notification delivery.

### Will Formgong change my form's design?

Formgong receives submissions; the fields and buttons stay on your website. Ask Lovable to connect the existing form while preserving its design, then check the result in the editor and on a phone.

## Sources and documentation

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [Lovable Resend connector](https://docs.lovable.dev/integrations/resend)
- [Lovable Telegram connector](https://docs.lovable.dev/integrations/telegram)
- [Formgong Lovable integration](https://formgong.com/docs/lovable?lang=en)

[Get a form key](https://formgong.com/?lang=en#top)