Mehrstufiges Bootstrap-Formular
Baue ein mehrstufiges Formular mit Bootstrap 5 und ohne Backend. Halte alle Felder in einem einzigen Formular, zeige jeweils nur einen Schritt, indem du d-none umschaltest, und poste erst am Ende. 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 und das Script 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 multi-step form that POSTs once to https://api.formpaste.com/submit with a hidden access_key input. Show one fieldset at a time by toggling d-none with a few lines of vanilla JavaScript, with Back and Next buttons using btn btn-secondary and btn btn-primary. Make Next validate the visible step with reportValidity before advancing, so a required field hidden by d-none cannot block the final submit. Do not post on every step and do not add a 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
Ein Formular, mehrere Bildschirme
Ein mehrstufiges Formular ist eine einzige Einsendung, die in der UI auf mehrere Schritte verteilt ist. Sammle alle Felder im Client-State und poste am Ende einmal.
Eine eigene Route pro Schritt ist optional
Du kannst jedem Schritt eine eigene URL geben, um den Zurück-Button zu unterstützen, oder alles auf einer Seite mit lokalem State belassen. Beide Varianten posten dieselbe finale Payload.
Poste die gesamte Payload einmal
Poste nicht bei jedem Schritt. Sammle die Felder, während der Nutzer weitergeht, und sende eine Anfrage, wenn er fertig ist.
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 id="form" action="https://api.formpaste.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<fieldset data-step>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</fieldset>
<fieldset data-step class="d-none">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
</fieldset>
<fieldset data-step class="d-none">
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4"></textarea>
</div>
</fieldset>
<button type="button" id="back" class="btn btn-secondary d-none">Back</button>
<button type="button" id="next" class="btn btn-primary">Next</button>
<button type="submit" id="send" class="btn btn-primary d-none">Submit</button>
</form>
<script>
const steps = document.querySelectorAll("[data-step]");
const back = document.getElementById("back");
const next = document.getElementById("next");
const send = document.getElementById("send");
let step = 0;
function render() {
steps.forEach((s, i) => s.classList.toggle("d-none", i !== step));
back.classList.toggle("d-none", step === 0);
next.classList.toggle("d-none", step === steps.length - 1);
send.classList.toggle("d-none", step !== steps.length - 1);
}
back.addEventListener("click", () => {
if (step === 0) return;
step--;
render();
});
next.addEventListener("click", () => {
// Validate the visible step before advancing. Hidden required fields are
// still checked at submit time, so an empty earlier step would otherwise
// block the post with no message the visitor can see.
const invalid = steps[step].querySelector(":invalid");
if (invalid) { invalid.reportValidity(); return; }
step++;
render();
});
render();
</script>
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">Mehrstufiges Bootstrap-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.