Wenn Sie sich jemals für ein E-Mail-Abonnement angemeldet haben, sollten Sie MailChimp kennen. Es ist ein Unternehmen, das Webmaster und Vermarkter bei der Bereitstellung von Newslettern und ähnlichen Kampagnen unterstützt. Sie bieten einige HTML-Vorlagen, die für Anmeldeformulare und Bestätigungsseiten verwendet werden können. Diese sind jedoch so allgemein, dass sich die meisten Abonnenten dieser Schnittstelle langweilen.
Ich möchte Ihnen zeigen, wie Sie das MailChimp-Anmeldeformular in etwas Einzigartigeres anpassen können. Alles basiert auf dem ursprünglichen HTML / CSS-Code von MailChimp. Bei der Formularübermittlung wird Ajax verwendet. Das hört sich kompliziert an, aber der gesamte Prozess ist einfacher als Sie vielleicht erwarten. Werfen Sie einen Blick auf meine Beispieldemo, um einen Eindruck von dem gesamten Tutorial zu bekommen.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst müssen wir auf das MailChimp-Dashboard zugreifen, um ihren HTML-Code zu sammeln. Melden Sie sich bei Ihrem Konto an oder erstellen Sie ein neues kostenloses Konto. Klicken Sie auf Listen. Über das Hauptmenü erhalten Sie eine Tabelle aller Abonnementlisten. Möglicherweise möchten Sie eine vorhandene Liste verwenden oder eine neue Liste für dieses Lernprogramm erstellen. Klicken Sie in jedem Fall auf den Namen der Liste und wir erhalten eine weitere Tabelle, in der alle Abonnenten nach der E-Mail-Adresse sortiert werden.
Jede neue Liste beginnt leer, es spielt jedoch keine Rolle, wie viele Abonnenten Sie haben. Klicken Sie auf dieser Seite auf? Anmeldeformulare? und wir werden mit einigen Optionen vorgestellt. Allgemeine Formen sind zu einfach und wir haben keine Kontrolle über den Code. Eingebettete Formulare auswählen und Sie erhalten eine elegante Benutzeroberfläche zum Kopieren / Einfügen des HTML-Codes.
Ich habe mich für Super Slim statt für Classic entschieden, da weniger CSS Ihrem Design im Weg steht, aber es ist immer noch besser als Naked ohne Stile.
Der Block oben ist mein Standardcode von MailChimp. Es gibt viel zu organisieren, nämlich das Entfernen aller Kommentare, es sei denn, Sie brauchen sie wirklich. Ich habe auch ein neues Stylesheet erstellt styles.css und ich werde alles miteinander kombinieren. Die Inline #mc_embed_signup sollte zusammen mit dem MailChimp Slim-Code in eine einheitliche CSS-Datei eingefügt werden. Dies ist meine Strategie, um das ursprüngliche Design anzupassen und das Layout insgesamt zu verbessern.
Änderungen in HTML
Es ist einfacher, diesen Vorgang zu erklären, indem der aktualisierte Codeblock angezeigt wird, sodass Sie die Möglichkeit haben, zu vergleichen. Alle Klassen und IDs und Namen wurden in Ruhe gelassen. Es ist klüger, das CSS mithilfe der vorhandenen Klassen / IDs anzupassen, um Kompatibilität zu gewährleisten.
Die wichtigste Änderung ist das Aktionsattribut meines Formulars. Alles in der URL ist bis identisch post-jsonwas ursprünglich war Post in der MC-Vorlage. Die post-Aktion gibt eine typische Abschlussseite zurück, mit der wir alle vertraut sind. post-json gibt eine JSON-Antwort zurück, die auf dem Erfolg oder Misserfolg des E-Mail-Abonnements basiert. Bitte beachten Sie, dass ich auch angehängt habe & c =? bis zum Ende dieser URL.
Der Zweck wäre, eine Rückrufmethode zu delegieren, die in JSON-Antworten synonym ist. Ich habe keine Verwendung dafür persönlich gefunden, aber es gibt viele Beiträge und Diskussionsthreads zum Thema Callback-Funktionen. Denken Sie daran, es sollte Teil der Aktions-URL sein.
Möglicherweise bemerken Sie auch ein zusätzliches Div am unteren Rand des Formularcontainers. Ich verwende die ID #notification_container in einer vertrauten Syntax wie die MailChimp-ID-Namen. Sobald JSON einen Wert zurückgibt, checken wir JavaScript ein und hängen es an die Seite in diesem Div an.
CSS aktualisieren
Abgesehen von den typischen Seitenrücksetzungen habe ich auch eigene Stile für die Benachrichtigungs- / Erfolgsmeldungscontainer geschrieben. Die Eigenschaften sind ziemlich typisch, daher werde ich nicht auf Details eingehen, aber Sie finden sie in meiner konsolidierten Datei styles.css.
Sie können MC-Formularstile am besten anpassen, indem Sie erkennen, wie sie aussehen sollen. Das Formular ist eine Mischung aus Prozentsätzen und Pixeln. Es liegt also an Ihnen als Designer, das zu machen, was Sie möchten. Responsive oder feste, Inline- oder Block-Style-Elemente. usw.
Ich habe meinem Code einige zusätzliche Abstände hinzugefügt, sodass es Block-Level-Selektoren und Inline-Styles gibt.
Dies ist nur ein kleiner Teil und konzentriert sich auf die Eingaben und die Schaltfläche "Senden". Ich verwende eine untere Umrandung, um die Schaltfläche 3D erscheinen zu lassen, die beim Klicken abflacht.Es ist alles ziemlich unkompliziert und keiner meiner CSS-Codes sollte verwirrend sein. Ich habe den Formularcontainer bei 350px Breite neu positioniert, sodass auf der Seite alles zentriert erscheint.
Ihre Position ändert sich, wenn Sie sie in der Seitenleiste oder in der Kopfzeile oder sogar in der Fußzeile benötigen. In diesen Fällen verschieben Sie möglicherweise den Benachrichtigungscontainer über das Formular oder was auch immer am sinnvollsten ist. Fühlen Sie sich frei, mit meinem Code zu beginnen, aber mit den Standardeinstellungen von MailChimp zu beginnen ist wahrscheinlich genauso gut.
Wenn wir die ursprüngliche Aktions-URL verwenden, können wir an diesem Punkt anhalten und fertig sein. Das Formular wird größtenteils neu gestaltet. Sobald ein Benutzer auf "Senden" klickt, wird eine neue Registerkarte geöffnet, in der er aufgefordert wird, das Abonnement per E-Mail zu bestätigen. Um diesen Prozess zu vereinfachen, suchen wir nach einer jQuery-Alternative für die Bearbeitung der Einreichung.
MailChimp Signup und jQuery
Wenn Sie noch nicht über eine Kopie von jQuery verfügen, laden Sie eine herunter und fügen Sie sie in den Seitenkopf ein. Mein ganzer Code ist am Ende der Seite in Skript-Tags geschrieben. Ich bin in Stack Overflow auf diese Lösung gestoßen, die einen Großteil des Prozesses darstellte.
Gleich beim Laden des Dokuments stelle ich eine jQuery-Referenzvariable ein $ form. Wenn Sie auf die Schaltfläche zum Senden klicken, verhindern wir die Standardübergabe (wodurch eine JSON-Ergebnisseite geöffnet wird) und rufen stattdessen eine benutzerdefinierte Funktion mit dem Namen auf registrieren(). Das $ form selbst wird als Parameter an die Funktion übergeben.
Es mag verwirrend erscheinen, aber diese Funktion ist wirklich eine lange .ajax () -Methode. Beachten Sie, dass wir das GET / POST-Attribut zusammen mit der aktualisierten Aktions-URL aus dem Formular entfernen können. Alle Eingabewerte werden wie PHP serialisiert und übergeben. Dies ist der Hauptgrund dafür, die Namen der Formulareingaben allein zu lassen und die ursprüngliche Vorlage beizubehalten.
Schließlich gibt es zwei Ajax-Antwortrückrufe für Erfolg oder Fehler. Wenn wir eine Fehlermeldung erhalten, konnte MailChimp unsere Anfrage nicht akzeptieren und die Warnmeldung wird angezeigt. Ansonsten haben sie die Anfrage akzeptiert, aber wir wissen nicht, ob sie funktioniert hat.
Wenn Ajax erfolgreich war, erhalten wir einen neuen Parameter, der in jQuery zurückgegeben wird. In diesem Fall heißt es Daten Das sollte wie ein JSON-Objekt aussehen. Wenn die Ergebnisdaten besagen, dass es nicht funktioniert hat, wissen wir, dass ein Problem mit der E-Mail-Adresse vorliegt, entweder ungültig oder einfach keine E-Mail-Zeichenfolge. In beiden Fällen wird die Fehlermeldung in die Seite ausgegeben. Ich verwende substr (), um den ersten Teil des Fehlermeldungscodes zu entfernen.
Wenn die Datennachricht erfolgreich ist, sollten wir eine Rückgabezeichenfolge erhalten, die besagt, dass der Benutzer den Posteingang überprüfen und dieses neue Abonnement bestätigen muss. In beiden Fällen wird die Rückmeldung mit der .html () - Methode von jQuery in den Benachrichtigungscontainer ausgegeben.
Bitte beachten Sie, dass, auch wenn Sie sich mit einer zufälligen E-Mail-Adresse anmelden wird nicht erscheinen in Ihrer Liste, bis sie bestätigt wurde. Um zu überprüfen, ob dieses Skript tatsächlich funktioniert, müssen Sie eine echte Adresse verwenden und auf die Bestätigungs-E-Mail klicken.
Live Demo - Quellcode herunterladen
Schließen
Das Standard-Anmeldeformular von MailChimp hat mich immer etwas verärgert. Ich hoffe, dieses Tutorial kann Webentwicklern und Internet-Vermarktern einen etwas anderen Ansatz bieten. Denken Sie auch daran, dass Sie das Schnittstellendesign für Bestätigungsseiten und E-Mails aktualisieren können, die an jeden Teilnehmer gesendet werden. Fühlen Sie sich frei, um meinen Quellcode herunterzuladen und fügen Sie dieses aktualisierte MailChimp-Formular Ihren eigenen Projekten bei.