Formular in Base44

Base44 kann Formulardaten in eigenen Entities speichern und E-Mails über eine eingebaute Integration senden. Mit Formgong sendet die Seite die Anfrage direkt an das Formular-Backend; E-Mail, Telegram, Spamfilter und CSV-Export sind schon eingerichtet.

1. Holen Sie sich auf der Startseite einen Zugriffsschlüssel.
2. Fügen Sie den Prompt in den Base44-Chat ein.
3. Prüfen Sie, dass das Formular an /submit sendet und keine Entity dafür angelegt wurde.
4. Senden Sie eine Test-Einsendung aus der veröffentlichten App.

Prompt

Füge der App ein Kontaktformular hinzu. Die Seite sendet die Daten direkt an Formgong.
- POST an https://formgong.com/submit
- Verstecktes Feld access_key: fk_your_access_key (der Schlüssel ist öffentlich)
- Felder name, email, message; Beschriftungen auf Deutsch
- Verstecktes Honeypot-Feld botcheck
- Lege keine Entity für Einsendungen an und nutze nicht die eingebaute E-Mail-Integration
- 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