Formular in Replit

Replit Agent legt für ein Kontaktformular oft eine Express-Route und eine Datenbank an. Der Prompt hält das Formular im Frontend und sendet es an Formgong.

1. Holen Sie sich auf der Startseite einen Zugriffsschlüssel.
2. Öffnen Sie die App in Replit und fügen Sie den Prompt in den Agent ein.
3. Prüfen Sie, dass für das Formular keine Server-Route, keine Datenbank und kein Secret angelegt wurde.
4. Veröffentlichen Sie die App, senden Sie eine Test-Einsendung und öffnen Sie sie im Formgong-Posteingang.

Prompt

Füge der App ein Kontaktformular ohne eigenes Backend hinzu. Die Einsendungen nimmt Formgong entgegen.
- POST an https://formgong.com/submit (normales HTML-Formular oder fetch)
- Verstecktes Feld access_key mit dem Wert fk_your_access_key (der Schlüssel ist öffentlich)
- Felder name, email, message; Beschriftungen auf Deutsch
- Verstecktes Honeypot-Feld botcheck außerhalb des sichtbaren Bereichs
- Für dieses Formular keine Express- oder Flask-Route, keine Datenbank, keine Replit Secrets und kein nodemailer
- Für fetch: Accept: application/json; Erfolg bedeutet json.success === true

Zusätzlich:
- Verstecktes Feld _lang mit dem Wert de (Sprache der Seite): Fehlermeldungen, Danke-Seite und automatische Antwort erscheinen dann auf Deutsch.
- Optional: verstecktes Feld _redirect mit der vollständigen https-Adresse deiner Danke-Seite. Ohne dieses Feld zeigt Formgong eine eigene Danke-Seite.
- Optional: <script src="https://formgong.com/fg.js" async></script> einmal pro Seite. Es setzt _lang aus <html lang> und zählt Formularansichten ohne Cookies.
- Turnstile nur einbauen, wenn ich dir einen Site Key gebe.

Minimaler Code

React-Komponente

"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: "de", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "Gesendet. Vielen Dank!" : "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut."));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Name <input name="name" placeholder="Ihr Name" required /></label>
      <label>E-Mail <input name="email" type="email" placeholder="name@beispiel.de" required /></label>
      <label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" required /></label>
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">Senden</button>
      <p role="status">{status}</p>
    </form>
  );
}

Vor dem Veröffentlichen

• Das Formular sendet an https://formgong.com/submit (action des Formulars oder URL im fetch).
• access_key enthält Ihren Schlüssel aus dem Formgong-Dashboard, nicht fk_your_access_key.
• Ein verstecktes, leeres Feld botcheck ist vorhanden.
• _lang entspricht der Sprache der Seite.
• Für das Formular wurde keine API-Route, keine Serverfunktion, keine Datenbanktabelle und kein Secret angelegt.
• Eine Test-Einsendung erscheint im Formgong-Posteingang und in Ihrem E-Mail-Postfach.

Schlüssel holen