Bootstrap-Registrierungsformular
Baue ein Registrierungsformular mit Bootstrap 5 und ohne Backend. Ordne die Felder in einem zweispaltigen Grid an, das auf Mobilgeräten stapelt, und Anmeldungen 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 registration form that POSTs to https://api.formpaste.com/submit with a hidden access_key input. Use a row with col-md-6 columns, mb-3, form-label, form-control, form-text and btn btn-primary. Rely on native browser validation rather than Bootstrap's custom validation script. No jQuery, 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
Formpaste ist ein Formular-Backend, kein Auth-Anbieter
Ein Registrierungsformular sammelt Angaben und schickt sie dir per E-Mail oder leitet sie an dein System weiter. Es erstellt keine Login-Konten und speichert keine Passwörter. Für echte Authentifizierung verbindest du die Einsendung mit deinem Auth-Tool und behandelst das Formular niemals als Speicherort für Zugangsdaten.
Verschicke niemals Passwörter im Klartext per E-Mail
Wenn du hier ein Passwort erfasst, leite die Einsendung per Webhook an deinen eigenen Registrierungs-Endpunkt weiter, statt sie in einem Posteingang landen zu lassen. Noch besser: Erfasse nur die Angaben, die du brauchst, und lass dein Auth-Tool das Passwort setzen.
Validiere auch clientseitig
Gleiche die beiden Passwortfelder ab und verlange im Browser ein gültiges E-Mail-Format, damit Fehler vor dem Absenden auffallen. Formpaste filtert Spam trotzdem serverseitig.
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="row">
<div class="col-md-6 mb-3">
<label for="first" class="form-label">First name</label>
<input type="text" class="form-control" id="first" name="first_name" required>
</div>
<div class="col-md-6 mb-3">
<label for="last" class="form-label">Last name</label>
<input type="text" class="form-control" id="last" name="last_name" required>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
<div class="form-text">We will only use this to confirm your account.</div>
</div>
<button type="submit" class="btn btn-primary">Create account</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-Registrierungsformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.