Newsletter über Webflow Logic verknüpfen (Mailerlite und co)

In diesem Tutorial zeige ich dir ausführlich wie du ein Newsletterformular erstellst und dieses mit Hilfe von Webflow Logic mit deinem Newsletter Service verknüpfst. In meinem Beispiel senden wir neue Anmeldungen über die API-Schnittstelle an MailerLite. Dieser Ansatz präsentiert eine effiziente Alternative zu vorherigen Methoden (Variante 1), die du ebenfalls unten nochmal anschauen kannst.

Mailerlite Newsletter Account anlegen – bis 1000 Abonnenten kostenlos: https://www.mailerlite.com/a/frbntx2y3olu (Affiliate Link)

Anleitung: MailerLite mit Webflow verknüpfen und Newsletterformular erstellen

Einleitung

Heute zeige ich dir Schritt für Schritt, wie du MailerLite mit Webflow verknüpfst und ein effektives Newsletterformular erstellst. Dabei nutzen wir Webflow Logic, um die Daten nahtlos über eine API Schnittstelle an MailerLite zu senden. Dieser Ansatz bietet eine alternative Methode im Vergleich zu einem vorherigen Tutorial und erscheint mir effizienter.

Variante 1 (aufwändiger): Vorbereitung

Bevor wir starten, empfehle ich dir, das vorherige Tutorial zu diesem Thema anzusehen. In diesem Video habe ich bereits gezeigt, wie die beiden Tools miteinander verbunden werden. Der Prozess funktioniert zwar immer noch, doch ich bevorzuge den neuen Webflow-Logic-Weg.

Variante 2: Mit Webflow Logic (neu)

Schritt 1: Erstellen des Newsletterformulars in Webflow

Öffne Webflow und erstelle ein neues Formular. Füge die erforderlichen Input-Felder für Name und E-Mail hinzu. Stelle sicher, dass die Felder eindeutige Namen haben, die später für den Logic Flow benötigt werden. Du kannst auch das Design anpassen und Labels hinzufügen.

Schritt 2: Webflow Logic einbinden

Navigiere zu Webflow Logic und erstelle einen neuen Flow. Benenne ihn sinnvoll, zum Beispiel "MailerLite Newsletter". Als Trigger wählst du "Form Submission". Dieser Flow wird also ausgelöst, wenn das Formular abgesendet wird.

Schritt 3: Konfiguration des Logic Flows

Im Logic Flow Editor fügen wir einen HTTP-Request hinzu. Dieser Request wird benötigt, um mit der MailerLite-API zu kommunizieren. Fülle die erforderlichen Informationen wie die URL und die Header-Daten gemäß der MailerLite-API-Dokumentation aus.

Schritt 4: Erstellen des MailerLite API-Tokens

Gehe zu deinem MailerLite-Konto und generiere einen API-Token. Dieser Token ist wie ein geheimer Schlüssel, der die Kommunikation zwischen Webflow und MailerLite ermöglicht. Kopiere den Token und füge ihn in den Logic Flow ein.

Schritt 5: Konfiguration des API-Requests für Subscriber

Stelle sicher, dass der Logic Flow nun einen POST-Request für das Erstellen eines Subscribers enthält. Fülle die erforderlichen Informationen im Body des Requests aus, indem du die Felder entsprechend den MailerLite-Anforderungen befüllst. Achte darauf, die Gruppeninformationen hinzuzufügen, wenn du Subscriber bestimmten Gruppen zuordnen möchtest.

Schritt 6: Test des Logic Flows

Führe einen Test des Logic Flows durch, indem du eine Test-E-Mail-Adresse verwendest. Überprüfe, ob der Status 200 ist und ob die Daten korrekt an MailerLite gesendet werden. Beachte, dass MailerLite möglicherweise eine Double-Opt-In-E-Mail sendet, die vom Benutzer bestätigt werden muss.

Schritt 7: Veröffentlichung und Integration in Webflow

Sobald der Test erfolgreich ist, publiziere den Logic Flow und integriere ihn in deine live Webflow-Seite. Achte darauf, dass alle Formulare korrekt verknüpft sind und teste das endgültige Formular, um sicherzustellen, dass die Daten reibungslos an MailerLite gesendet werden.

Fazit

Die Verknüpfung von MailerLite und Webflow über den Webflow Logic bietet eine effiziente Alternative für die Integration von Newsletterformularen. Mit diesem Tutorial solltest du in der Lage sein, den Prozess Schritt für Schritt umzusetzen und ein nahtloses Erlebnis für deine Nutzer zu schaffen.