Ein WordPress-Popup-Formular per Klick öffnen
Einleitung: Warum Popup-Formulare in WordPress?
Popup-Formulare sind ein effektives Werkzeug, um die Interaktion mit Besuchern Ihrer WordPress-Website zu fördern. Sie ermöglichen es, aufmerksamkeitsstarke Nachrichten, Anmeldungen, Angebote oder Kontaktmöglichkeiten zu präsentieren, ohne den Nutzer von der aktuellen Seite abzulenken. Durch das Öffnen eines Popup-Formulars per Klick wird das Nutzererlebnis weiter verbessert, da die Aktion des Nutzers direkt die Anzeige des Formulars auslöst. Dies kann die Conversion Rate deutlich erhöhen, da der Nutzer bereits ein gewisses Interesse signalisiert hat.
Popup-Formulare eignen sich hervorragend für:
- Lead-Generierung (z.B. Newsletter-Anmeldungen)
- Ankündigungen (z.B. Sonderangebote, Events)
- Kontaktanfragen
- Umfragen und Feedback
- Produkt-Promotions
Dieser Artikel zeigt Ihnen verschiedene Methoden, wie Sie in WordPress ein Popup-Formular per Klick öffnen können, von einfachen Lösungen mit Plugins bis hin zu fortgeschritteneren Ansätzen mit benutzerdefiniertem Code.
Methoden zum Öffnen eines Popup-Formulars per Klick
Es gibt verschiedene Ansätze, um ein Popup-Formular per Klick in WordPress zu implementieren:
1. **Verwendung von WordPress-Plugins:** Dies ist die einfachste und häufigste Methode. Es gibt zahlreiche Plugins, die Popup-Funktionalität mit Klick-Triggern bieten.
2. **Benutzerdefinierter Code (JavaScript & CSS):** Für Entwickler, die mehr Kontrolle über das Design und die Funktionalität wünschen, kann benutzerdefinierter Code eine flexible Lösung sein.
3. **Page Builder Integration:** Einige Page Builder wie Elementor oder Beaver Builder bieten integrierte Popup-Funktionen, die per Klick ausgelöst werden können.
Popup-Formulare mit WordPress-Plugins erstellen
Die Verwendung eines Plugins ist der einfachste Weg, um ein Popup-Formular per Klick in WordPress zu erstellen. Es gibt eine Vielzahl von Plugins mit unterschiedlichen Funktionen und Preismodellen. Hier sind einige beliebte Optionen:
* **OptinMonster:** Ein leistungsstarkes Plugin mit vielen Anpassungsmöglichkeiten, A/B-Testing und detaillierten Analysen.
* **Popup Maker:** Ein kostenloses Plugin mit grundlegenden Popup-Funktionen, das durch kostenpflichtige Erweiterungen erweitert werden kann.
* **Thrive Leads:** Ein Plugin speziell für Lead-Generierung mit vielen Vorlagen und Triggern.
Beispiel: Verwendung von Popup Maker
Popup Maker ist eine beliebte und flexible Option für das Erstellen von Popups. So erstellen Sie ein Popup-Formular und öffnen es per Klick:
1. **Installation und Aktivierung:** Installieren und aktivieren Sie das Popup Maker Plugin aus dem WordPress Plugin-Verzeichnis.
2. **Popup erstellen:** Gehen Sie zu “Popup Maker” im WordPress Dashboard und klicken Sie auf “Add Popup”.
3. **Popup-Inhalt definieren:** Geben Sie dem Popup einen Titel und fügen Sie den Inhalt hinzu. Dies kann ein Formular, Text, Bilder oder beliebige andere Inhalte sein. Sie können ein Kontaktformular-Plugin wie Contact Form 7 oder WPForms verwenden, um das Formular zu erstellen und den Shortcode in den Popup-Inhalt einfügen.
4. **Trigger hinzufügen:** Unter “Popup Settings” finden Sie den Tab “Trigger”. Klicken Sie auf “Add New Trigger”. Wählen Sie “Click Open” als Trigger-Typ. Sie können auch einstellen, ob der Trigger nur einmal pro Sitzung ausgelöst werden soll.
5. **CSS-Selektor eingeben:** Im “Click Open” Trigger müssen Sie den CSS-Selektor für das Element angeben, das das Popup öffnen soll. Dies kann eine ID (#meinknopf) oder eine Klasse (.meineklasse) sein.
6. **Popup veröffentlichen:** Speichern und veröffentlichen Sie das Popup.
7. **Link zum Element hinzufügen:** Fügen Sie auf der Seite, auf der Sie das Popup anzeigen möchten, einen Link oder Button mit dem entsprechenden CSS-Selektor hinzu.
Beispiel-HTML-Code für einen Button:
<button class="meineklasse">Kontaktformular öffnen</button>
Stellen Sie sicher, dass der CSS-Selektor im HTML-Code mit dem im Popup Maker Trigger übereinstimmt.
Benutzerdefinierter Code mit JavaScript und CSS
Für Entwickler, die mehr Kontrolle über das Design und die Funktionalität wünschen, kann benutzerdefinierter Code eine flexible Lösung sein. Dieser Ansatz erfordert Kenntnisse in HTML, CSS und JavaScript.
Grundlegendes HTML- und CSS-Gerüst
Zunächst benötigen Sie ein HTML-Element (z.B. ein `div`), das als Popup-Container dient. Dieses Element sollte standardmäßig ausgeblendet sein.
<div id="meinPopup" class="popup">
<div class="popup-content">
<span class="close">×
<p>Inhalt des Popup-Formulars</p>
</div>
</div>
<button id="popupBtn">Popup öffnen</button>
Das dazugehörige CSS könnte wie folgt aussehen:
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
JavaScript-Code zum Öffnen und Schließen des Popups
Nun benötigen Sie JavaScript-Code, um das Popup beim Klick auf einen Button zu öffnen und beim Klick auf das Schließen-Symbol oder außerhalb des Popups zu schließen.
<script>
document.addEventListener('DOMContentLoaded', function() {
var popup = document.getElementById("meinPopup");
var btn = document.getElementById("popupBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
popup.style.display = "block";
}
span.onclick = function() {
popup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
});
</script>
Dieser Code sucht nach dem Button mit der ID “popupBtn” und dem Popup mit der ID “meinPopup”. Beim Klick auf den Button wird das Popup angezeigt. Beim Klick auf das Schließen-Symbol oder außerhalb des Popups wird es wieder ausgeblendet.
Integration des Codes in WordPress
Diesen Code können Sie entweder direkt in das Theme einfügen (nicht empfohlen, da Theme-Updates den Code überschreiben können) oder über ein Plugin wie “Code Snippets”. “Code Snippets” ermöglicht es Ihnen, benutzerdefinierte PHP-, CSS- und JavaScript-Code-Schnipsel zu erstellen und zu verwalten, ohne die Theme-Dateien direkt bearbeiten zu müssen.
Popup-Formulare mit Page Buildern erstellen
Viele Page Builder wie Elementor, Beaver Builder oder Divi bieten integrierte Popup-Funktionen. Diese Funktionen sind oft sehr benutzerfreundlich und ermöglichen es, Popups per Drag & Drop zu erstellen und zu gestalten.
Beispiel: Elementor Popup
Elementor bietet einen leistungsstarken Popup-Builder. So erstellen Sie ein Popup-Formular und öffnen es per Klick:
1. **Elementor Popup erstellen:** Gehen Sie im WordPress Dashboard zu “Templates” -> “Popups” und klicken Sie auf “Add New Popup”.
2. **Template auswählen oder erstellen:** Wählen Sie ein vorgefertigtes Popup-Template oder erstellen Sie ein neues Popup von Grund auf.
3. **Formular hinzufügen:** Fügen Sie ein Formular-Widget zum Popup hinzu. Sie können das Elementor Formular-Widget oder ein anderes Formular-Plugin-Widget verwenden.
4. **Design anpassen:** Gestalten Sie das Popup nach Ihren Wünschen.
5. **Trigger einstellen:** Unter “Publish” -> “Triggers” wählen Sie “On Click” als Trigger. Geben Sie den CSS-Selektor für das Element an, das das Popup öffnen soll.
6. **Bedingungen festlegen:** Legen Sie fest, auf welchen Seiten oder Beiträgen das Popup angezeigt werden soll.
7. **Popup veröffentlichen:** Veröffentlichen Sie das Popup.
8. **Link zum Element hinzufügen:** Fügen Sie auf der Seite, auf der Sie das Popup anzeigen möchten, einen Link oder Button mit dem entsprechenden CSS-Selektor hinzu.
Best Practices für Popup-Formulare
* **Relevanz:** Stellen Sie sicher, dass das Popup-Formular für den Inhalt der Seite relevant ist.
* **Dezent:** Vermeiden Sie aufdringliche Popups, die das Nutzererlebnis beeinträchtigen.
* **Wertversprechen:** Bieten Sie einen klaren Mehrwert, z.B. einen Rabattcode oder exklusive Inhalte.
* **Einfachheit:** Gestalten Sie das Formular so einfach wie möglich, um die Abbruchrate zu reduzieren.
* **Mobile Optimierung:** Stellen Sie sicher, dass das Popup auf mobilen Geräten gut aussieht und funktioniert.
Fazit
Das Öffnen eines WordPress-Popup-Formulars per Klick ist eine effektive Methode, um die Interaktion mit Besuchern zu fördern und die Conversion Rate zu erhöhen. Egal, ob Sie ein Plugin verwenden, benutzerdefinierten Code schreiben oder die integrierten Funktionen eines Page Builders nutzen, es gibt viele Möglichkeiten, diese Funktionalität in Ihre WordPress-Website zu integrieren. Berücksichtigen Sie dabei immer die Nutzererfahrung und die Best Practices, um das bestmögliche Ergebnis zu erzielen.
