Öffentliche (externe) Formulare

Ein Formular ist extern, wenn sein Formulartyp bei der Erstellung auf „External" gesetzt wurde. Sie können ein Formular danach nicht mehr zwischen extern und intern wechseln, siehe Ein Formular erstellen.

Die URLs, die Flexie Ihnen gibt

Jedes externe Formular hat eine eindeutige Kennung und einen kleinen Satz daraus aufgebauter URLs. Sie finden diese auf der Ansichtsseite des Formulars (/forms/view/{id}):

URL	Was es ist
`/form/{identifier}`	Die öffentliche Formularseite. Öffnen Sie diese in einem beliebigen Browser, und Sie sehen das ausfüllbereite Formular.
`/form/push/{identifier}`	Der Submit-Endpunkt. Das Formular postet hierhin, wenn Sie auf Absenden klicken.
`/form/upload/{identifier}`	Der Datei-Upload-Endpunkt. Wird intern genutzt, wenn jemand in einem Datei-Upload-Feld Dateien auswählt.
`/form/attachment/{hash}`	Der Download-Endpunkt. Öffnet eine zuvor hochgeladene Datei.
`/load-form.js?idf={identifier}`	Das Embed-Skript, siehe Einbetten weiter unten.

Sie müssen keine dieser URLs direkt verwenden, sie sind alle miteinander verdrahtet. Die beiden, die Sie weitergeben, sind die öffentliche Formularseite (um Leute direkt dorthin zu schicken) und das Embed-Snippet (um das Formular auf Ihre eigene Website zu setzen).

Das Formular auf Ihrer Website einbetten

Das Embed-Snippet ist eine einzige Zeile. Öffnen Sie Ihr Formular, kopieren Sie den Embed-Code und fügen Sie ihn dort ein, wo das Formular erscheinen soll:

<script src="https://your-flexie/load-form.js?idf=<your-form-identifier>"></script>

Was passiert, wenn der Browser eines Besuchers auf eine Seite mit diesem Snippet trifft:

Das Skript wird von Ihrer Flexie-Instanz heruntergeladen.
Es erstellt an dieser Stelle einen Platzhalter <div id="ff-{identifier}">.
Es lädt die Struktur des Formulars und rendert das Formular in diesen Platzhalter.
Wenn der Nutzer absendet, postet das Formular an /form/push/{identifier} auf Ihrem Flexie-Host.

Sie können das Snippet überall auf Ihrer Seite platzieren: im Header, in der Seitenleiste, inline in einem Artikel. Es beeinflusst das übrige Seitenlayout nicht, abgesehen davon, dass es seinen eigenen Container einfügt.

Wenn Ihre Website auf einer anderen Domain liegt als Ihre Flexie-Instanz, werden sowohl die normale <script src>-Anfrage des Embed-Snippets als auch dessen Formularübermittlung von Browsern ohne zusätzliche Einrichtung erlaubt, es ist keine CORS-Konfiguration nötig. CORS ist nur dann relevant, wenn Ihr JavaScript direkt an die Submit-URL postet, was das Embed-Snippet nicht tut.

Gestaltung

Das Formular wird mit einer Standardgestaltung ausgeliefert, die auf den meisten Websites funktioniert. So gestalten Sie es um:

Verwenden Sie die Akzentfarbe in den Formulareinstellungen, damit es zu Ihrer Marke passt.
Fügen Sie in den Formulareinstellungen einen Block Custom JavaScript hinzu, um gekapseltes CSS einzuschleusen oder sich in Formular-Events einzuklinken.

Wenn Sie ein völlig eigenes Design brauchen, bauen Sie das Formular auf Ihrer eigenen Seite und posten Sie aus Ihrem Code direkt an /form/push/{identifier}, dann sind Sie allerdings selbst für die clientseitige Validierung zuständig.

Was das öffentliche Formular beim Absenden tut

Wenn ein Besucher auf Absenden klickt:

Das Formular validiert die Eingaben im Browser (Pflichtfeld, E-Mail-Format).
Falls ein reCAPTCHA konfiguriert ist, wird ein Score abgerufen.
Das Formular postet die JSON-Payload und etwaige Anhänge an /form/push/{identifier}.
Flexie speichert die Einsendung, führt Ihren Workflow aus und wartet bis zu 20 Sekunden darauf, dass der Workflow eine Antwort erzeugt, sofern eine angefordert wird. Antwortet der Workflow nicht, wird die Standardantwort des Formulars verwendet (die Einstellungen, Verhalten nach dem Absenden).
Der Absender sieht die Antwort: eine Nachricht, die Sie verfasst haben, eine Weiterleitung zu einer URL oder eine vom Workflow berechnete eigene Antwort (siehe Eine eigene Antwort schreiben).

Der Workflow-Listener, der bei einem externen Formular auslöst, ist virtual_workflow.form_submit, und die Feldwerte der Einsendung erscheinen in Ihren Workflow-Schritten als {{ __data.form_submission.<field key> }}. Siehe Formulare in Workflows.

Spamschutz, Google reCAPTCHA v3

Externe Formulare können Google reCAPTCHA v3 nutzen, um missbräuchliche Einsendungen herauszufiltern. v3 ist unsichtbar: Es gibt keine Checkbox und kein Bildrätsel. Es bewertet jede Einsendung von 0.0 (mit hoher Wahrscheinlichkeit ein Bot) bis 1.0 (mit hoher Wahrscheinlichkeit ein Mensch), und Flexie weist alles unter 0.7 zurück.

So aktivieren Sie es

Besorgen Sie sich einen reCAPTCHA-v3-Site-Key und einen Secret-Key von Google (https://www.google.com/recaptcha/admin). Wählen Sie reCAPTCHA v3 (nicht v2) und registrieren Sie die Domain(s), auf denen Sie das Formular einbetten, einschließlich Ihres Flexie-Hosts, falls Besucher das Formular unter /form/{identifier} sehen.
Öffnen Sie die Einstellungen des Formulars.
Schalten Sie Add Google reCAPTCHA ein.
Fügen Sie den Site-Key und den Secret-Key ein.
Speichern und veröffentlichen Sie das Formular erneut.

Ab diesem Zeitpunkt wird jede Einsendung bewertet, bevor der Workflow läuft. Einsendungen unterhalb des Schwellenwerts werden mit einer Fehlerantwort zurückgewiesen und lösen den Workflow nie aus.

Wenn reCAPTCHA nicht ausreicht

Es bewertet automatisierte Einsendungen, es stoppt keinen echten Menschen, der Unsinn einträgt.
Es benötigt JavaScript und hilft daher nicht gegen Headless-Einsendungen direkt an /form/push/{identifier}.
Für risikoreiche Formulare (alles, was automatisch einen Datensatz mit Rechten anlegt oder kostenpflichtige Aktionen auslöst) kombinieren Sie reCAPTCHA mit Prüfungen auf Workflow-Seite. Prüfen Sie zum Beispiel, ob die eingereichte E-Mail auf einer bekannten Sperrliste steht, bevor Sie den Lead anlegen.

Datei-Uploads, erlaubte Typen und Limits

Wenn ein Datei-Upload-Feld auf Ihrem Formular ist, wählt der Nutzer Datei(en) aus, die beim Absenden an Flexie übertragen werden.

Erlaubte Dateitypen

Die Standard-Erlaubnisliste umfasst, grob gesagt, Office-Dokumente, gängige Bilder und Text:

Dokumente: pdf, doc, docx, xls, xlsx, ppt, pptx, txt, csv
Bilder: jpg, jpeg, png, gif
(Plus eine Handvoll weiterer, Ihr Administrator kann die genaue Liste für Ihr Konto bestätigen.)

Dateien außerhalb der Erlaubnisliste werden beim Upload zurückgewiesen, mit einer Fehlermeldung an den Absender.

Mehrere Dateien

Ein Datei-Upload-Feld kann über die Feldeinstellungen auf eine einzelne Datei oder mehrere Dateien gesetzt werden, siehe Ein Formular erstellen. Bei mehreren Dateien kann der Nutzer so viele anhängen, wie es das Gesamt-Größenbudget des Formulars zulässt.

Bildoptimierung

Wenn beim Formular Optimise uploaded images aktiviert ist, werden Bildanhänge (jpg / jpeg / png / gif) beim Upload in ein kleineres, webfreundliches Format umgewandelt. Das spart Speicher und beschleunigt Downloads. Der ursprüngliche Dateiname bleibt im Einsendungsdatensatz erhalten, nur das Speicherformat ändert sich.

Größenlimits

Größenlimits pro Datei und pro Formular werden von Ihrem Konto-Administrator festgelegt und letztlich durch Ihre Hosting-Konfiguration begrenzt. Wenn Sie sehr große Dateien annehmen müssen (z. B. mehrere GB große Videos), bitten Sie Ihren Administrator, Ihr aktuelles Limit zu bestätigen. Die meisten Konten nutzen den Standard „moderate Dokumente und Bilder".

Analytics

Fügen Sie in den Einstellungen des Formulars Tracking-IDs hinzu, um bei jedem Absenden Events auszulösen:

Google-Analytics-Tracking-ID, sendet ein Form-Submit-Event, sobald jemand erfolgreich absendet. Setzen Sie IP anonymisieren, wenn GA das letzte Oktett der IP des Besuchers verwerfen soll (DSGVO-Best-Practice).
Facebook-Pixel-ID, löst ein Lead-Event aus, sobald jemand absendet, sodass die Conversion in Ihrem Meta-Ads-Dashboard erscheint.

Beide sind optional und voneinander unabhängig.

DSGVO und Rechtsgrundlage

Externe Formulare müssen eine Rechtsgrundlage für die Verarbeitung der erhobenen Daten angeben. Sie wählen diese in den Einstellungen des Formulars. Zu den Optionen gehören Einwilligung, Vertrag, rechtliche Verpflichtung, lebenswichtige Interessen, öffentliche Aufgabe, berechtigte Interessen und vorvertragliche Maßnahmen. Die gewählte Grundlage wird mit jeder Einsendung festgehalten.

Für einwilligungsbasierte Formulare fügen Sie dem Formular selbst einen Feldtyp DSGVO-Einwilligung hinzu (siehe Ein Formular erstellen) und koppeln Sie den Absenden-Button daran, dass dieses Feld angehakt ist.

Private externe Formulare (signierte URLs)

Wenn ein Formular nur über einen zeitlich begrenzten, signierten Link erreichbar sein soll (zum Beispiel haben Sie einer bestimmten Person ein Formular „Aktualisieren Sie Ihre Daten" gemailt, das nach 7 Tagen ablaufen soll):

Markieren Sie das Formular in seinen Einstellungen als privat.
Erzeugen Sie signierte URLs mit signUrl(...) in einem Flexie-Scripting-Ausdruck. Zum Beispiel in einer E-Mail-Vorlage:
```
{% set link = signUrl("https://your-flexie/form/" ~ alias, 168) %}
<a href="{{ link }}">Update your details</a>
```
(168 = 7 × 24 Stunden.)

Ein privates Formular weist jeden Aufruf zurück, der keine gültige, noch nicht abgelaufene Signatur in der URL trägt.

Was bei jeder öffentlichen Einsendung gespeichert wird

Jede öffentliche Einsendung schreibt einen Datensatz, der Folgendes enthält:

Das Formular, zu dem sie gehört
Die eingereichten Werte (als JSON)
Etwaige hochgeladene Anhänge (deren gespeicherte URL und den ursprünglichen Dateinamen)
Die IP-Adresse des Absenders sowie ein daraus automatisch abgeleitetes Land, Region, Stadt, ISP / Organisation
Den User-Agent des Absenders (welchen Browser er verwendet hat)
Den exakten Zeitstempel der Einsendung

Sie sehen diese auf der Seite Submissions des Formulars (/forms/external/submissions/{formId}), siehe Einsendungen.

Schnelle Checkliste vor dem Live-Gang

Das Formular ist veröffentlicht.
Die reCAPTCHA-Keys sind eingetragen (für jedes Formular, das echten öffentlichen Verkehr annimmt).
Das Formular wurde mindestens einmal als Test abgesendet.
Der Workflow, der beim Absenden auslöst, ist veröffentlicht und wurde mit einer echten Einsendung getestet.
Die Standard-Nachricht oder -Weiterleitung nach dem Absenden ist sinnvoll für den Fall, dass der Workflow sie nicht überschreibt.
Die Analytics-Tracking-IDs sind eingetragen (wenn Sie das Conversion-Tracking beim Absenden wollen).
Die Rechtsgrundlage ist gesetzt.

Nächste Schritte

Einsendungen: ansehen, was hereingekommen ist.
Formulare in Workflows: die Einsendung eine Automatisierung antreiben lassen, mit einer eigenen Antwort.
Interne Formulare: die andere Art von Formular.