WPForms zu einem Elementor-Popup hinzufügen

Möchten Sie Ihre WordPress-Formulare zu einem Elementor-Popup hinzufügen? Wenn Sie bereits Elementor Pro auf Ihrer Website ausführen, möchten Sie vielleicht das integrierte Popup-Tool verwenden, um ein Formular anzuzeigen.

Um ein neues Popup mit Elementor zu erstellen, müssen Sie in der Seitenleiste Ihres WordPress-Adminbereichs zu Vorlagen » Popups navigieren. Klicken Sie dann auf die grüne Schaltfläche Neue Popup-Vorlage erstellen.

---

Stellen Sie vor Beginn sicher, dass Sie WPForms installieren und aktivieren auf Ihrer WordPress-Website und Ihren Lizenzschlüssel überprüfen.

Erstellen eines Popups

Um ein neues Popup mit Elementor zu erstellen, müssen Sie im Seitenbereich Ihres WordPress-Adminbereichs zu Vorlagen » Popups navigieren. Klicken Sie dann auf die grüne Schaltfläche Neues Popup hinzufügen.

Dadurch wird eine Überlagerung geöffnet, in der Sie Ihrem Popup einen Namen geben können. In unserem Beispiel nennen wir unsere Vorlage Kontaktieren Sie uns.

Klicken Sie dann auf die grüne Schaltfläche Vorlage erstellen.

Einbetten Ihres Formulars

Als Nächstes sehen Sie eine weitere Überlagerung mit der Vorlagenbibliothek von Elementor, wo Sie eine vorgefertigte Vorlage für Ihr Popup auswählen können.

Für dieses Beispiel klicken wir auf die Schaltfläche X, um die Vorlagenbibliothek zu verlassen und unser Popup manuell von Grund auf neu zu erstellen.

Suchen Sie im Hauptvorlagen-Builder in der linken Seitenleiste nach dem WPForms-Widget. Ziehen Sie es dann per Drag & Drop in den Builder.

Sobald Sie das WPForms-Widget zu Ihrem Popup hinzugefügt haben, können Sie ein vorhandenes Formular darin einbetten oder ein neues erstellen.

Einbetten eines vorhandenen Formulars

Im WPForms Elementor-Widget sehen Sie ein Dropdown-Menü, in dem Sie den Namen des vorhandenen Formulars auswählen können, das Sie einbetten möchten.

Wenn Sie Änderungen an diesem Formular vornehmen möchten, können Sie dies direkt im Popup-Builder tun, indem Sie in der Seitenleiste auf den Link Das ausgewählte Formular bearbeiten klicken.

Dadurch wird ein Popup mit dem WPForms-Formular-Builder geöffnet, damit Sie die Änderungen an Ihrem Formular bearbeiten und speichern können.

Erstellen eines neuen Formulars

Wenn Sie ein neues Formular erstellen möchten, klicken Sie im linken Bereich auf die Schaltfläche + Neues Formular.

Dadurch wird ein Popup mit dem WPForms-Formular-Builder geöffnet, in dem Sie Ihrem Formular einen Namen geben, eine Vorlage auswählen und mit der Anpassung beginnen können.

Stellen Sie sicher, dass Sie Ihr Formular speichern, bevor Sie den Builder schließen. Wenn Sie später Änderungen an Ihrem neuen Formular vornehmen möchten, klicken Sie in der linken Seitenleiste auf den Link Das ausgewählte Formular bearbeiten, um den Formular-Builder erneut zu öffnen.

Anpassen Ihres Formulars

Sobald Sie ein Formular zu Ihrem Popup hinzugefügt haben, können Sie dessen Darstellung im Tab Stil des Elementor-Builders anpassen, damit sie zum Look & Feel Ihrer Website passt.

Der Stil-Tab ermöglicht es Ihnen, das Aussehen von Formularfeldern, Labels und Schaltflächen anzupassen, ohne CSS-Kenntnisse zu benötigen.

Weitere Informationen finden Sie in unserem Leitfaden zum Anpassen Ihrer Formulare.

Aktivieren der AJAX-Formularübermittlung

Unabhängig davon, ob Sie ein vorhandenes Formular zu Ihrem Popup hinzufügen oder ein neues erstellen, ist es ratsam zu prüfen, ob die AJAX-Formularübermittlung aktiviert ist. Dies verhindert, dass sich Ihr Popup nach der Übermittlung schließt und die Bestätigungsnachricht des Formulars ausgeblendet wird.

Die AJAX-Übermittlung ist für alle neuen Formulare standardmäßig aktiviert. Sie können jedoch überprüfen, ob diese Option aktiviert ist, indem Sie im Popup-Builder in der Seitenleiste auf den Link Ausgewähltes Formular bearbeiten klicken und im Formular-Builder zu Einstellungen » Allgemein navigieren.

Stellen Sie dann im Abschnitt Erweitert sicher, dass die Einstellung AJAX-Formularübermittlung aktivieren aktiviert ist.

Speichern Sie Ihre Änderungen, bevor Sie den Formular-Builder schließen.

Aktivieren von "Nicht schließen beim Überlagern"

Nachdem Sie Ihr Formular ausgewählt und eingebettet haben, müssen Sie eine Option für Ihr Popup konfigurieren, um zu verhindern, dass Ihr Formular geschlossen wird, wenn es ein Feld für Datei-Uploads oder Datum/Uhrzeit enthält.

Klicken Sie auf das Zahnradsymbol in der unteren Menüleiste von Elementor, um die Einstellungen des Popups zu öffnen. Aktivieren Sie im Tab Erweitert die Option Schließen bei Overlay verhindern.

Wenn Sie mit der Einrichtung Ihres Popups fertig sind, klicken Sie auf die Schaltfläche Veröffentlichen in der unteren linken Ecke des Bildschirms.

Konfigurieren der Popup-Einstellungen

Bevor Elementor Ihr Popup veröffentlicht, müssen Sie die Einstellungen für Bedingungen, Auslöser und Erweiterte Regeln konfigurieren. Diese Optionen werden angezeigt, wenn Sie auf die Schaltfläche Veröffentlichen im Popup-Builder klicken.

In diesem Beispiel legen wir die Bedingungen so fest, dass unser Popup auf unserer gesamten Website angezeigt wird.

Wir legen den Auslöser des Popups auch auf die Einstellung Beim Laden der Seite fest.

Auf diese Weise sehen unsere Benutzer unser Popup, egal welche Seite sie besuchen, sobald sie geladen ist.

Wir werden unserem Beispiel keine erweiterten Regeln hinzufügen. Wenn Sie mit der Konfiguration der Einstellungen Ihres Popups fertig sind, klicken Sie auf die Schaltfläche Speichern & Schließen .

Ihr Popup wird dann veröffentlicht. Sie können das Frontend Ihrer Website besuchen, um es anzuzeigen.

Das ist alles! Sie können jetzt Ihr WordPress-Formular zu einem Elementor-Popup hinzufügen.

Möchten Sie als Nächstes lernen, wie Sie Leads erfassen, auch wenn Benutzer Ihre Formulare nicht vollständig ausfüllen? Lesen Sie unbedingt unseren Leitfaden zu unserem Form Abandonment Addon.