Formulário no Base44

O Base44 pode armazenar dados de formulários nas suas próprias entidades e enviar e-mails através de uma integração incorporada. Com o Formgong, a página envia os dados diretamente para o backend do formulário, e as funcionalidades de e-mail, Telegram, filtragem de spam e exportação para CSV já se encontram configuradas.

1. Obtenha uma chave de acesso na página inicial.
2. Cole o prompt no chat do Base44.
3. Verifique se o formulário envia os dados para /submit e se não foi criada nenhuma entidade para o mesmo.
4. Envie um envio de teste a partir da aplicação publicada.

Prompt

Add a contact form to this app. The page posts straight to Formgong, a hosted form backend. Base44: do not create an entity for submissions and do not use the built-in email integration for this form.

Formgong spec (follow exactly):
- Plain HTML: <form action="https://formgong.com/submit" method="POST">. With JavaScript, POST the same fields to https://formgong.com/submit using fetch.
- Hidden field access_key with value fk_your_access_key. The key is public and belongs in frontend code. Do not move it to a server or a secret.
- Hidden field _lang with the page language code, e.g. "en" (on multilingual sites use document.documentElement.lang). Formgong uses it for error messages, the thank-you page, and the autoreply.
- Fields: name, email, message (required); phone is optional. Keep these field names.
- Honeypot: <input type="text" name="botcheck" tabindex="-1" autocomplete="off"> inside a wrapper with aria-hidden="true", moved off-screen with CSS (position:absolute; left:-10000px). Never fill it.
- Success, plain form POST: optionally add a hidden _redirect field with the absolute https URL of the site's thank-you page. Without it, Formgong shows its own thank-you page.
- Success, fetch: send Accept: application/json (and Content-Type: application/json for a JSON body; for FormData let the browser set it). If the response has success === true, show an inline thank-you message and reset the form; otherwise show the response's message.
- Turnstile: only if I give you a Cloudflare Turnstile site key, add <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> and <div class="cf-turnstile" data-sitekey="SITE_KEY"></div> inside the form. Otherwise leave it out.
- Optional: add <script src="https://formgong.com/fg.js" async></script> once per page. It fills _lang from <html lang>, sets the Turnstile language, and counts form views without cookies.
- Do not create a backend, API route, server function, database table, or email-sending code (Supabase, Resend, SendGrid, nodemailer), and do not add secrets. No file uploads.

Minimal code

React component

"use client";
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState("");
  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({ _lang: "pt", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "Enviado. Obrigado!" : "Não foi possível enviar. Tente novamente."));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Nome <input name="name" placeholder="O seu nome" required /></label>
      <label>E-mail <input name="email" type="email" placeholder="voce@exemplo.com" required /></label>
      <label>Mensagem <textarea name="message" placeholder="Como podemos ajudar?" required /></label>
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">Enviar</button>
      <p role="status">{status}</p>
    </form>
  );
}

Before you publish

• The form posts to https://formgong.com/submit (form action or fetch URL).
• access_key holds your key from the Formgong dashboard, not fk_your_access_key.
• A hidden, empty botcheck field is present.
• _lang matches the page language.
• No API route, server function, database table, or secret was added for the form.
• A test submission shows up in the Formgong inbox and in your email.

Obter chave