So erstellen Sie ein benutzerdefiniertes Anmeldeformular in Elementor

Die meisten Kleinunternehmen machen einen entscheidenden Fehler – sie verwenden ziemlich Standard-Anmeldeformulare, die genauso aussehen wie jedes andere Anmeldeformular im Web.

Wir sehen dieses Muster immer wieder, wenn wir die Möglichkeit haben, die Formulare unserer Kunden zu überprüfen, während wir ihre Anfragen bearbeiten.

Daher wollten wir einen kurzen Leitfaden zusammenstellen, der unseren Lesern hilft, beeindruckende Anmeldeformulare zu erstellen, um Ihre E-Mail-Liste aufzubauen.

In diesem Leitfaden führen wir Sie durch die Schritte zur Erstellung Ihres eigenen benutzerdefinierten Anmeldeformulars mit dem beliebtesten Page-Builder-Tool für WordPress – Elementor.

Benutzerdefinierte Anmeldeformulare in Elementor erstellen

Erstellung eines benutzerdefinierten Anmeldeformulars in Elementor

Verwenden Sie die Schnelllinks unten, um sofort zu einem beliebigen Abschnitt des Tutorials zu springen:

Legen wir los.

Schritt 1: Elementor und WPForms installieren

Da die meisten Leute Elementor zum Veröffentlichen ihrer Seiten verwenden, zeigen wir Ihnen, wie Sie benutzerdefinierte Anmeldeformulare mit Elementor erstellen.

Wenn Sie es noch nicht haben, installieren Sie Elementor auf Ihrer Website.

Sie benötigen für dieses Tutorial keine Premium-Elementor-Lizenz. Stattdessen können Sie Elementor zusammen mit WPForms verwenden, um kostenlos Anmeldeformulare zu erstellen! 😎

Wenn Sie nicht wissen, wie man Plugins installiert, lesen Sie diesen Anfängerleitfaden zur Plugin-Installation.

Obwohl Sie mit einer Kombination aus Elementor und WPForms völlig kostenlos optisch ansprechende benutzerdefinierte Anmeldeformulare erstellen können, empfehlen wir die WPForms Pro-Lizenz, um auf einige erweiterte Tools zuzugreifen und bessere Ergebnisse zu erzielen.

Nachdem Sie beide Plugins installiert haben, ist es an der Zeit, mit der Erstellung Ihres vollständig angepassten Anmeldeformulars zu beginnen!

Schritt 2: Eine Seite mit Elementor erstellen oder bearbeiten

Sie können ein Anmeldeformular zu einer vorhandenen oder einer brandneuen Seite hinzufügen. Normalerweise wird ein Newsletter-Formular als einer von mehreren Abschnitten in einer größeren Landingpage eingebettet. Aber der Einfachheit halber erstellen wir eine neue Seite, die nur ein Anmeldeformular enthält.

Öffnen Sie dazu Ihr WordPress-Dashboard und klicken Sie auf Seiten » Neue Seite hinzufügen.

Sobald Sie sich im WordPress-Block-Editor befinden, klicken Sie oben auf die Schaltfläche Mit Elementor bearbeiten.

Nachdem Sie auf die Schaltfläche geklickt haben, wird der Elementor-Editor in wenigen Sekunden geladen. Sie können mit dem Drag-and-Drop-Editor eine vollständige Landingpage erstellen.

Im nächsten Schritt verwenden wir das WPForms-Widget, um ein benutzerdefiniertes Anmeldeformular zu erstellen.

Schritt 3: Ein neues Anmeldeformular erstellen

Da wir hier nur ein benutzerdefiniertes Anmeldeformular hinzufügen müssen, suchen wir nach dem WPForms-Widget und ziehen es in den Bereich auf der rechten Seite.

Wenn Sie das WPForms-Widget in Ihre Seite eingefügt haben, können Sie entweder ein beliebiges gespeichertes Formular auswählen, das Sie mit WPForms erstellt haben, oder ein neues erstellen.

Wir erstellen ein neues Anmeldeformular, indem wir im linken Bereich auf die Schaltfläche + Neues Formular klicken.

An diesem Punkt beginnt der WPForms-Formularersteller, als Overlay zu laden. Hier können Sie das Anmeldeformular erstellen, das Sie auf Ihrer Seite einbetten möchten.

Beginnen Sie damit, Ihrem Formular einen Namen zu geben. Dies ist hilfreich, damit Sie es später in Ihrem WordPress-Dashboard referenzieren und finden können.

Scrollen Sie als Nächstes nach unten und verwenden Sie die Suchleiste unter dem Vorlagen-Auswahlbereich, um eine geeignete Vorlage zu finden. Für dieses Tutorial verwenden wir die Vorlage „Newsletter-Anmeldeformular“.

Nachdem Sie die Vorlage ausgewählt haben, wird der Formularersteller auf Ihrem Bildschirm geladen. Sie werden feststellen, dass diese Vorlage bereits die Felder „Name“ und „E-Mail“ enthält, was im Grunde alles ist, was Sie für die Newsletter-Anmeldung benötigen.

Aber der Spaß hört hier nicht auf! Wir können dieses Formular auf die nächste Stufe heben und ihm ein echtes „Glow-up“ verpassen.

Eine Möglichkeit, dies zu tun, besteht darin, eine unterhaltsame Überschrift hinzuzufügen, die mehr Leute zur Anmeldung einlädt.

Sie können dies mit dem Feld „Inhalt“ tun, das in WPForms Pro verfügbar ist. Wir fügen das Feld Inhalt oben im Formular ein.

Nachdem Sie das Feld hinzugefügt haben, klicken Sie darauf, um die zugehörigen Feldoptionen im linken Bereich zu öffnen.

Der Texteditor im linken Bereich ermöglicht es Ihnen, beliebigen Text ohne Code hinzuzufügen. Wir fügen etwas Text hinzu und formatieren ihn als Überschrift 4. Fügen wir auch ein Emoji hinzu, um den Text hervorzuheben! 🕺

Stellen Sie sicher, dass Sie unter dem Editor auf die Schaltfläche Vorschau aktualisieren klicken, um die Änderungen an Ihrem Formular auf der rechten Seite zu sehen.

Und während wir dabei sind, ändern wir auch den Text der Sende-Schaltfläche und machen ihn relevanter für die Art des Formulars.

Klicken Sie in der Seitenleiste des Formularerstellers auf Einstellungen » Allgemein. Scrollen Sie nach unten, bis Sie das Feld „Text der Sende-Schaltfläche“ finden. Sie können den Standardtext einfach durch Eingabe hier ersetzen.

Großartig! Das Formular nimmt bereits Gestalt an. Dies ist ein guter Zeitpunkt, um das Formular zu speichern, indem Sie oben auf Speichern klicken.

Aber ein Newsletter-Anmeldeformular wäre bedeutungslos, wenn es nicht in Ihr E-Mail-Marketing-Tool integriert wäre.

Im nächsten Schritt zeigen wir Ihnen, wie Sie Ihr Formular mit Ihrer Marketing-App integrieren, damit neue Abonnenten automatisch in Ihre Abonnentenliste kopiert werden.

Schritt 4: Anmeldeformular mit einer Marketingplattform verbinden

WPForms unterstützt verschiedene Marketing-Integrationen ab den Plus- und höheren Plänen. Wenn Sie WPForms Lite verwenden, können Sie die Constant Contact-Integration weiterhin kostenlos nutzen.

In diesem Beispiel zeigen wir Ihnen kurz, wie Sie Ihr Anmeldeformular mit Brevo verbinden.

Gehen Sie einfach zum Tab Marketing in der Seitenleiste.

Wählen Sie dann den Dienst aus, mit dem Sie Ihr Formular verbinden möchten. Mit Ausnahme von Constant Contact erfordern alle unterstützten Marketing-Integrationen, dass Sie zuerst das entsprechende Add-on installieren.

Wenn Sie das Add-on noch nicht haben, installiert WPForms es für Sie, wenn Sie darauf klicken.

In diesem Fall verwenden wir Brevo. Als wir auf Brevo im Tab „Marketing“ klickten, erhielten wir eine Aufforderung zur Installation. Nachdem wir auf Ja, installieren und aktivieren geklickt hatten, dauerte es nur etwa 5 Sekunden, bis das Brevo-Add-on installiert und einsatzbereit war.

Klicken Sie als Nächstes auf der linken Seite auf Brevo und dann oben rechts auf Neue Konto hinzufügen.

Geben Sie nun einfach Ihren Brevo API-Schlüssel und einen Kontonamen ein. Wenn Sie weitere Hilfe beim Auffinden Ihres Brevo API-Schlüssels benötigen, sehen Sie in unserer Brevo Addon-Dokumentation nach Details.

Klicken Sie nach Eingabe der erforderlichen Informationen auf Hinzufügen.

Sobald Sie mit Ihrem Brevo-Konto verbunden sind, wird auf der rechten Seite eine neue Liste von Einstellungen angezeigt.

Verwenden Sie die Dropdown-Felder, um zu konfigurieren, wie Ihr Formular mit Ihrem Brevo-Konto funktionieren soll. Sie können festlegen, welche Aktion in Brevo ausgeführt werden soll, wenn das Formular übermittelt wird, in welche Liste neue Abonnenten hinzugefügt oder entfernt werden sollen, die Zuordnung der E-Mail-Felder und mehr.

Wenn Sie fertig sind, stellen Sie sicher, dass Sie oben auf Speichern klicken.

Die Marketing-Integration ist nun abgeschlossen. Das war einfach, nicht wahr!?

Schritt 5: Ihr Anmeldeformular gestalten und veröffentlichen

An dieser Stelle sind wir mit der Einrichtung der erforderlichen Funktionalitäten für das Anmeldeformular fertig. Aber wie wir zu Beginn dieses Tutorials betont haben, muss ein wirkungsvolles Formular mehr als nur funktional sein – es muss auch optisch beeindruckend sein.

Während wir unser Formular bereits durch das Hinzufügen von Text und Emojis mit dem Feld Inhalt spannender gestaltet haben, können wir mit der kombinierten Leistung von WPForms und Elementor noch weiter gehen.

Nachdem Ihr Formular fertig ist, verlassen Sie WPForms einfach, indem Sie auf das Kreuzsymbol klicken. Sie sollten nun den Elementor-Editor mit Ihrem neu erstellten Formular als Widget eingebettet sehen.

Klicken Sie auf das Formular und wählen Sie dann die Registerkarte Stile auf der linken Seite aus.

 

Unter dieser Registerkarte finden Sie Optionen zum Anpassen der Stile verschiedener Formularkomponenten. Sie können beispielsweise die Stile Ihrer Felder, Labels und Schaltflächen ohne Code anpassen.

In unserem Formular sind die Feldränder standardmäßig rechteckig mit geraden Ecken. Wenn Sie jedoch abgerundete Feldränder wünschen, können Sie dies tun, indem Sie einfach den Wert für den Randradius unter Feldstile erhöhen.

Ebenso können Sie die Farbe Ihrer Felder, Labels und Schaltflächen mit einem einzigen Klick ändern. Wir verwenden die Standardfarben, da sie perfekt zu unserem Thema passen. Sie können jedoch gerne mit verschiedenen Farben für Ihr Formular experimentieren.

In Elementor können Sie auch die Stile Ihres Formularcontainers ändern. Klicken Sie dazu auf die Registerkarte Erweitert.

Hier finden Sie eine Reihe faszinierender Einstellungen, darunter Layoutanpassungen, Animationseffekte, Hintergrundanpassungen und mehr.

Fügen wir dem Formularcontainer eine Hintergrundfarbe hinzu, um ihm ein lebendigeres Aussehen zu verleihen. Klicken Sie auf die Option Hintergrund, um das Menü mit zusätzlichen Einstellungen zu erweitern.

Wir fügen eine Volltonfarbe hinzu, indem wir auf das Farbauswahl-Symbol auf der rechten Seite klicken.

Das Farbauswahlwerkzeug ermöglicht es Ihnen, bequem mit einem Klick jede beliebige Farbe auszuwählen.

Nachdem Sie die Farbe ausgewählt haben, sieht das Formular sofort viel ansprechender aus!

Die Elemente im Formular berühren jedoch die Ränder des Containers, was nicht sehr gut aussieht.

Das ist eine einfache Lösung!

Klicken Sie im linken Bereich unter dem Menü Erweitert auf die Option Layout, um auf die Einstellungen für Ränder und Abstände zuzugreifen. Wir haben einfach etwas Abstand hinzugefügt und die Ergebnisse sehen großartig aus!

An diesem Punkt sind wir bereit, Ihr Formular zu veröffentlichen. Wenn Sie jedoch weitere Anpassungen wünschen, können Sie hier gerne mehr Zeit verbringen und verschiedene Optionen erkunden.

Wenn Sie bereit sind, drücken Sie die Schaltfläche Veröffentlichen unten.

Sie sehen sofort eine Meldung, die fragt, ob Sie Ihre veröffentlichte Seite jetzt anzeigen möchten.

Zeigen Sie Ihre Seite nach der Veröffentlichung an.

Und das ist alles!

Sie haben gerade ein benutzerdefiniertes Anmeldeformular mit Elementor und WPForms hinzugefügt.

Damit können Sie sicherstellen, dass Ihr Formular für Ihre Website einzigartig aussieht und mit zeitsparenden Integrationen ausgestattet ist, die Ihnen helfen, Ihre E-Mail-Abonnenten problemlos zu vergrößern!

FAQs zu Elementor-Anmeldeformularen

Haben Sie noch Fragen zur Erstellung von Anmeldeformularen in Elementor? Hier sind einige Fragen, die uns unsere Kunden zuvor gestellt haben.

Benötige ich Elementor Pro, um ein Anmeldeformular zu erstellen?

Nein, Sie benötigen Elementor Pro nicht, um ein Anmeldeformular zu erstellen, solange Sie WPForms installiert haben. Sie können auf das WPForms-Widget in Elementor zugreifen, ohne auf die Pro-Version upgraden zu müssen. Elementor hat jedoch auch einen eigenen Formularersteller. Wenn Sie Anmeldeformulare nur mit Elementor erstellen möchten, benötigen Sie eine Pro-Lizenz.

Während Elementor ein fantastisches Seitenerstellungstool ist, ist der Elementor-Formularersteller einfacher und hat im Vergleich zu fortgeschrittenen Formularerstellern wie WPForms verschiedene Einschränkungen.

Wie kann ich mein Anmeldeformular an das Branding meiner Website anpassen?

Der einfachste Weg, Ihre Anmeldeformulare an das Website-Branding anzupassen, ist die Verwendung der Theme-Farben Ihrer Website für verschiedene Aspekte Ihres Formulars. WPForms wählt automatisch die primären und sekundären Farben Ihres Themes aus, sodass Sie diese Farben einfach für verschiedene Komponenten Ihres Formulars wie Ränder, Beschriftungen und Schaltflächen verwenden können.

Sie können auf diese Stilanpassungseinstellungen im Elementor WPForms-Widget zugreifen, indem Sie auf die Registerkarte "Stil" klicken. Dort finden Sie die Option, die Farbe verschiedener Teile Ihres Formulars zu ändern, indem Sie aus verfügbaren Theme-Farben auswählen, um Ihr Branding anzupassen. Es ist keine Programmierung erforderlich!

Kann ich benutzerdefiniertes CSS verwenden, um mein Anmeldeformular zu gestalten?

Ja, Sie können benutzerdefinierte CSS-Klassen zu Ihrem Anmeldeformular hinzufügen, wenn Sie WPForms verwenden. Klicken Sie dazu auf Stil, nachdem Sie das WPForms-Widget in Elementor ausgewählt haben, und klicken Sie dann auf Erweitert. Sie können dann benutzerdefiniertes CSS einfügen, um Ihr Anmeldeformular zu gestalten.

Wie erstelle ich ein mehrstufiges Anmeldeformular?

WPForms bietet Ihnen mehrere Möglichkeiten, ein mehrstufiges Anmeldeformular zu erstellen. Sie können Seitenumbrüche hinzufügen, um Ihr Formular in mehrere Seiten aufzuteilen, oder Sie können das Lead Forms Addon verwenden, das ein reguläres Formular automatisch in ein mehrstufiges Anmeldeformular mit Seitenumbrüchen dazwischen umwandelt.

Erstellen Sie als Nächstes ein benutzerdefiniertes ConvertKit-Formular

WPForms integriert sich mit verschiedenen Marketingplattformen, einschließlich ConvertKit. Wir haben eine spezielle Anleitung, die Ihnen zeigt, wie Sie ein benutzerdefiniertes ConvertKit-Formular erstellen. Schauen Sie sich das unbedingt an!

Sie können auch kostenlose Bestellformularoptionen vergleichen, wenn Sie online Produkte verkaufen.

Benutzerdefinierte Anmeldeformulare in Elementor erstellen

Bereit, Ihr benutzerdefiniertes Anmeldeformular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.