Brevo Newsletter mit nativen Webflow Formular verwenden (datenschutzkonform)

06. Februar 2024
Brevo Newsletter mit Webflow verknüpfen
Brevo Newsletter mit Webflow verknüpfen

Ein Newsletter bietet eine effektive Methode, um wertvolle Inhalte an eine Kontaktliste zu senden, die sich für Dein Fachwissen interessiert. Üblicherweise melden sich Nutzer über ein Anmeldeformular auf Deiner Website für den Newsletter an und bekommen daraufhin eine Bestätigungsmail mit einem zusätzlichen Opt-In, um ihre Anmeldung zu verifizieren. Nach Abschluss dieser Schritte wird der Nutzer zu einem Newsletter-Kontakt und stimmt zu, weitere E-Mails zu empfangen.

Da Webflow kein eigenes Newsletter-Tool integriert hat, nutzen wir den Anbieter Brevo. Brevo ist für kleinere Verteilerlisten kostenfrei nutzbar und ermöglicht dennoch bei Bedarf die Skalierung des Newsletter-Marketings.

Brevo bietet die Option, ein Anmeldeformular mittels iFrame oder HTML-Codes einzubinden, allerdings sind dabei bestimmte Design- und Layoutvorgaben vorgegeben. Eine einfachere Alternative ist die Verknüpfung eines nativen Webflow-Formulars mit Brevo. Dadurch behältst Du die volle Gestaltungsfreiheit in Webflow und kannst Dein Formular direkt im Designer individuell anpassen.

Set-Up in Brevo

Melde Dich in Deinem Brevo-Konto an oder erstelle einen Account, falls Du noch keines hast.

Wähle anschließend den Punkt ‘Formulare’ im Reiter ‘Kontakte’ aus und erstelle ein neues Anmeldeformular.

1. Formularname

Gebe dem Formular einen aussagekräftigen Namen und aktiviere die Checkbox “DSGVO-Felder aktivieren”.

Brevo Formular Name

2. Design

Du kannst diesen Punkt erstmal überspringen, da wir das Design in Webflow erstellen.

Brevo Formular Design

3. Listen

Wähle oder erschaffe eine Liste, in welche Du die Kontakte über die Website eingetragen haben möchtest.

Brevo Formular Listen

4. Einstellungen

Stelle sicher, dass die Option ‘Double-Opt-in-E-Mail’ ausgewählt ist. Verwende außerdem die ‘Standard-Vorlage für Double-Opt-in-Bestätigungen’

Wichtig ist, dass Du in Webflow eine Seite erstellst, auf die der Nutzer weitergeleitet wird, wie zum Beispiel /danke oder /success. Seiten-Inhalt kann ein einfaches Danke für die Anmeldung sein.

Aktiviere die Checkbox ‘Bestätigungsseite nach Absenden des Formulars’ und füge die komplette URL Deiner eigenen Danke-Seite ein.

Brevo Formular Einstellungen

5. Nachrichten

Diese Informationen kannst Du lassen, wie sie sind.

6. Teilen

Kopiere den kompletten Quick Share Link in ein leeres Textdokument oder an einen anderen Ort, den Du schnell wieder findest.

Brevo Formular Teilen

7. Erstellen

Klicke den ‘Fertig’-Button und erstelle das Formular.

Nun haben wir unser Set-Up in Brevo abgeschlossen und können uns auf das Design und Set-Up in Webflow konzentrieren.

Webflow Set-Up

Erstelle in Webflow ein neues Formular, indem Du es aus dem Elemente-Panel hinzufügst. Füge ein E-Mail-Eingabefeld und eine Checkbox für die Zustimmung zur Datenschutzerklärung hinzu. Du kannst zusätzlich Text hinzufügen, zum Beispiel den Text aus dem Standardformular in Brevo.

Wichtig: Gebe den Feldern den passenden Namen im Formular und die passende Element-ID: E-Mail-Feld mit ‘EMAIL’ und die Checkbox mit ‘OPT_IN’. Stelle sicher, dass beide Felder als ‘Required’ markiert sind.

Webflow Input Field Name

Wähle dann das Formular erneut aus und trage in das Action-Feld den Quick Share Link von Brevo ein. Ändere die Methode auf ‘POST’.

Webflow Formular Settings

Falls Du zusätzliche Felder wie Vor- und Nachname hinzufügen möchtest, kannst Du dies im zweiten Schritt, ‘Design’, in Brevo tun. Vergiss nicht, in Webflow die ID und den Namen der neuen Eingabefelder korrekt einzustellen. Diese kannst Du direkt aus Brevo herauslesen oder in den Developer-Tools auf der Seite Deines Quick Share Link ablesen.

Auf diese Weise werden die eingegebenen Daten direkt an Brevo übermittelt.

Teste nun Dein neues und individuelles Webflow Newletter-Formular. Stelle sicher, dass Du die eingegebene E-Mail in Deinem E-Mail-Tool auch bestätigst, so dass sie in deiner Brevo-Newsletter-Liste angezeigt wird.

Datenschutz

Achte darauf, dass Du Brevo korrekt in Deiner Datenschutzerklärung berücksichtigst. Zudem solltest Du einen Vertrag zur Auftragsverarbeitung mit Brevo abschließen, um vollständige Übereinstimmung mit der DSGVO zu sichern.

Dieses Tutorial ist keine Rechtsberatung, bei Datenschutz-Fragen solltest Du immer auf einen Experten zurückgreifen.

Fazit

Das Newsletter Set-Up mit Brevo und Webflow ist einfach umzusetzen. Vorteil ist ganz klar die Designfreiheit vom nativen Webflow-Formular.

Bereit für ein erfolgreiches Webflow Projekt?

Noch kein Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Danke! Du bist jetzt für den Newsletter angemeldet.
Ups! Etwas ist schiefgelaufen!
X Icon