So fügen Sie ein Mailrelay-Abonnementformular mit WordPress hinzu

Veröffentlicht: 2019-04-16

Wenn Sie neue Abonnenten gewinnen möchten, um Ihre Mailingliste zu erweitern, sollten Sie Abonnementformulare auf Ihrer Website anbieten. Wenn Sie mit WordPress arbeiten, können Sie diese Formulare ganz einfach zu Ihrem Blog hinzufügen.

Wieso den? Im Wesentlichen, weil es Ihnen ermöglicht, Daten von Personen zu erfassen, die an den von Ihnen angebotenen Produkten oder Dienstleistungen interessiert sind, damit Sie sie regelmäßig kontaktieren können.

An dieser Stelle denken Sie vielleicht: Ich bin interessiert, aber was muss ich tun, um ein Anmeldeformular auf meiner WordPress-Seite zu erstellen? Ich bin mit HTML-Code nicht vertraut und brauche etwas Einfaches und Einfaches.

Keine Sorge, in diesem Tutorial; Wir zeigen Ihnen verschiedene Möglichkeiten, den von Mailrelay generierten HTML-Code in Ihre mit WordPress erstellte Website mit und ohne Plugins einzufügen.

Interessant, oder?

Wichtige Klarstellung: Für dieses Tutorial gehen wir davon aus, dass Sie bereits ein Opt-In-Formular in Ihrem Konto erstellt und den HTML-Code bereits kopiert haben. Daher konzentrieren wir uns darauf, zu erklären, wie dieser Code zu WordPress hinzugefügt wird. Wenn Sie das Formular noch nicht erstellt oder den HTML-Code nicht kopiert haben, empfehlen wir Ihnen, zuerst diesen anderen Beitrag zu lesen und die angegebenen Schritte zu befolgen: Mailrelay V3-Abonnementformulare

  • 1 · So integrieren Sie ein Mailrelay-Abonnementformular ohne ein Plugin zu verwenden
  • 2 · So integrieren Sie ein Mailrelay-Abonnementformular in WordPress mit Elementor (kostenlose Version)
  • 3 · So integrieren Sie ein Mailrelay-Anmeldeformular in WordPress mit Bloom
  • 4 · Fazit
    • 4.1 Verwandte Beiträge:

Envia hasta 75.000 emails gratis!

· So integrieren Sie ein Mailrelay-Abonnementformular ohne ein Plugin zu verwenden

Wir müssen dieses Tutorial mit der Aussage beginnen, dass wir uns nicht selbst betrügen können; die meisten von uns werden versuchen, ein Plugin zu finden, das alle Aufgaben für uns auf unserer Website erledigt, weil sie unser Leben viel einfacher machen.

Beachten Sie jedoch, dass die Installation vieler Plugins auf unserer Website die Seite überlasten kann.

Dies bedeutet in vielen Fällen eine Verlängerung der Ladezeit der Seiten, was sich direkt auf unsere SEO-Strategie und das Benutzererlebnis auswirkt.

Für all dies, wenn Sie eine Überlastung Ihrer Website vermeiden möchten oder einfach keine weiteren Plugins auf Ihrer WP-Site installieren möchten, können Sie den HTML-Code ohne Plugin direkt auf Ihrer Website integrieren.

Wie?

Indem Sie diese Schritte ausführen:

Um zu beginnen, müssen Sie sich bei Ihrem WordPress anmelden und auf „ Darstellung“ und auf „Widget“ klicken .

Im Abschnitt Widgets müssen wir ein Widget namens " Custom HTML. ” Sobald wir es gefunden haben, können wir es in den Widget-Bereich ziehen, in dem wir unser Opt-in-Formular hinzufügen möchten.

WordPress hat standardmäßig einen Widget-Bereich in der Seitenleiste der Seite.

Wir können es dort einfügen oder wenn unser Theme oder unsere Vorlage andere Bereiche von Widgets aktiviert hat, können wir die Position ändern (zB in der Fußzeile).

In diesem Fall werden wir es in den gebräuchlichsten Bereich von Widgets einfügen, da alle WordPress-Websites diese Option standardmäßig haben. Fügen wir den HTML-Code in der Seitenleiste hinzu.

Wir müssen nur das Widget in diesen Bereich ziehen, einen Titel hinzufügen und den von Mailrelay generierten Code einfügen. Denken Sie daran, dass Sie den HTML-Code bereits generiert haben , bevor Sie mit dem Lesen dieses Tutorials beginnen.

Nach der Benennung des Widgets (im Titelbereich) und dem Einfügen des Codes (im Inhaltsbereich) müssen Sie auf die Schaltfläche Speichern klicken.

Um später zu überprüfen, ob alles in Ordnung ist, können Sie auf Ihren Blog zugreifen und das Abonnementformular in der Seitenleiste sehen.

ya tienes incorporado el formulario

* Beachten Sie, dass das Formular die Stile (Farben und Schriftarten) enthält, die in Ihrer Vorlage oder Ihrem Design konfiguriert sind.

In diesem Fall haben wir gesehen, wie Sie das Formular in die Sidebar integrieren. Wenn auf Ihrer Site ein anderer Widget-Bereich aktiviert ist, können Sie die gleichen Schritte ausführen, die wir zuvor erläutert haben, aber Sie sollten das Widget in diesen Bereich ziehen.

Das Ergebnis wird das gleiche sein; der einzige Unterschied besteht darin, dass Ihr Opt-In-Formular im angegebenen Bereich und nicht in der Seitenleiste angezeigt wird.

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Elementor (version gratuita)

· So integrieren Sie ein Mailrelay-Abonnementformular in WordPress mit Elementor (kostenlose Version)

So integrieren Sie ein Mailrelay-Abonnementformular in WordPress mit Elementor (kostenlose Version)

Elementor ist derzeit einer der bekanntesten WordPress-Layout-Designer, tatsächlich ist es eines der am häufigsten verwendeten Plugins zum Bearbeiten von Opt-in-Formularen.

Unter den Hauptfunktionen finden wir: eine kostenlose Version mit vielen Funktionen, die es jedem Benutzer ermöglicht, attraktive und personalisierte Abschnitte zu erstellen, ohne Geld investieren zu müssen.

Elementor ist ein Plugin, das derzeit kostenlos mit eingeschränkteren Funktionen und mit einer kostenpflichtigen / Premium-Version mit einigen zusätzlichen Optionen erhältlich ist.

Es spielt jedoch keine Rolle, ob Sie die kostenlose oder kostenpflichtige Version verwenden, Sie können Ihr Mailrelay-Formular in den gewünschten Bereich und Standort integrieren. In wenigen Schritten erfahren Sie, wie das geht:

Die erste Voraussetzung ist, dass das Elementor-Plugin auf unserer Website installiert ist. Wenn Sie es noch nicht installiert haben, sollten Sie auf die Registerkarte Plugins gehen und auf „ Neu hinzufügen“ klicken .

plugins y hacer clic en “anadir nuevo”

Suchen Sie im WordPress-Repository nach „Elementor Page Builder“ und klicken Sie auf Installieren.

Busca en el repositorio de WordPress “Elementor Page Builder” y haz clic en Instalar.

Denken Sie nach der Installation daran, es zu aktivieren, und wir sind bereit, unseren Code zu integrieren.

Um die Integration zu starten, sollten Sie die Seite oder den Abschnitt öffnen, auf der Sie Ihr Abonnementformular eingeben möchten. Nachdem Sie auf diesen Abschnitt zugegriffen haben, müssen Sie nach dem HTML-Code-Modul suchen.

tendras que buscar el modulo de codigo HTML.

Sobald Sie das Modul gefunden haben, fügen Sie das Modul in der Spalte oder im Abschnitt der Seite hinzu, in der Ihr Formular angezeigt werden soll. Nachdem wir es in den betreffenden Bereich gezogen haben, müssen wir den zuvor gespeicherten HTML-Code einfügen.

pega el codigo HTML que habiamos guardado con anterioridad.

Sobald der HTML-Code eingegeben wurde, sehen Sie, wie das Formular im Abonnementformular im ausgewählten Abschnitt oder in der ausgewählten Spalte verfügbar ist. Stellen Sie sicher, dass alles korrekt ist und veröffentlichen Sie die Änderungen. Das Ergebnis wird auf Ihrer Website sichtbar sein:

veras como aparece el formulario

Wie bereits erwähnt, ist es sowohl in diesem als auch im vorherigen Fall wichtig zu bedenken, dass das Formular die in Ihrer Vorlage oder Ihrem Design festgelegten Stile enthält.

Um Änderungen oder Modifikationen des Stils vorzunehmen, müssen Sie den HTML-Code bearbeiten oder spezielle Plugins verwenden, die es uns ermöglichen, unsere Abonnementformulare anzupassen (z. B. Bloom).

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Bloom

· So integrieren Sie ein Mailrelay-Anmeldeformular in WordPress mit Bloom

Bloom ist eines der vollständigsten Plugins, die wir zum Erstellen von Abonnementformularen finden können. Wenn Sie dieses Plugin bereits in Ihrem WordPress installiert haben oder eine Lizenz kaufen möchten, erklären wir Ihnen, wie Sie es in Ihren Mailrelay-Account integrieren können.

Nachdem Sie auf das Admin-Panel zugegriffen haben, sollten Sie als erstes auf Bloom / Opt-in-Formulare klicken. Auf dieser Registerkarte finden Sie alle bereits erstellten Abonnementformulare. In diesem Fall erstellen wir ein neues Formular von Grund auf, um zu lernen, wie es einfach in Mailrelay integriert werden kann.

Bloom/ optin forms

Um ein neues Formular zu erstellen, klicken Sie einfach auf die blaue Schaltfläche oben auf dem Bildschirm „ Neues Opt-in. “ oder neues Formular.

Das System öffnet eine Dropdown-Liste, in der Sie den zu erstellenden Formulartyp auswählen müssen. Lassen Sie uns die Option „inline“ wählen, da Sie sie später in dem gewünschten Abschnitt oder der gewünschten Seite implementieren können.

Escogeremos la opcion “inline”

Im nächsten Fenster müssen Sie mit der Konfiguration unseres neuen Formulars beginnen. Das erste, was Sie tun sollten, ist, es zu benennen, um es intern identifizieren zu können (dieser Name ist nur für Sie sichtbar, er wird Besuchern nicht angezeigt.)

Danach müssen wir einen E-Mail-Anbieter auswählen. Da wir in diesem Fall unseren HTML-Code von Mailrelay haben, können wir direkt zum Ende der Dropdown-Liste gehen und die Option „Benutzerdefiniertes HTML-Formular“ auswählen.

Custom HTML form

Unmittelbar nach Auswahl dieser Option zeigt das System ein graues Feld an, in das wir den Snippet-Code des Formulars einfügen können. Fügen Sie in diesem Fall den von Mailrelay generierten HTML-Code ein und klicken Sie auf die Schaltfläche „Weiter gestalten Sie Ihr Opt-In“.

“Next, design your optin”

Im Folgenden sehen wir uns verschiedene Formen mit unterschiedlichen Farben und Stilen an. Sie sollten die beste Option entsprechend dem Layout Ihrer Website auswählen, um dem Farbschema der Seite zu entsprechen. Es ist wichtig zu verstehen, dass der Stil, da wir den Code bereits eingeführt haben, nicht derselbe ist, der vom Plugin angezeigt wird, aber das Endergebnis ist normalerweise ziemlich gut.

Der nächste Schritt besteht darin, die Felder anzupassen, die wir im Formular verwenden möchten. In „Opt-In-Titel“ sollten wir den Titel schreiben, der prominent in der Kopfzeile des Formulars angezeigt wird. Wenn Sie keinen Titel eingeben möchten, können Sie dieses Feld leer lassen.

Danach müssen wir den Text des Formulars ausfüllen. Wenn Sie darüber nachdenken, warum Ihre Besucher Ihren Newsletter abonnieren sollten oder was Sie Ihren Abonnenten im Austausch für das Abonnement anbieten, sollten Sie dieses Feld verwenden, um all diese Informationen hinzuzufügen.

texto del formulario

So können wir das Bild anpassen. Die meisten Standardvorlagen von Bloom enthalten oben ein Bild, aber wenn Sie es ändern und/oder beispielsweise durch Ihr Logo ersetzen möchten, müssen Sie dies in diesem Abschnitt tun.

Wir kamen zum Stilbereich. Wenn Sie Ihr Abonnementformular weiter anpassen, Schriftarten, Farben, Hintergründe oder andere ästhetische Aspekte ändern möchten, sind Sie hier richtig. In Opt-in-Styling und Formular-Styling können Sie aus vielen Optionen und Alternativen wählen.

Danach finden wir einige weitere Optionen zum Anpassen des Formulars. Wir können Text in der Fußzeile hinzufügen (ideal für Klarstellungen oder schnelle Kommentare) und die Bestätigungsnachricht, die angezeigt wird, nachdem der Besucher den Newsletter erfolgreich abonniert hat.

Nachdem wir alle Felder eingestellt haben, können wir auf „Speichern“ klicken, um unsere Arbeit zu speichern. Wenn wir auf Speichern klicken, wird das Plugin den Bildschirm verlassen und alle aktiven Opt-in-Formulare anzeigen.

Nun, wir haben unser Bloom-Formular bereits erstellt und konfiguriert. Der nächste Schritt ist die korrekte Einbindung in unsere Seite.

Dazu suchen wir in Bloom-/Opt-In-Formularen nach dem soeben erstellten Formular und finden links dieses Symbol „[]“.

Bloom/optim forms

Wenn wir darauf klicken, sehen wir ein neues Fenster mit dem Shortcode für dieses Formular. Kopieren oder speichern Sie diesen Code irgendwo, da Sie ihn später verwenden müssen.

ventana con el shortcode

Nach dem Kopieren des Shortcodes müssen wir ihn unserer Website hinzufügen, auf der wir dieses Formular anzeigen möchten. Wenn wir ein visuelles Layout wie Elementor oder Divi haben, können wir es überall mit dem Codemodul oder Shortcode integrieren.

Arbeiten wir hingegen bereits mit Gutenberg, dem neuen System von WordPress, können wir unseren Shortcode über das eingebettete Widget speziell für diesen Zweck einbinden.

Wir sollten daher die Seite oder den Abschnitt öffnen, um sie zu bearbeiten. Nachdem wir darauf zugegriffen haben, klicken wir auf die Schaltfläche „+“ und wählen in den Widgets den Block „Shortcode“ aus. Danach müssen wir den Code oder Shortcode eingeben, den wir zuvor gespeichert haben. Hier müssen Sie nur den Inhalt einfügen und die Änderungen speichern.

Pegaremos el contenido y guardaremos los cambios.

Nachdem Sie diese Schritte ausgeführt haben, steht Ihr neues Formular auf Ihrer Website zur Verfügung. Der Prozess ist viel einfacher als Sie dachten, oder?

· Abschluss

Wie wir im gesamten Artikel gesehen haben, gibt es viele Möglichkeiten, ein Mailrelay-HTML-Formular mit WordPress zu integrieren. In diesem Beitrag wollten wir uns auf Methoden konzentrieren, die wir für einfach halten, damit Sie die Angst vor der Manipulation von Code verlieren.

Wie wir gesehen haben, können Sie Mailrelay ohne Plugins in WordPress integrieren, über den Widgets-Bereich oder sogar mit Gutenberg, der neuen Funktion von WordPress.

Wenn Sie jedoch bereits über visuelle Editoren wie Divi, Elementor oder ein anderes Opt-In-Plugin verfügen, können Sie sie auch verwenden, um Ihr Formular an beliebigen Stellen hinzuzufügen. Im Fall von Bloom besteht der Hauptvorteil darin, dass wir mit dem Plugin Formularstile einfach bearbeiten , ihnen eine persönlichere Note verleihen und den Code an das Layout unserer Website anpassen können.

Wenn Sie jedoch bereits mit HTML vertraut sind und einige Änderungen am Code vornehmen möchten, um Stile oder Farben hinzuzufügen, ist dies ebenfalls möglich. Denken Sie natürlich daran, vorsichtig zu sein, denn wenn Ihr Opt-in-Formular nicht richtig funktioniert, wirkt sich dies auf Ihre E-Mail-Marketingstrategie aus.

Und jetzt möchten Sie Ihr Mailrelay-Formular in Ihre WordPress-Website integrieren?

Cristina Aguayo