Bootstrap-Umfrageformular
Baue ein Umfrageformular mit Bootstrap 5 und ohne Backend. Verwende form-select-Dropdowns für die schnellen Antworten und eine Textarea für die offene Frage, 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 und bearbeite die Optionen.
- 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 survey form that POSTs to https://api.formpaste.com/submit with a hidden access_key input. Use form-select dropdowns for the fixed-choice questions, a form-control textarea for the open one, 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
Kurz halten für eine hohe Abschlussquote
Jede zusätzliche Frage kostet Antworten. Ein paar Dropdowns und ein offenes Kommentarfeld liefern meist alles, was du brauchst, ohne Ermüdung.
Dropdowns schlagen Freitext bei der Auswertung
Feste Auswahlmöglichkeiten (Select-Felder) lassen sich später leicht auszählen. Heb dir das Textfeld für die eine offene Frage auf, die es wirklich braucht.
Mach die E-Mail optional für ehrliche Antworten
Anonyme Antworten sind oft ehrlicher. Frag nur nach der E-Mail, wenn du nachfassen musst, und markiere sie als optional.
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="mb-3">
<label for="rating" class="form-label">How would you rate us?</label>
<select class="form-select" id="rating" name="rating" required>
<option value="">Choose one</option>
<option>Very good</option>
<option>Good</option>
<option>Not great</option>
</select>
</div>
<div class="mb-3">
<label for="found" class="form-label">Did you find what you needed?</label>
<select class="form-select" id="found" name="found" required>
<option value="">Choose one</option>
<option>Yes</option>
<option>Partly</option>
<option>No</option>
</select>
</div>
<div class="mb-3">
<label for="comments" class="form-label">Anything else?</label>
<textarea class="form-control" id="comments" name="comments" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</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-Umfrageformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.