Senden eines Rabattcodes per SMS an Kunden per Popup - Tutorial - (WSForm, Twilio, Oxygen)
Veröffentlicht: 2022-07-22In diesem Tutorial erstellen wir ein Popup, das die Telefonnummer und E-Mail-Adresse eines Kunden sammelt, um eine SMS- und E-Mail-Marketingliste für unseren WooCommerce-Shop zu erstellen. Bei der Übermittlung senden wir ihnen per SMS einen 10 % Rabatt-Gutscheincode und fügen diese Daten ihrem Benutzerprofil hinzu.
Dazu verwenden wir WSForm, um das Formular zu erstellen, es in Twilio zu integrieren und unsere Gutscheinerstellung auszulösen. Wir verwenden Oxygen Builder für das allgemeine Popup- und Formular-Styling. Und wir verwenden ACF Pro, um die Marketing-E-Mail und Telefonnummer (neben Opt-in-Daten) im Benutzerprofil zu speichern.
Sauerstoff-Builder-Kurs - Demnächst!
Der Oxygen Builder Mastery-Kurs bringt Sie vom Anfänger zum Profi – ACF-, MetaBox- und WooCommerce-Module inklusive.
Zuerst richten wir das Formular ein. Dies ist ein zweistufiges Formular, das darauf abzielt, zuerst eine E-Mail und dann eine Telefonnummer zu sammeln. Damit können wir zwei separate Listen erstellen, die für Marketing per SMS und Marketing per E-Mail verwendet werden können.
Ich teile es in zwei Schritte auf, was hoffentlich die Konversionsrate erhöhen sollte, da jemand, sobald er eine E-Mail eingegeben hat, das Formular weniger wahrscheinlich verlässt, wenn er mit einer weiteren Texteingabe konfrontiert wird.
Zuerst fügen wir 2 Registerkarten hinzu, eine für E-Mail und eine für die Telefonnummer.
Die erste Registerkarte hat eine E-Mail-Eingabe, gekoppelt mit einer Schaltfläche „Weiter“, die den nächsten Schritt des Formulars anzeigt, wenn darauf geklickt wird.
Auf der Registerkarte „Erweiterte Einstellungen“ für das E-Mail-Eingabefeld haben wir ein reguläres Ausdrucksmuster hinzugefügt, das E-Mails validiert.
Die nächste Registerkarte ist etwas komplizierter.
Hier erfassen wir die Telefonnummer des Benutzers. Dies verwendet das integrierte Telefonnummernfeld und enthält eine internationale Auswahl.
Es gibt jedoch drei zusätzliche Felder. Sowohl der Gutscheintext als auch die Einwilligungsfelder für Datum und Uhrzeit sind vor dem Frontend-Benutzer verborgen und werden dynamisch ausgefüllt. Das Zustimmungsfeld ist ein obligatorisches Kontrollkästchen, das ausgewählt werden muss, damit der Benutzer das Formular absenden kann.
Das Datumszustimmungsfeld wird mithilfe von JavaScript sowohl mit dem Datums- als auch mit dem Zeitstempel ausgefüllt. Wenn das Formular gesendet wird, werden diese Informationen zu einem ACF-Feld hinzugefügt, das den spezifischen Moment anzeigt, in dem sie das Formular senden und zustimmen. Dies ist hilfreich, um nachzuweisen, dass es sich um einen „echten“ Benutzer handelt, wenn ich versuche, Daten in SMS- oder E-Mail-Marketingplattformen zu exportieren.
Auch die Coupon-Texteingabe bleibt dem Benutzer verborgen. Dieses Feld generiert einen dynamischen Coupon, der den Anzeigenamen des Benutzers und eine zufällig generierte Textfolge kombiniert. Wir verwenden dies, um automatisch einen Gutschein zu erstellen, der der übermittelten E-Mail-Adresse in WooCommerce zugeordnet ist.
Die Senden-Schaltfläche enthält etwas HTML, und wir werden darauf zurückkommen, wenn wir das Formular mit Oxygen und dem ausgewählten Detektor gestalten. Ab sofort sieht das Formular im Frontend so aus:
Nachdem das Formular nun alle benötigten Daten erfasst, erstellen wir einige Übermittlungsaktionen. Dies sind Aktionen, die ausgeführt werden, wenn der Benutzer das Formular absendet.
Beim Absenden passieren 4 Dinge in der oben angezeigten Reihenfolge.
Zuerst fügt es WooCommerce den Coupon hinzu, der automatisch im oben genannten Feld generiert wurde.
Dann zeigt es dem Benutzer eine Nachricht, dass er in ein paar Minuten eine SMS mit dem Code erwarten sollte.
Anschließend sendet es mithilfe der WSForm-Twilio-Integration den Code per SMS an die Telefonnummer, die bei der Übermittlung eingegeben wurde.
Schließlich aktualisiert es die Benutzerinformationen im WordPress-Benutzerprofil und fügt sowohl die Telefonnummer als auch die E-Mail-Adresse zu benutzerdefinierten Feldern hinzu, die mit ACF erstellt wurden.
Das Hinzufügen des Gutscheins zu WooCommerce erfolgt über die in WSForm integrierte Übermittlungsaktion „WordPress-Hook ausführen“ und einige benutzerdefinierte PHP-Codes.
Dieser Code fügt programmgesteuert einen WooCommerce-Coupon aus dem im WSform-Feld generierten Code hinzu.
Wenn das Formular gesendet wird, wird dieser gesamte Code ausgeführt.
Wir erhalten die E-Mail-Adresse, die Telefonnummer und den Gutscheincode aus unserer WSForm-Übermittlung. Wir generieren dann einen Gutschein.
In diesem Beispiel bietet der Gutschein 10 $ Rabatt auf einen Einkaufswagen, kann einmal verwendet werden und ist auf die E-Mail beschränkt, die im Formular übermittelt wurde.
Nachdem wir unseren Gutschein zu WooCommerce hinzugefügt und der gesendeten E-Mail zugewiesen haben (dies geschieht, um Betrug zu reduzieren), zeigen wir dem Benutzer eine Erfolgsmeldung an:
Beachten Sie das dynamische #field(5) , das zur Personalisierung der Nachricht verwendet wird.
Dann senden wir den Text tatsächlich an den Benutzer. Dies nutzt die Twilio-Integration, die WSForm bietet, und ist einfach einzurichten.
Zuerst installieren wir das Addon und verbinden es mit dem Twilio-Konto, indem wir unseren API-Schlüssel einfügen.
Jetzt, zurück unter den Formularübermittlungsaktionen, konfigurieren wir die Textnachricht.
Wir wählen die Absendernummer, verbinden unser Zustimmungsfeld und fügen dynamisch die Telefonnummer hinzu, an die die Nachricht gesendet werden soll. Die Nachricht selbst wird ebenfalls dynamisch erstellt und kombiniert eine statische Willkommensnachricht und einen dynamischen Coupon, der aus dem automatisch generierten versteckten Feld ausgefüllt wird.
Auf Wunsch können wir auch GIFs und Medien hinzufügen.
Schließlich speichern wir die übermittelten Daten an einem sinnvollen Ort. In dieser Situation habe ich ACF pro verwendet, um Felder im Benutzerprofil zu erstellen.
Die letzte Aktion verwendet das WSForm User Management-Addon, um diese Daten zu den benutzerdefinierten Feldern unter dem Benutzerprofil hinzuzufügen.
Möglicherweise sind Sie jedoch besser bedient, wenn Sie diese Informationen mithilfe der vielen Integrationen von WSForm an GetResponse oder eine andere Marketingplattform senden:
Jetzt, da die Gesamtfunktionalität und der Mechanismus des Formulars funktioniert, bauen wir unser Popup aus und bringen dieses Formular zur Erfassung von Marketingdaten an das Front-End der Website.
Oxygen Builder und WSForm bilden eine großartige Kombination. Mit dem Builder ist es einfach, das Formular zu übermitteln und es noch einfacher zu gestalten.
Mit einem wiederverwendbaren Teil (der es mir ermöglicht, dieses Popup an beliebiger Stelle einzufügen) füge ich zuerst das Popup hinzu, füge das Formular hinzu und gestalte es schließlich.
Ich verwende ein Modal, Spalten und einige andere Elemente, um ein klassisches 50 % 50 %-Popup zu erstellen.
Ich habe das Formular über einen Shortcode eingefügt.
Es wird bei der Exit-Intent ausgelöst.
Jetzt muss ich nur noch das WSForm formatieren. Ich könnte dies mit dem integrierten Customizer tun, aber das ist ein bisschen eingeschränkt. Ich könnte auch einfach benutzerdefiniertes CSS schreiben, aber das ist nicht visuell. Die dritte Option ist die Verwendung des integrierten Auswahldetektors, der mit Oxygen Builder geliefert wird, und das Styling mit dem Editor. Dies ist etwas, das viele Leute nicht nutzen, einfach weil es nicht standardmäßig aktiviert ist. Gehen Sie also auf Ihre Einstellungsseite für Sauerstoff und aktivieren Sie den Auswahldetektor.
Klicken Sie nun in das Shortcode-Element und dann unten auf „Selector Detector“.
Verwenden Sie es, um in die Eingaben und Schaltflächen zu klicken und mit der Registerkarte Erweitert zu gestalten.
Ich verwende das Funktionscodeelement anstelle des integrierten WS-Formulars Oxygen, da ich den Funktionscode deaktivieren und dann erneut rendern kann, um mich zurück zur ursprünglichen Registerkarte des Formulars zu bringen. Wenn ich das WSForm selbst bearbeite, kann ich den Shortcode erneut rendern, ohne den Builder neu laden zu müssen.
Mit dem Detektor kann ich auf jedes HTML-Element abzielen, sodass ich die in der zweiten Schaltfläche hinzugefügte Spanne bearbeiten und die Schriftart verkleinern kann.
Und einfach so haben wir ein benutzerdefiniertes Formular für unsere WooCommerce-Site erstellt, das:
- Wird bei der Exit-Absicht angezeigt und bietet 10 $ Rabatt
- Sammelt E-Mail- und Telefonnummern in 2 Schritten mit WSForm
- Ist kundenspezifisch und gestylt nach Markenrichtlinien mit Sauerstoff
- Fügt einen eindeutigen Gutscheincode hinzu, der der übermittelten E-Mail in WooCommerce zugewiesen wird
- Sendet den Gutscheincode per SMS an die angegebene Telefonnummer
- Sendet diese Daten an das Benutzerprofil (mit ACF pro hinzugefügte benutzerdefinierte Felder)
