Bootstrap-Feedback-Formular
Baue ein kompaktes Feedback-Formular mit Bootstrap 5 und ohne Backend. Floating Labels halten es klein genug für den unteren Rand einer Seite, und Antworten landen in deinem Posteingang. Kopiere das Markup und ergänze deinen Zugangsschlüssel.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere seinen Zugangsschlüssel.
- Kopiere das Markup unten in deine Seite.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und veröffentliche die Seite.
Prompt für deinen KI-Coding-Agenten
Give me a Bootstrap 5 feedback form that POSTs to https://api.formpaste.com/submit with a hidden access_key input. Use form-floating wrappers so the labels sit inside the fields, and btn btn-primary. No backend.Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.
Bootstrap-Fallstricke
Bootstrap gestaltet das Formular, Formpaste empfängt es. Richte ein normales Bootstrap-Formular auf den Formpaste-Endpunkt aus, behalte den versteckten Access Key, und Einsendungen landen in deinem Posteingang. Es gibt kein Plugin, kein jQuery und kein eigenes Backend.
Es ist ein normales Formular mit Bootstrap-Klassen
Bootstrap ändert nichts daran, wie ein Formular gesendet wird. Füge form-label, form-control und btn btn-primary zum üblichen Markup hinzu, setze die action auf den Formpaste-Endpunkt, und der Browser sendet es per POST. Bootstrap liefert nur das Styling.
Validierungsstile sind reine Präsentation
was-validated, is-invalid und invalid-feedback gestalten das Formular im Browser. Sie filtern keinen Spam und validieren serverseitig gar nichts. Formpaste wendet nach dem Post trotzdem seine eigene Spam-Filterung an.
Verwende die Bootstrap-5-Klassennamen
Bootstrap 5 hat mehrere Formular-Klassen umbenannt: form-group wurde zu mb-3, custom-select wurde zu form-select, und form-control-file wurde zu form-control. Wenn du ein älteres Bootstrap-4-Snippet kopierst, aktualisiere diese Namen, sonst greift das Styling nicht.
Behalte den versteckten access_key
Lass das versteckte access_key-Eingabefeld an Ort und Stelle, damit Formpaste weiß, zu welchem Formular die Einsendung gehört. Es ist ein normales Eingabefeld, Bootstraps Stile ignorieren es also.
Worauf es ankommt
Eine Bewertung plus ein Kommentar ist der Sweet Spot
Ein Select für den Wert und ein Textfeld für das Warum geben dir eine Zahl zum Verfolgen und den Kontext dahinter, ohne ein langes Formular.
Lass Leute anonym bleiben
Markiere Name und E-Mail als optional. Feedback ist ehrlicher, wenn es nicht an eine Identität gebunden ist, und Spam wird trotzdem automatisch gefiltert.
Leite Feedback dorthin, wo du es siehst
Leite Einsendungen an einen gemeinsamen Posteingang oder per Webhook an dein Tracking-Tool weiter, damit nichts ungelesen bleibt.
So funktioniert es
Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.
Formular erstellen
Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.
Code kopieren
Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.
<form action="https://api.formpaste.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" placeholder="you@example.com">
<label for="email">Email (optional)</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" id="message" name="message" placeholder="Your feedback" style="height: 120px" required></textarea>
<label for="message">Your feedback</label>
</div>
<button type="submit" class="btn btn-primary">Send feedback</button>
</form>
Zugangsschlüssel hinzufügen
Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Bootstrap-Feedback-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.