Client-Script.
Ein Script-Tag macht aus jedem einfachen HTML-Formular der Seite ein AJAX-Formular: Es verschickt per fetch, zeigt eine Statusmeldung, löst die ALTCHA-Challenge, reicht Captcha-Tokens und Dateien durch und folgt deiner Weiterleitung. Ohne Abhängigkeiten, ohne Bundler, ohne zweiten fremden Host.
Einbinden
Die Version steht in der URL. Eine künftige inkompatible Version erscheint als /client/v2/script.js, eine auf v1 festgelegte Seite funktioniert also unverändert weiter.
Das Script übernimmt jedes Formular, dessen action auf einen Mailan-Submit-Endpunkt zeigt — es gibt nichts zu initialisieren, und später eingefügte Formulare sind ebenfalls abgedeckt.
Attribute am Formular
| Attribut | Wirkung |
|---|---|
data-mailan="off" |
Dieses eine Formular ausnehmen; es sendet wieder klassisch. |
data-mailan-altcha |
Vor dem Senden eine ALTCHA-Challenge holen und lösen. |
data-mailan-success |
Text, der nach erfolgreicher Einsendung erscheint. |
data-mailan-error |
Ersatztext, wenn die Anfrage fehlgeschlagen ist. |
data-mailan-state |
Vom Script gesetzt: „sending", „success" oder „error". Damit gestalten. |
Ein Element mit data-mailan-message im Formular bekommt den Statustext. Fehlt es, hängt das Script selbst einen Absatz an — auch ein Formular ohne passendes Markup gibt also Rückmeldung.
Events
Drei Events steigen vom Formular auf, jeweils mit der geparsten Antwort oder dem Fehler in detail. Das ist der Einstieg für eigenes Tracking, eine eigene Animation oder einen Dialog.
Upload-Widget
Ein Datei-Feld mit data-mailan-uploader bekommt eine Ablagefläche mit Dateiliste und Entfernen-Schaltflächen. Typ, Anzahl und Größe werden im Browser geprüft, bevor etwas verschickt wird — verbindlich bleibt das Limit des Servers.
| Attribut | Wirkung |
|---|---|
accept |
Erlaubte Typen: Endungen, MIME-Typen, Platzhalter wie image/*. |
data-max-files |
Höchstzahl an Dateien. Über 1 wird das Feld zu multiple. |
data-max-file-size |
Größe je Datei, z. B. „5MB", „500kb" oder eine Byte-Zahl. |
data-mailan-prompt |
Text in der Ablagefläche. |
data-mailan-remove-label |
Beschriftung der Entfernen-Schaltfläche. |
Eine abgelehnte Datei löst mailan:upload-rejected mit der Begründung aus — du kannst sie also dort anzeigen, wo es in dein Design passt.
Was es von selbst erledigt
- Ohne Upload sendet es urlencoded statt multipart — kleiner, und die Captcha-Prüfung sieht die Felder.
- Es sperrt die Absende-Schaltflächen während der Anfrage und gibt sie danach wieder frei.
- Ein redirect-Feld nimmt es aus den Daten und navigiert selbst dorthin, weil fetch einen 303 auf eine fremde Herkunft nicht lesen kann.
- Ein vorhandenes, aber ungelöstes Captcha-Widget stoppt die Einsendung mit einer Meldung statt mit einer fehlgeschlagenen Anfrage.
- Nach Erfolg wird das Formular zurückgesetzt — eine zweite Nachricht wiederholt also nicht die erste.