How to add a working contact form in Lovable

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 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.

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.

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

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.

1. The website should display a successful submission message.
2. In Formgong, open that form's Submissions section. Check that the test message and all expected fields are present.
3. 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.

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 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.

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.