Formulario en Replit

Replit Agent suele añadir una ruta de Express y una base de datos para un formulario de contacto. La instrucción mantiene el formulario únicamente en la interfaz de usuario y lo envía a Formgong.

1. Obtenga una clave de acceso en la página de inicio.
2. Abra la aplicación Replit y pegue la instrucción en Agent.
3. Compruebe que no se haya añadido ninguna nueva ruta de servidor, base de datos o clave secreta para el formulario.
4. Publique, envíe un envío de prueba y ábralo en la bandeja de entrada de Formgong.

Prompt

Add a contact form to this app. Keep it frontend-only: submissions go to Formgong, a hosted form backend. Replit Agent: do not add an Express or Flask route, a database, Replit Secrets, or nodemailer 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: "es", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "Enviado. ¡Gracias!" : "No se pudo enviar. Inténtalo de nuevo."));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Nombre <input name="name" placeholder="Tu nombre" required /></label>
      <label>Correo electrónico <input name="email" type="email" placeholder="tu@ejemplo.com" required /></label>
      <label>Mensaje <textarea name="message" placeholder="¿En qué podemos ayudarte?" 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.

Pedir clave