Prompt für Lovable und Bolt
Fügen Sie diesen Prompt in Lovable oder Bolt ein. Er verlangt ein Kontaktformular, das an Formgong sendet, und untersagt eine Datenbank oder einen E-Mail-Dienst.
Was Sie kopieren
Diese Vorlage ist ein Prompt für Lovable oder Bolt. Sie fügen ihn in den Chat des Builders ein. Der Builder schreibt das Formular. Formgong empfängt das Absenden.
Der Prompt nennt den Endpunkt, den öffentlichen Zugriffsschlüssel, _lang, das Honeypot und die Prüfung auf Erfolg. Er weist den Builder an, kein Backend hinzuzufügen.
Er sagt außerdem, für dieses Formular kein Resend, keine Datenbank, keine Edge Function und keine Server Action hinzuzufügen. Das sind häufige Umwege in erzeugten Anwendungen.
Der zusätzliche Block ist einfaches HTML, das zum Prompt passt. Nutzen Sie ihn, wenn Sie das Markup lieber selbst einfügen, statt den Builder zu bitten, es zu schreiben.
Längere Anleitungen, die sich an ein bestimmtes Werkzeug richten, gibt es bereits für Lovable und für Bolt. Diese Seite ist der kurze Prompt. Jene Seiten erklären die Klicks rund um den Prompt.
Was Sie in der Änderung prüfen
Das Formular soll an /submit auf dem Formgong-Ursprung senden. Sehen Sie eine neue Tabelle, ein Geheimnis oder ein SDK für E-Mail, bitten Sie den Builder, das zu entfernen.
Der Zugriffsschlüssel im Prompt lautet fk_your_access_key, bis Sie ein Formular anlegen. Ersetzen Sie ihn, oder nutzen Sie die Schaltfläche auf dieser Seite, während Sie angemeldet sind.
Die Feldnamen sollen name, email und message bleiben, phone ist optional. Telegram setzt diese Namen fett. Ein umbenanntes Feld lässt sich schlechter überfliegen.
botcheck muss vorhanden, leer und verborgen sein. Wenn der Builder es als ungenutzt löscht, setzen Sie es wieder ein. Es ist das Honeypot.
Fetch soll Accept: application/json senden. Ein JSON-Body braucht außerdem Content-Type: application/json. FormData soll diesen Header nicht setzen.
Der Prompt sagt, Turnstile wegzulassen, solange Sie keinen Site-Key mitgeben. Lassen Sie den Builder keinen Schlüssel erfinden.
Der Prompt sagt, für das Formular keine Schrift eines Drittanbieters zu laden. Wenn die Anwendung bereits eine Schrift hat, kann das Formular sie erben.
Wenn der Builder fertig ist
Veröffentlichen Sie die Seite, oder nutzen Sie die Vorschau des Builders, wenn sie das Internet erreicht, und senden Sie einen Test. Öffnen Sie danach den Posteingang von Formgong.
Verbinden Sie Telegram in den Formulareinstellungen, wenn die Zustellung sofort erfolgen soll. Im Free-Tarif ist die E-Mail eine tägliche Übersicht.
Der Free-Tarif behält 300 Einsendungen im Monat für 30 Tage, und die Speicherung liegt in der EU. Spam wird gespeichert und nicht zugestellt, und er zählt nicht mit.
Einstellungen wie Empfänger und Telegram liegen in Formgong. Sie können sie ändern, ohne den Builder zu bitten, das Formular neu zu erzeugen.
Formgong ist der Betreiber. Wenn sich das Produkt falsch verhält, schreiben Sie an support@formgong.com. Das Konto beim Builder ist ein eigener Weg zum Support.
Vorschau
Formularcode
Fügen Sie diesem Projekt ein Kontaktformular hinzu. Einsendungen gehen an Formgong. Fügen Sie keine Datenbank, keine Edge Function, keine Server Action und keinen E-Mail-Dienst wie Resend hinzu.
Vorgaben:
- Ein einfaches Formular darf action="https://formgong.com/submit" und method="POST" nutzen. Mit JavaScript senden Sie dieselben Felder per fetch an https://formgong.com/submit.
- Verstecktes Feld name="access_key" value="fk_your_access_key". Der Schlüssel ist öffentlich. Lassen Sie ihn im Frontend. Verschieben Sie ihn nicht in ein Secret.
- Verstecktes Feld name="_lang" value="{lang}". Formgong nutzt es für die Danke-Seite und den Fehlertext. Auf einer mehrsprachigen Website die Sprache der Seite einsetzen.
- Felder: name, email mit type="email" und message. Alle drei sind Pflicht. phone ist optional. Die Feldnamen bleiben so. Telegram setzt jeden Namen fett über die Antwort.
- Honeypot: ein Feld type="text" name="botcheck" tabindex="-1" autocomplete="off" in einem Wrapper mit aria-hidden="true". Per CSS verbergen: position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%). Nie ausfüllen.
- Erfolg bei fetch: Header Accept: application/json. Für einen JSON-Body auch Content-Type: application/json. Für FormData kein Content-Type setzen. Ist success im JSON true, kurzen Dank zeigen und das Formular leeren. Sonst die Meldung aus der Antwort zeigen.
- Turnstile nur mit einem Site-Key: script src="https://challenges.cloudflare.com/turnstile/v0/api.js" und ein div mit class="cf-turnstile" und data-sitekey. Sonst weglassen.
- Keine Schrift von Dritten laden. Keine Datei-Uploads.
- Ursprung des Endpunkts: https://formgong.com.Einfaches HTML, das der Prompt verlangt
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <label>Name <input type="text" name="name" autocomplete="name" required></label> <label>E-Mail <input type="email" name="email" autocomplete="email" required></label> <label>Telefon <input type="tel" name="phone" autocomplete="tel"></label> <label>Nachricht <textarea name="message" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="de"></div> --> <button type="submit">Senden</button> </form>
Fragen und Antworten
Funktioniert dieser Prompt sowohl in Lovable als auch in Bolt?
Ja. Er hängt nicht von einem bestimmten Aufbau der Dateien ab. Wenn der Builder React, Vue oder einfaches HTML wählt, gelten derselbe Endpunkt und dieselben Felder.
Der Builder hat Supabase oder Resend hinzugefügt. Was nun?
Bitten Sie ihn, diesen Code zu löschen und nur das Absenden an Formgong zu behalten. Die verlinkten Anleitungen zu Lovable und Bolt beschreiben dieselbe Korrektur ausführlicher.
Ist der Zugriffsschlüssel im Prompt unbedenklich?
Es ist ein öffentlicher Schlüssel. Jede Person kann damit eine Einsendung schicken. Den Posteingang lesen oder ändern, wohin die Post geht, kann man damit nicht.
Wo stehen die längeren Anleitungen?
Auf den Seiten für Lovable und Bolt im Bereich Für, von dieser Seite aus verlinkt. Diese Vorlage ist der Prompt selbst und kein Ersatz für jene Anleitungen.