Bootstrap-Datei-Upload-Formular
Baue ein Datei-Upload-Formular mit Bootstrap 5 und ohne eigene Upload-API. Bootstrap 5 gestaltet Datei-Inputs mit derselben form-control-Klasse wie alle anderen Felder, und die Datei geht direkt an Formpaste. 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.
- Verbinde Storage im Dashboard, damit das Formular Uploads annehmen kann.
- Kopiere das Markup unten, ergänze deinen Zugangsschlüssel und veröffentliche die Seite.
Prompt für deinen KI-Coding-Agenten
Give me a Bootstrap 5 file upload form that POSTs multipart/form-data to https://api.formpaste.com/submit with a hidden access_key input. Use form-label, form-control on the file input, form-text for the hint, and btn btn-primary. Do not build an upload endpoint of my own.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 Datei bedeutet multipart, nicht urlencoded
Sobald das Formular ein Datei-Feld enthält, muss es multipart Formulardaten senden. Der generierte Code setzt enctype und schickt das rohe FormData, sodass die Datei zusammen mit den anderen Feldern mitläuft. Du brauchst keinen eigenen Upload-Endpunkt.
Der Upload geht direkt vom Client zu Formpaste
Der Browser sendet die Datei direkt an Formpaste, sodass deine App den Upload nie puffert oder parst. Damit umgehst du Größen- und Laufzeitlimits von serverlosen Umgebungen komplett.
Setz klare Erwartungen bei Größe und Typ
Sag den Leuten, was du akzeptierst. Datei-Uploads sind ein Pro-Feature; verbinde zuerst Storage im Dashboard und halte das Feld ehrlich, was akzeptierte Typen und Größe angeht.
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" enctype="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="file" class="form-label">Attachment</label>
<input type="file" class="form-control" id="file" name="file">
<div class="form-text">PDF or image, up to 10 MB.</div>
</div>
<button type="submit" class="btn btn-primary">Upload</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-Datei-Upload-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.