Einleitung

Warum ein Guide?

Nach unserem Beitrag im Forum "How to use Webflow in Germany" und der dortigen Aussage, für eine höhere DSGVO Konformität nicht die Webflow Formulare zu nutzen, erreichen uns bis heute Fragen zu Alternativen für dieses Thema. In der deutschen Webflow Community Gruppe auf Facebook und auf Discord haben wir schon häufiger "unsere" Lösung für das Problem - das Form Skript von Tectite - empfohlen.

Wie so oft ist die Hürde, sich in solch ein Tool und die erforderlichen Maßnahmen einzuarbeiten, keine Kleine.

Mit diesem Guide wollen wir der gesamten Webflow Community dabei helfen, unabhängig davon ob die DSGVO / GDPR eine entscheidende Rolle spielt oder nicht, wie man Schritt für Schritt einen mächtigen, sicheren und flexiblen Form Processor in einem Projekt einbindet.

Wichtige Information vorab: Dieser Guide ist für die Low-Code Community geschrieben und beinhaltet daher Schritt für Schritt Anweisungen, welchen Code man wie wo in seinem Webflow Projekt einfügt. Wenn du mit Custom Code versiert bist, wird der Guide für dich definitiv leichter verständlich sein.

Solltest du Probleme oder Fragen haben, die dir nicht im FAQ beantwortet werden, schreibe gerne einen Kommentar im Forums Beitrag zum Guide:

Webflow Forum
[GUIDE] Custom and self-hosted form processor for all kinds of forms [EN/DE]

Lass uns loslegen!

Was ist ein Form Prozessor?

Vereinfacht ausgedrückt ist ein Form Prozessor dafür zuständig, vom Nutzer eingetragene Informationen in Input Feldern (wie zum Beispiel in einem Kontaktformular) digital weiterzuverarbeiten. Die Verarbeitung kann dazu dienen, Datenbanken automatisiert mit den eingetragenen Inhalten zu befüllen oder daraus E-Mails zu generieren, die an einen gewünschten Empfänger gesendet werden. Letzteres werden wir dir in diesem Guide näher bringen.

Warum du einen Custom Form Prozessor nutzen solltest

  1. Flexibilität

    Ein Formprozessor funktioniert in der Regel unabhängig von dem Formular bzw. der Website, über die der Prozessor angesteuert wird. Du kannst also wie gewohnt deine Formulare in einem Webflow Projekt oder einer statischen Website außerhalb von Webflow nutzen.

  2. Individualität

    Entscheide selbst, in welcher Form und Darstellung die Daten der Nutzer über das Formular an die Empfänger deiner Wahl gesendet werden.

  3. Datenschutzrechtliche Sicherheit

    Minimiere Angriffspunkte gegenüber der DSGVO Konformität deiner Website.

Warum Tectite

Tectite gibt es seit 2002 und wird auch heute noch weiterentwickelt (zugegeben, die Website sieht nicht danach aus). Russell Robinson ist ein Veteran in der Softwareentwicklung und hat Tectite entwickelt, um eine sichere und SPAM-freie Ausführung von Kontaktformularen zu gewährleisten. Und der wohl wichtigste Grund (warum du wahrscheinlich auch hier bist): Er bietet es völlig kostenlos an. Hier einmal die Vorzüge des Tectite Form Skripts zusammengefasst:

  1. Kostenfrei

    Das PHP Skript von Tectite ist komplett kostenfrei. Ohne Spaß, wirklich 100% kostenfrei.

  2. Keine Software as a Service! Standalone Lösung für eigenes Hosting

    Keine maximale Anzahl an gesendeten E-Mails pro Monat. Kein Tool, das neben der Website gesteuert und bezahlt werden muss. Keine Abhängigkeit gegenüber einem externen Anbieter.

  3. Datenschutzrechtlich unbedenklich

    Es findet keine (Zwischen-)Speicherung von potenziell sensiblen Daten der Nutzer bei einem externen Anbieter statt (die Möglichkeit gibt es allerdings). Das Form Skript wandelt die erhaltenen Daten direkt in eine E-Mail um und versendet diese.

  4. Spamschutz als oberste Priorität

    Tectite's Form Skript verhindert das Crawlen von E-Mail Adressen der Empfänger durch Bots über eine offensichtliche Verschleierung der E-Mail Adresse.

  5. Datei Upload

    Während du bei Webflow erst ab dem Business Siteplan die Möglichkeit bekommst, dass die Nutzer einer Website Dateien via Formularen versenden können, kannst du das mit Tectite's Form Skript ohne jegliche Kosten.

  6. Großartig dokumentiert

    Tectite's Skript stellt für nahezu jede Zeile & Funktion eine entsprechende Dokumentation auf deren Website zu Verfügung.

Voraussetzungen

Rahmenbedingungen, die erfüllt sein sollten:

  1. Server, auf dem PHP ausgeführt werden kann, wird benötigt.

    Das Form Skript ist in PHP geschrieben und wird ausschließlich serverseitig ausgeführt. Der Zugriff auf eine Umgebung, in der PHP Code ausgeführt werden kann, ist daher unerlässlich.

    In der Regel wird auf jedem Server PHP ausgeführt, der zu einem Hostingpaket eines Hosters deiner Wahl dazugehört.

  2. SSL Zertifikat für die Domain des Servers muss vorhanden sein

    Da über das Skript personenbezogene Daten verarbeitet werden, muss laut § 13 Abs. 7 TMG eine verschlüsselte Datenübertragung durch ein SSL Zertifikat gewährleistet werden.

  3. Serverzugriff

    Der Zugriff auf den Server via FTP oder Terminal muss vorhanden sein, damit die notwendigen Datein auch abgelegt werden können.

    Achtung: Wenn du beabsichtigst, das Webflow Projekt mit Webflow zu hosten, kann der Webspace deiner Domain nicht mehr verwendet werden. Lege in diesem Fall zum Beispiel eine Subdomain "assets.kundendomain.de" beim Hoster an und nutze den zu dieser Domain gehöhrenden Webspace für die Ablage der PHP Datei. Die vorherigen Punkte 1 & 2 müssen ebenfalls erfüllt sein.

    Sofern dein Hoster keine eigene webbasierte FTP Lösung anbietet oder du lieber ein klassisches Programm verwenden möchtest, empfehlen wir dir folgende:

  4. E-Mail Template als Basis für die versendeten E-Mails

    Für die Darstellung der übermittelten Informationen in einer responsiven E-Mail empfehlen wir die Entwicklung oder die Nutzung eines kostenfreien E-Mail Templates. Nachfolgend einige Empfehlungen:

    Wir werden in diesem Guide das E-Mail Template 1 verwenden. Du bist allerdings vollkommen frei in der Wahl, welches E-Mail Template du verwendet, solang es auf HTML basiert.

  5. Download Tectite's PHP Form Skript

    Lade das Skript von Tectite's Website (tectite.com) herunter. Da es schon öfter vorgekommen ist, dass Tectite's Website nicht aufrufbar war, haben wir das Skript bei uns auf dem Server als ZIP Datei zum Download hochgeladen. Hier kannst du die ZIP Datei herunterladen.

  6. Code Editor

    Wir empfehlen für die Bearbeitung des PHP Skripts und des E-Mail Templates einen Code Editor zu nutzen. Nachfolgend einige Empfehlungen unsererseits:

Guide zur Implementierung

Inhalt & Ziel des Guides

Es gibt unzählige Varianten, Formen, Möglichkeiten und Zwecke, wie du Daten über ein Formular verarbeitest. Unser Ziel für diesen Guide ist dir zu erläutern, wie du über das Tectite Form Skript, das du auf einem eigenen Server hostest, eine eigens gestaltete HTML E-Mail mit den Daten aus einem "klassischen" Anfrage- bzw. Kontaktformular sicher an den entsprechenden Empfänger sendest und den Nutzer entsprechend bei Erfolg oder Misserfolg des Versands weiterleitest.

Wenn die o.g. Voraussetzungen erfüllt sind, lass uns loslegen.

Schritt 1

Google ReCaptcha V2 einrichten

Da wir einen der 2 Schlüssel für die Anpassung des Tectite Form Skripts benötigen, die man nach der Einrichtung eines Google ReCaptchas bekommt, beginnen wir damit. Registriere oder melde dich zunächst in dem Google ReCaptcha Dashboard an:

  1. Im Dashboard einloggen

    Registriere oder melde dich zunächst in dem Google ReCaptcha Dashboard an: Google ReCaptcha

    Hinweis: Lass dich nicht davon irritieren, dass Google nur noch ReCaptcha V3  bewirbt. Über das V3 Dashboard kannst du ebenso einen V2 ReCaptcha registrieren.

  2. Registriere einen neuen ReCaptcha V2

    Registriere einen neuen ReCaptcha V2 unter Angabe eines internen Namens, den du selbst wählst.

    Achtung: Um dir Frust und ggf. spätere Arbeit zu sparen, gib bei "Domains" direkt die Entwicklungsumgebung (Beispiel: "deinewebsite.webflow.io") UND auch die Hauptdomain (Beispiel: "vibranddesign.com") an, auf der deine Website später den Nutzern zugänglich gemacht wird. Damit gehst du sicher, dass ReCaptcha auch während der Entwicklung funktioniert.

  3. Website-Schlüssel und Geheim-Schlüssel speichern

    Nach der Registrierung deines ReCaptchas erhältst du 2 Schlüssel (Website-Schlüssel und Geheim-Schlüssel). Speichere dir diese ab (du wirst sie beide benötigen) oder lasse die Seite geöffnet.

Schritt 2

Tectite Form Skript anpassen

Wir beginnen mit der Anpassung des Tectite Form Skripts "formmail.php".
Nachfolgend gehen wir auf alle Inhalte des Skripts ein, die wir für unser Formular anpassen bzw. hinzufügen müssen. Keine Sorge, wenn du keine Ahnung von PHP hast. Wir führen dich hier Schritt für Schritt durch.

Hinweis: Wir arbeiten mit der Tectite Skript Version 9.25 vom 25.09.2021. Solltest mit einer zukünftigen Version arbeiten, kann es durchaus sein, dass durch neue und angepasste Inhalte im Skript die Zeilennummern nicht mit unserem Guide übereinstimmen. Dennoch werden sich höchstwahrscheinlich die anzugebenen Inhalte nicht grundlegend verändern, sondern lediglich verrutscht sein. Eventuell ist das, was wir im Guide beleuchten, nun in einer anderen Zeile.

Schritt 2.1

formmail.php Datei öffnen und Angaben hinzufügen

Nachdem du das Formmail Skript von Tectite's Website oder über unseren Server heruntergeladen hast, öffne die Datei "formmail.php" in einem Code Editor deiner Wahl und bearbeite folgende Zeilen:

Zeile 522

$EMAIL_ADDRS

Wir beginnen erst ab Zeile 522 mit der Bearbeitung des Skripts. Innerhalb des dortigen Arrays vergeben wir den Alias für die entsprechende E-Mail Adresse. Als Beispiel nehmen wir das Alias "community", das in unserem Fall der E-Mail Adresse "community@assets.vibranddesign.com" entsprechen soll. Die Syntax innerhalb des Arrays sieht dabei wie folgt aus:

('community' => 'community@assets.vibranddesign.com')

Code kopiert

Für den Fall, dass es mehrere Empfänger geben soll, separierst du alle E-Mail Adressen mit einem Komma:

('community' => 'community@assets.vibranddesign.com,
dennis@assets.vibranddesign.com,
lucas@assets.vibranddesign.com')

Code kopiert
Zeile 525

$DEF_ALERT

$DEF_ALERT ermöglicht, dass Fehler, die beim Ausführen des Skripts auftreten können, an eine angegebene E-Mail Adresse gesendet werden. Im Zuge der Entwicklung des Kontaktformulars empfehlen wir dir unbedingt, dort deine E-Mail Adresse vollständig einzutragen. Ab diesem Zeitpunkt werden an die Zieladresse immer Fehlerberichte nach einem fehlgeschlagenen Versand gesendet, die enorm bei der Fehlerbeseitigung helfen können.

Zeile 593

$TEMPLATEDIR

$TEMPLATEDIR gibt an, unter welchem Pfad (angegeben als URL) das HTML E-Mail Template abgelegt wird oder bereits abgelegt ist. Ein Beispiel: https://assets.vibrandesign.com/community/.

Hinweis: Gib an dieser Stelle ausschließlich die URL an, die zum entsprechenden Ordner führt, nicht zur Datei wie zum Beispiel https://assets.vibrandesign.com/community/formtemplate.html.

Zeile 693

$REQUIRE_CAPTCHA

Da wir Google's ReCaptcha für unser Formular verwenden, sollten wir in Zeile 693 $REQUIRE_CAPTCHA einen Fehlertext angeben, der beschreibt, ob ein Nutzer eventuell nicht das ReCaptcha ausgefüllt hat. Hier könnest du Beispielsweise ReCaptcha nicht ausgefuellt angeben. Wie du sicher weißt, ist das mit Ä, Ö, Ü etc. ja so ein Ding im Web...

Zeile 697

$RECAPTCHA_PRIVATE_KEY

Da wir unseren ReCaptcha bereits eingerichtet haben, haben wir bereits den Key, den wir jetzt brauchen. An dieser Stelle gibst du den Geheimen Schlüssel deines ReCaptchas an.

Wenn du das noch nicht gemacht hast, merke dir, das noch zu machen oder registriere jetzt dein ReCaptcha V2!

Fertig. Die Bearbeitung des Tectite Skripts ist hiermit abgeschlossen. Fahre nun mit Schritt 2.2 fort.

Schritt 2.2

formmail.php in das Serververzeichnis hochladen

Lade nun die bearbeitete "formmail.php" Datei in das Zielverzeichnis deines Webspaces hoch. In unserem Fall laden wir die Datei via FTP in das Verzeichnis "vibranddesign" -> "tectite-form" auf der Domain "assets.vibranddesign.com" hoch.

Schritt 3

HTML Form erstellen

Beginne zunächst damit dein Anfrage-/ Kontaktformular in Webflow zu bauen - und zwar so, wie du es sonst auch tun würdest. An dieser Stelle gibt es noch nichts zu beachten. Unser Formular für diesen Guide so aus:

Schnell & einfach zu Ihrem Angebot

Gewünschte Services
Budget
Datenschutz

Deine Daten werden sicher und verschlüsselt übertragen.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Nicht final
Schritt 3.1

Hidden Input Fields hinzufügen

Wenn du mit der Entwicklung deines Formulars fertig bist, müssen wir für das Form Skript noch ein paar kleine Erweiterungen und Anpassungen vornehmen. Füge dazu direkt im Formular (genau wie deine Input Felder) ein HTML Embed hinzu und füge folgenden Code ein:

<input type="hidden" name="recipients" value="community">

<input type="hidden" name="good_url" value="Website URL für erfolgreichen E-Mail Versand">

<input type="hidden" name="bad_url" value="Website URL für fehlgeschlagenen E-Mail Versand">

<input type="hidden" name="subject" value="Betreff-Zeile, die in der E-Mail Vorschau angezeigt wird">

<input type="hidden" name="mail_options" value="HTMLTemplate=formtemplate.html,TemplateMissing=N/A">

Code kopiert
Erläuterung der Input Zeilen
  1. Zeile 1 -> recipients: Da wir mit dem Empfänger Array und demzufolge einem Alias für unsere Empfänger arbeiten, geben wir an dieser Stelle unseren im Form Skript hinterlegten Alias an. Sobald der Nutzer das Formular sendet, prüft das Skript den Alias und sendet die E-Mail an alle hinterlegten E-Mail Adressen.

  2. Zeile 2 & 3 -> good_url & bad_url: Nach Ausführung des Skripts wird der Nutzer zur jeweils hinterlegten URL weitergeleitet.

  3. Zeile 4 -> subject: Betreff-Zeile, die der Empfänger in seinem E-Mail Programm sieht.

  4. Zeile 5 -> mail_options: Diese Zeile ist für die Verwendung eines E-Mail Templates notwendig, in das die Daten des Nutzers eingetragen werden. "formtemplate.html" entspricht dabei dem Namen der E-Mail Template Datei.

Schritt 3.2

ReCaptcha um ein hidden Input erweitern

Genau wie beim Schritt zuvor, müssen wir ein HTML Embed dem Formular hinzufügen. Dieses Mal aber direkt nach dem ReCaptcha. Folgenden Code fügst du in das HTML Embed ein:

<input type="hidden" name="derive_fields" value="imgverify=g-recaptcha-response"/>

Code kopiert
Schritt 3.3

Action Methode ändern & Action URL hinzufügen

Da wir ein externes Skript / Tool für die Weiterverarbeitung der Daten des Absenders nutzen, muss die Methode des Formulares von GET auf POST gesetzt werden.

Zudem muss die URL zur Datei "formmail.php" als Action URL hinzugefügt werden.

Schritt 3.4

Input Felder richtig benennen

Falls noch nicht geschehen, kümmere dich jetzt um die einwandfreie und einzigartige Benennung deiner Input Felder. Es dürfen keine doppelten Namen vorkommen und alle Namen müssen in einem für Maschinen lesbaren Format geschrieben sein (keine Sonderzeichen, Umlaute etc).

Hinweis: Damit beim Empfänger der E-Mail die E-Mail Adresse des Absenders in der Vorschau zu sehen sein soll, gib dem E-Mail Input Feld in deinem Formular (falls es eines gibt) den Namen "email" (Kleinschreibung beachten und ohne Bindestrich).

Du wirst die Namen jedes Input Feldes als nächstes bei der Bearbeitung des E-Mail Templates benötigen.

Unsere Input Felder haben wir wie folgt benannt:
  • Vorname = FNAME

  • Nachname = LNAME

  • E-Mail Adresse = email

  • Telefonnummer = PHONE

  • Firma = BUSINESS

  • Gewünschte Services (Checkboxes) = jeweils WEBDESIGN, BRANDDESIGN, SEO

  • Budget (Radiogroup) = BUDGET

  • Datenschutz = GDPR

Name & ID sollten identisch sein.

Das ist unser finales Anfrageformular für diesen Guide:

Schnell & einfach zu Ihrem Angebot

Gewünschte Services
Budget
Datenschutz

Deine Daten werden sicher und verschlüsselt übertragen.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Final
ohne UX Optimierung
Schritt 4

HTML E-Mail Template einrichten

Hast du dich für eines der o.g. Beispieltemplates entschieden oder ein eigenes entwickelt, öffne dieses nun in einem Code Editor deiner Wahl. Wir benutzen das E-Mail Template 1 als Demonstration.

Schritt 4.1

Design & Content Anpassung

Als Designer ist uns und vermutlich auch dir konsistentes Design wichtig, deswegen passe an dieser Stelle das Formular so an, wie du es gerne hättest oder benötigst - falls noch nicht geschehen. Füge zudem entsprechende Inhaltsblöcke hinzu, damit der Empfänger die dort angezeigten Informationen aus dem Formular auch zuordnen kann.

Schritt 4.2

Namen der Formular Inputs hinzufügen

Wie in Schritt 3.4 angekündigt, benötigst du nun die Namen all deiner Input Felder, deren Inhalt in der generierten E-Mail eingefügt werden sollen. Heißt eines deiner Felder wie in unserem Beispiel "FNAME" (für Vorname), fügst du in dem E-Mail Template $FNAME hinzu (Groß- und Kleinschreibung beachten!). Das $ zeigt dem PHP Skript, dass es sich dabei um einen Inhalt handelt, der über das Formular hinzugefügt werden muss. In diesem Schema fährst du mit all deinen Inputs fort, bis alle Felder in deinem Template aufgeführt werden.
Das Ergebnis sollte anschließend wie bei uns aussehen - unabhängig von der Gestaltung des Templates:

Schritt 4.3

E-Mail Template via FTP hochladen

Genau wie das PHP Form Skript lädst du nun auch dein E-Mail Template via FTP in das Ordnerverzeichnis deines Servers.

Achtung: Achte darauf, dass deine HTML Template Datei genauso heißt, wie unter Punkt 3.1 in Zeile 5 im HTML Embed angegeben. Das Verzeichnis sollte zudem identisch mit dem sein, welches du im PHP Form Skript in Zeile 593 angegeben hast.

Da unser E-Mail Template eine HTML Datei ist, ist diese sozusagen auch gleichzeitig eine Website. Unser Template kannst du dir daher hier über unseren Server ansehen:

UX Optimierung

Auch wenn das Formular nun bei dir funktioniert (sollte es jedenfalls), empfehlen wir dir potenzielle Fehlerquellen zu minimieren. Insbesondere beim Einsatz eines ReCaptchas vergessen Nutzer sehr häufig dieses auszufüllen. Um sicherzustellen, dass der Nutzer nicht zur Seite "Nachricht nicht gesendet" weitergeleitet wird, weil er vergessen hat das ReCaptcha anzuklicken/auszufüllen, haben wir folgende Empfehlungen für dich:

UX Tipp 1

ReCaptcha erst anzeigen, wenn Bedingung erfüllt ist

Mit "Bedingung erfüllt" ist zum Beispiel gemeint, dass zuerst eine Checkbox angeklickt oder ein Input Feld ausgefüllt werden muss. Da eine Checkbox zur Zustimmung der Datenverarbeitung zumindest in Deutschland obligatorisch ist, nehmen wir einfach das.

Unser Ziel für UX Tipp 1 ist also: Sobald die Datenschutz Checkbox akzeptiert wurde, zeige dem Nutzer das ReCaptcha an.

Nachfolgend eine Schritt für Schritt Anleitung dafür:

  1. Vergewissere dich, wie die ID deiner Datenschutz-Checkbox lautet und gib deinem ReCaptcha oder dem Parent deines ReCaptchas eine eindeutige Klasse.

  2. Füge in den Webflow Site Settings oder direkt auf der Seite vor dem </body> folgendes JavaScript ein:

    <script>
    /* Kontrolliere bei Veränderung der ID "GDPR" */
    $('#GDPR').change(function(){
    /* ob diese "gechecked" wurde. */
    if($(this).is(":checked")) {
    /* Wenn ja, gib dem Element mit der folgenden Klasse die Klasse .show, */
    $('.form__row.recaptcha').addClass("show");
    /* wenn nicht, mach nichts. */
    } else {return;}
    });
    </script>

    Code kopiert

    Achtung: Wenn du deine Klassen und IDs anders benannt hast als wir, ändere diese in dem Skript entsprechend.
    "#GDPR" = die ID unserer Checkbox
    ".form__row.recaptcha" = Die Klasse(n) des Divs, in dem unser Recaptcha liegt.

  3. Füge im <head> in deiner Webflow Site Settings, direkt in den Page Settings oder als HTML Embed folgendes CSS hinzu:

    <style>
    /* Zeige den Parent des ReCaptchas nicht an */
    .form__row.recaptcha {
    display: none;
    }
    /* Zeige Parent des ReCaptchas mit der Komboklasse .show an */
    .form__row.recaptcha.show {
    display: block;
    }
    </style>

    Code kopiert

    Achtung: Wenn du deine Klassen anders benannt hast als wir, ändere diese in dem Code entsprechend.
    ".form__row.recaptcha" = Die Klasse(n) des Divs, in dem unser Recaptcha liegt.

  4. Fertig. Auf deiner veröffentlichten Seite (website.webflow.io oder der Zieldomain) sollte nun das ReCaptcha erst angezeigt werden, sobald der Nutzer der Datenverarbeitung via Checkbox zugestimmt hat.

UX Tipp 2

Verhindere das Senden, bis ReCaptcha ausgefüllt wurde

Im UX Tipp 2 zu ergänzen: Deinem Auftraggeber und dir als Entwickler des Formulars wird wichtig sein, dass Bots keine E-Mails über das Formular senden. Daher wollen wir sicherstellen, dass das Formular nur abgesendet werden kann, wenn das ReCaptcha auch ausgefüllt/akzeptiert wurde. Das Stellen wir folgendermaßen an:

  1. Gib deinem ReCaptcha Element das Custom Data Attribut: "data-callback: enableBtn"

  2. Gib deinem Submit Button die ID: "submitRequest"

  3. Füge in den Webflow Site Settings oder direkt auf der Seite vor dem </body> folgendes JavaScript ein:

    <script>
    /* Beim Laden der Seite soll der Submit Button mit der ID submitRequest deaktiviert werden */
    function onloadCallback() { document.getElementById("submitRequest").disabled = true; };
    /* Sobald der ReCaptcha nach dem Aktivieren des Nutzers den Callback enableBtn ausführt, aktiviere den Submit Button */
    function enableBtn(){ document.getElementById("submitRequest").disabled = false; }
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

    Code kopiert

    Achtung: Auch hier gilt wieder, sofern du mit einer anderen Bezeichnung der Elemente gearbeitet hast, musst du die Angaben im Skript entsprechend anpassen.

  4. Wir wollen dem Nutzer das Signal geben, dass das Formular noch nicht gesendet werden kann. Das tun wir, in dem wir den Senden Button optisch verändern. Füge im <head> in deiner Webflow Site Settings, direkt in den Page Settings oder als HTML Embed folgendes CSS hinzu:

    <style>
    #submitRequest:disabled,
    #submitRequest[disabled] {
    background-color: #e4e4e4;
    color: #9b9b9b;
    cursor: not-allowed;
    }
    </style>

    Code kopiert

    Wie du den deaktivierten Button stylen möchtest, obliegt ganz deiner Vorstellungskraft. Wir empfinden einen ausgegrauten Button persönlich als geeignet, dem Nutzer zu zeigen: "Hier fehlt noch was".

Fertig

Du bist durch mit dem Guide! Und wenn bei dir nun alles so funktioniert, wie vorgesehen - herzlichen Glückwunsch. Du weißt nun, wie du den Tectite Form Processor in deinen (Webflow) Projekten einsetzen kannst.

Schnell & einfach zu Ihrem Angebot

Gewünschte Services
Budget
Datenschutz

Deine Daten werden sicher und verschlüsselt übertragen.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Final
mit UX Optimierung
Mit Liebe erstellt für die Webflow Community

Der Guide ist und bleibt komplett kostenfrei.

In dieses Projekt sind rund 20 Stunden und eine Menge Kaffeetassen geflossen. Wenn du mir unbedingt außerordentlich danken willst, spendiere mir ein Kaffee - damit ich auch gut durch zukünftige Projekt komme. Fühl dich dazu aber nicht verleitet, nur weil ich auf die Möglichkeit hinweise!

FAQ

Da der Guide lediglich die gängigste Art & Weise abbildet für die man ein Formular einsetzen könnte, kann es durchaus sein, dass der eine oder andere spezielle Wunsch nicht thematisiert wird. Für diese Fälle sowie potenzielle Probleme oder besondere Anpassungen findest du hier im FAQ eine Ansammlung an Fragen und ggf. die passenden Lösungen.

Ich plane den Guide stetig anzupassen und ggf. zu erweitern, sofern es einen Mehrwert bietet. Wenn du eine Frage oder Probleme hast, die im Guide oder im FAQ nicht thematisiert werden, für die du selbst keine Lösung findest, schau gerne im Beitrag zum Guide im Webflow Forum vorbei und schreibe dort deine Fragen oder Probleme:

Webflow Forum
[GUIDE] Custom and self-hosted form processor for all kinds of forms [EN/DE]
Q:

Kann ich das PHP Skript nicht einfach bei Webflow hochladen?

Q:

Kann ich über das Skript auch Dateien versenden/empfangen?

Q:

Kann ich mehrere Fomulare auf einer Unterseite mit einem Skript verwenden?

Q:

Kann ich dem Nutzer auch ohne Weiterleitung Feedback zum Status des E-Mail Versands anzeigen?

Q:

Bei der E-Mail vom Kontaktformular wird nicht die E-Mail des Absenders angezeigt. Warum?

Q:

Kann ich einen eigenen festen E-Mail Absender festlegen?

Q:

Kann ich dem Nutzer eine automatische Antwort (Autorespond) senden?

Q:

Kann ich neben Google ReCaptcha noch weitere Maßnahmen für den Schutz vor SPAM nutzen?