Du willst dein E-Mail-Marketing auf das nächste Level heben und Webflow CMS mit Mailchimp verbinden? Dann bist du hier genau richtig! Wir zeigen dir Schritt für Schritt, wie du diese mächtige Kombination für dein KMU nutzen kannst. Los geht's!
1. Vorbereitung: API-Schlüssel und Listen-ID beschaffen
Bevor wir loslegen können, musst du erst mal ein paar technische Voraussetzungen schaffen. Keine Sorge, das klingt komplizierter als es ist! Logge dich in deinen Mailchimp-Account ein und navigiere zu "Account" → "Extras" → "API-Schlüssel". Hier generierst du einen neuen API-Schlüssel - merk dir den gut, den brauchen wir gleich! Als Nächstes brauchst du noch die Listen-ID deiner Mailchimp-Audience. Die findest du unter "Audiences" → "Einstellungen" → "Audience name and defaults". Schreib dir beide Infos am besten gleich auf einen digitalen Schmierzettel - ich empfehle dafür übrigens das Tool "Notion", das ist quasi das digitale Equivalent zum guten alten Kühlschrank-Magnet!
2. Webflow-Formular erstellen und konfigurieren
Jetzt geht's ans Eingemachte: In Webflow erstellst du ein neues Formular und fügst die Felder hinzu, die du für deine Mailingliste brauchst. Typischerweise sind das Name und E-Mail-Adresse, aber je nach deinem Use Case können das auch mehr sein. Wichtig: Stelle sicher, dass die Feldnamen exakt mit denen in Mailchimp übereinstimmen. Das ist wie bei der Steuererklärung - ein Zahlendreher, und schon landet dein Formular im digitalen Papierkorb! Unter den Formular-Einstellungen wählst du als Aktion "Custom" aus. Hier kommt jetzt der spannende Teil: Du fügst den API-Endpunkt von Mailchimp ein, der in etwa so aussieht: "https://usX.api.mailchimp.com/3.0/lists/{list_id}/members". Ersetze "X" durch deine Serverregion und {list_id} durch die ID, die du vorhin notiert hast.
3. JavaScript-Code für die Verbindung implementieren
Der letzte Schritt ist die Implementierung des JavaScript-Codes, der die Magie zwischen Webflow und Mailchimp happen lässt. Füge dazu in den Seiteneinstellungen unter "Vor </body> Tag" folgenden Code ein:
<script>
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'https://usX.api.mailchimp.com/3.0/lists/{list_id}/members',
data: JSON.stringify({
'email_address': $('#email').val(),
'status': 'subscribed',
'merge_fields': {
'FNAME': $('#firstname').val(),
'LNAME': $('#lastname').val()
}
}),
contentType: 'application/json',
headers: {
'Authorization': 'apikey YOUR-API-KEY'
},
success: function(response) {
alert('Willkommen im Club! Du bist jetzt angemeldet.');
},
error: function(response) {
alert('Ups, da ist was schiefgelaufen. Versuch es nochmal!');
}
});
});
</script>
Vergiss nicht, "X", "{list_id}" und "YOUR-API-KEY" durch deine eigenen Werte zu ersetzen. Et voilà - dein Webflow-Formular ist jetzt mit Mailchimp verbunden! Das war doch gar nicht so schwer, oder? Wenn du trotzdem Hilfe brauchst oder dich das Ganze überfordert, sind wir von Faber & Friends natürlich gerne für dich da. Wir sorgen dafür, dass dein Online-Marketing so reibungslos läuft wie ein gut geölter Dieselmotor - nur eben umweltfreundlicher!
Noch ein Pro-Tipp zum Schluss: Teste dein Setup gründlich, bevor du es live schaltest. Niemand mag es, wenn seine Daten im digitalen Nirvana verschwinden - außer vielleicht deine Konkurrenz! Viel Erfolg beim Aufbau deiner E-Mail-Liste!
