So fügen Sie ein Kontaktformular-Popup in WordPress hinzu

Haben Sie schon einmal Besucher Ihre Website durchsuchen sehen, nur um sie zu verlassen, ohne Kontakt aufzunehmen? Das ist frustrierend, besonders wenn Sie wissen, dass sie interessiert sind, aber keine Verbindung herstellen können.

Ein einfaches, gut getimtes Popup kann den Unterschied ausmachen. 💡

Wenn es durchdacht platziert wird, befindet sich Ihr Kontaktformular genau dort, wo Besucher es benötigen. Dies kann zu mehr Anfragen, Feedback und Konversionen führen.

Bei WPBeginner sind wir große Fans von WPForms, da es anfängerfreundlich, leistungsstark und perfekt für die Erstellung aller Arten von Formularen ist. Noch besser ist, dass Sie es mit OptinMonster kombinieren können, um ein Kontaktformular-Popup zu erstellen, das hilfreich und nicht aufdringlich wirkt.

In dieser Anleitung führen wir Sie durch den Prozess, wie Sie ein Kontaktformular-Popup in WordPress hinzufügen. Eines, das Besucher zu Leads macht, ohne sie zu verärgern.

Warum ein Kontaktformular-Popup verwenden?

Ein Kontaktformular-Popup erleichtert es Besuchern, Sie zu kontaktieren, ohne ihr Surfen zu unterbrechen oder nach Ihrer Kontaktseite zu suchen.

Das ist wichtig, denn jede WordPress-Website benötigt eine einfache Möglichkeit für Benutzer, Fragen, Feedback oder Supportanfragen zu senden. Aber wenn Ihr Kontaktformular nur auf einer einzigen Seite existiert, finden es viele Besucher vielleicht nie. Und das führt oft zu verlustigen Leads.

Ein Kontaktformular-Popup löst dieses Problem, indem es Besuchern ermöglicht, das Formular mit einem einzigen Klick von jeder Seite Ihrer Website aus zu öffnen. Sie können sich sofort melden, ohne die Seite zu verlassen, die sie gerade ansehen.

Es hilft auch, die Leute auf Ihrer Website zu halten, anstatt sie woanders hinzuschicken. Und als Bonus können Sie diese Popups verwenden, um E-Mail-Adressen zu sammeln und Ihre E-Mail-Liste zu vergrößern.

In diesem Leitfaden zeigen wir Ihnen, wie Sie ein Kontaktformular erstellen und es in ein Popup in WordPress einfügen.

Wir geben Ihnen auch unsere Expertentipps, wie Sie ein Popup erstellen, das Aufmerksamkeit erregt, ohne aufdringlich zu sein. Dieser Ansatz stellt sicher, dass Ihre WordPress-Website benutzerfreundlich bleibt und gleichzeitig die Interaktionsmöglichkeiten maximiert werden.

Und hier ist ein kurzer Überblick über alle Schritte, die Sie durchlaufen werden:

Bereit? Legen wir los.

Schritt 1: Erstellen Sie ein WordPress-Kontaktformular

Zuerst müssen Sie ein WordPress-Kontaktformular-Plugin auswählen.

Es gibt viele kostenlose und kostenpflichtige Optionen, aber wir empfehlen die Verwendung von WPForms, da es der beste WordPress-Formularersteller auf dem Markt ist. Dank der KI-Tools, des Drag-and-Drop-Builders und der vorgefertigten Formularvorlagen ist es auch am anfängerfreundlichsten.

Bei WPBeginner verwenden wir es selbst auf unserer Website, um Kontaktformulare, jährliche Benutzerumfragen und Formulare zur Website-Migration anzuzeigen.

Details zu unseren Erfahrungen mit dem Plugin finden Sie in unserem vollständigen WPForms-Testbericht.

Gehen Sie zunächst auf die WPForms-Website und klicken Sie auf die Schaltfläche „Jetzt WPForms erhalten“. Befolgen Sie dann einfach die Schritte, um Ihr Konto zu erstellen und den Kauf abzuschließen.

Nach dem Kauf gelangen Sie zu Ihrem WPForms-Konto-Dashboard, wo Sie den Lizenzschlüssel des Plugins finden.

Navigieren Sie von hier aus in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen.

Auf dem nächsten Bildschirm verwenden Sie die Suchleiste, um das WPForms-Plugin schnell zu finden.

Wenn es in den Suchergebnissen erscheint, klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“.

Wenn Sie Hilfe benötigen, finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Wenn Sie WPForms Pro kaufen, müssen Sie Ihren Lizenzschlüssel aktivieren. Gehen Sie zu WPForms » Einstellungen, geben Sie Ihren Schlüssel in das entsprechende Feld ein und klicken Sie auf „Schlüssel überprüfen“.

Von hier aus können Sie Ihr Kontaktformular erstellen.

Navigieren Sie von Ihrem WordPress-Dashboard aus zu WPForms » Neu hinzufügen.

Auf dem nächsten Bildschirm können Sie einen Formularnamen eingeben.

Dann wählen Sie aus, wie Sie Ihr Formular erstellen möchten – mit WPForms AI, einer vorgefertigten Vorlage oder einer leeren Leinwand.

Wenn Sie den KI-Formularersteller verwenden möchten, geben Sie einfach eine Eingabeaufforderung ein. Innerhalb von Sekunden wird Ihr Formular generiert.

Dennoch werden wir für dieses Tutorial die Vorlage 'Einfaches Kontaktformular' verwenden, da sie alles enthält, was wir brauchen.

Als Nächstes können Sie Felder im Formular mit dem Drag-and-Drop-Builder hinzufügen.

Ziehen Sie einfach die Felder, die Sie dem Formular hinzufügen möchten, aus den Optionen im Menü auf der linken Seite. Sie können die Reihenfolge der Felder im Formular auch ändern.

WPForms ermöglicht es Ihnen auch, jedes Feld im Kontaktformular anzupassen.

Wenn Sie beispielsweise auf das Feld „Name“ klicken, sehen Sie Optionen, um dessen Bezeichnung und Format zu ändern. Sie können sogar eine Beschreibung hinzufügen oder ein Feld als erforderlich markieren.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Erstellung eines Kontaktformulars.

Wenn Sie fertig sind, klicken Sie auf die Option „Einstellungen“, um die Formularbenachrichtigung und -bestätigung zu konfigurieren.

Im Abschnitt „Allgemein“ können Sie das Formular umbenennen, eine Formularbeschreibung hinzufügen, den Text des Sende-Buttons ändern, Anti-Spam-Schutz aktivieren und vieles mehr.

Als Nächstes können Sie zur Option 'Benachrichtigungseinstellungen' gehen. Standardmäßig werden die Benachrichtigungen an die Admin-E-Mail gesendet, die auf Ihrer WordPress-Website eingerichtet ist.

Sie können Ihre Kontaktformularbenachrichtigung jedoch an jede gewünschte E-Mail-Adresse senden. Wenn Sie Formularbenachrichtigungen an mehrere E-Mails senden möchten, trennen Sie jede E-Mail mit einem Komma.

Für die E-Mail-Betreffzeile verwendet WPForms den Namen des Formulars, den Sie zuvor eingegeben haben. Sie können den Text der Betreffzeile jedoch nach Belieben bearbeiten.

Gehen wir nun zur Option „Bestätigungen“.

WPForms verwendet „Nachricht“ als Standard-Bestätigungstyp. Dies zeigt eine Dankesnachricht unmittelbar nach dem Absenden des Formulars an. Daneben sehen Sie die Optionen „Seite anzeigen“ und „URL aufrufen (Weiterleiten)“.

Für Popups empfehlen wir jedoch, diese Einstellung „Nachricht“ beizubehalten. Benutzer weiterzuleiten zu einer anderen Seite kann manchmal abrupt wirken, wenn sie mit einem Popup interagieren.

Sobald Sie mit der Erstellung eines Kontaktformulars fertig sind, klicken Sie auf die Schaltfläche „Speichern“ in der oberen rechten Ecke, um Ihre Änderungen zu speichern.

Als Nächstes können Sie in der oberen Ecke neben der Schaltfläche „Speichern“ auf die Option „Einbetten“ klicken, um den Shortcode des Formulars zu erhalten. Sie benötigen diese Informationen, um Ihr Formular in einem Popup anzuzeigen.

Wenn ein neues Popup erscheint, können Sie die Option „Shortcode verwenden“ auswählen.

WPForms zeigt dann den Shortcode für Ihr Kontaktformular an, sobald Sie auf den Link klicken. Wir empfehlen Ihnen, diesen Tab oder dieses Fenster geöffnet zu lassen, da Sie den Shortcode im nächsten Schritt benötigen, wo wir Ihnen zeigen, wie Sie Ihr Kontaktformular in einem Popup hinzufügen.

Schritt 2: Fügen Sie Ihrer WordPress-Site ein Kontaktformular-Popup hinzu

Um ein Kontaktformular-Popup zu erstellen, benötigen Sie ein WordPress-Popup-Plugin.

Wir empfehlen die Verwendung von OptinMonster, da es das beste Plugin für Lead-Generierung und Conversion-Optimierung für WordPress ist. Es ist auch eines der beliebtesten, mit über 1,2 Millionen Websites, die dieses leistungsstarke Tool nutzen.

Bei WPBeginner verwenden wir OptinMonster für verschiedene Aufgaben, einschließlich der Bewerbung von Sonderangeboten und Deals in Popups, Slide-ins und Header-Bannern. Wenn Sie weitere Informationen wünschen, lesen Sie gerne unseren vollständigen OptinMonster-Testbericht.

Für dieses Tutorial verwenden wir die OptinMonster Pro-Version, die eine übersichtliche Vorlage und erweiterte Anzeigeregeln zum Anzeigen des Popups enthält.

Melden Sie sich also für ein Konto an, indem Sie die OptinMonster-Website besuchen. Besuchen Sie einfach die Website und klicken Sie auf die Schaltfläche „OptinMonster jetzt erhalten“.

Nach der Anmeldung gelangen Sie zu Ihrem OptinMonster-Konto-Dashboard. Lassen Sie diesen Tab geöffnet, da wir Ihr Konto gleich mit WordPress verbinden werden.

Als Nächstes müssen Sie das kostenlose OptinMonster-Plugin auf Ihrer Website installieren und aktivieren. Dieses Plugin fungiert als Verbindung zwischen Ihrer Website und Ihrem OptinMonster-Konto.

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins » Plugin hinzufügen.

Verwenden Sie auf dem nächsten Bildschirm die Suchleiste, um nach 'OptinMonster' zu suchen.

Klicken Sie dann auf 'Jetzt installieren' und 'Aktivieren', um es ordnungsgemäß zu aktivieren.

Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nachdem das Plugin aktiv ist, sehen Sie den Einrichtungsassistenten.

Klicken Sie auf die Schaltfläche „Ihr bestehendes Konto verbinden“.

Ein Popup-Fenster wird nun angezeigt und OptinMonster wird Sie auffordern, sich mit Ihrem Konto zu verbinden.

Klicken Sie einfach auf die Schaltfläche „Mit WordPress verbinden“.

Jetzt, da Ihr Konto verbunden ist, besteht der nächste Schritt darin, eine neue Kampagne für Ihr Kontaktformular-Popup zu erstellen.

Sie können damit beginnen, zu OptinMonster » Kampagnen zu navigieren und dann auf die Schaltfläche „Erste Kampagne erstellen“ zu klicken.

Auf dem nächsten Bildschirm müssen Sie einen Kampagnentyp auswählen.

Da wir ein Kontaktformular-Popup erstellen, wählen Sie 'Popup' als Kampagnentyp.

Scrollen Sie danach auf der Seite nach unten, um eine Vorlage auszuwählen.

OptinMonster bietet über 75 attraktive und hochkonvertierende Designs für Ihre Popups. Sie können jede Vorlage auswählen, die Ihnen gefällt.

Sobald Sie sich für die Vorlage entschieden haben, geben Sie einfach einen Namen für Ihre Kampagne ein und klicken Sie auf die Schaltfläche „Mit dem Erstellen beginnen“.

Jetzt können Sie mit dem Drag-and-Drop-Builder in OptinMonster Ihre Popup-Vorlage bearbeiten.

Im Menü auf der linken Seite erscheinen verschiedene Blöcke. Suchen Sie den Block 'WPForms' und ziehen Sie ihn per Drag & Drop auf Ihre Vorlage.

Klicken Sie anschließend im Block-Einstellungsmenü auf der linken Seite auf das Dropdown-Menü 'Formularauswahl'.

Wählen Sie einfach das zuvor erstellte Kontaktformular aus der Liste aus. Wenn Ihr Formular nicht aufgeführt ist, können Sie 'Shortcode manuell hinzufügen' auswählen und den Shortcode einfügen, den Sie in Schritt 1 kopiert haben.

Geben Sie Ihren WPForms-Kontaktformular-Shortcode in den Block ein. Wenn Sie Ihren Shortcode verloren haben, können Sie zur Seite mit den WPForms-Einbettungseinstellungen zurückkehren und den Shortcode kopieren.

Es ist wichtig zu beachten, dass Sie in der Vorlage keine Vorschau des Kontaktformulars sehen, wenn Sie den Shortcode hinzufügen. Dies ist normal, da Ihr Kontaktformular beim Veröffentlichen der Kampagne angezeigt wird.

Als Nächstes können Sie zum Tab „Anzeigeregeln“ oben gehen, um auszuwählen, wann das Popup auf Ihrer Website erscheinen soll.

Standardmäßig setzt OptinMonster dies auf, wenn die Zeit auf der Seite 5 Sekunden beträgt, und das Popup erscheint auf jeder Seite. Sie können jedoch die Einstellungen für die Anzegeregel ändern und verschiedene Trigger und Targeting-Optionen auswählen.

Wir empfehlen die Verwendung der MonsterLink (On Click)-Zielgruppenausrichtung. Dies löst das Popup nur aus, wenn ein Benutzer auf einen bestimmten Link oder Button klickt. Es gibt dem Besucher die Kontrolle und ist weitaus weniger aufdringlich als ein automatisch geöffnetes Popup.

Als Nächstes können Sie auf die Schaltfläche „MonsterLink-Code kopieren“ klicken und diesen zu jedem Text, Bild oder Button auf Ihrer Website hinzufügen.

Weitere Details finden Sie in unserer Anfängeranleitung zum Hinzufügen eines Links in WordPress.

Ihr MonsterLink-Code sieht in HTML so aus:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Sie benötigen nicht den vollständigen HTML-Code – Sie benötigen nur die URL. Sie können also den Linktext kopieren, der mit https:// beginnt.

Hier ist, wie die URL aussehen sollte:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Angenommen, Sie möchten eine Schaltfläche „Kontaktieren Sie uns“ auf Ihrer Website hinzufügen.

In diesem Fall können Sie damit beginnen, eine beliebige Seite oder einen Beitrag zu bearbeiten und zu Ihrem WordPress-Editor zu gehen. Klicken Sie dann auf das (+) Pluszeichen oben und fügen Sie einen 'Buttons'-Block hinzu.

Danach können Sie Text für Ihren Button eingeben und auf das Link-Symbol klicken. Wir verwenden zum Beispiel „Kontaktieren Sie uns“ als Text für den Button.

Fügen Sie nun die MonsterLink-URL hinzu. Klicken Sie auf den Button-Block, um ihn auszuwählen, und klicken Sie dann in der Symbolleiste auf das Link-Symbol. Fügen Sie einfach die zuvor kopierte URL ein und drücken Sie die Eingabetaste.

Sobald Sie dies getan haben, veröffentlichen Sie Ihren WordPress Beitrag oder Ihre Seite. Der MonsterLink wird nun zu Ihrem Button „Kontaktieren Sie uns“ hinzugefügt.

Nun, kehren wir zu Ihrer OptinMonster-Kampagne zurück, um die Konfiguration abzuschließen.

Nachdem Sie MonsterLink als Ziel ausgewählt und es auf einer beliebigen Seite angezeigt haben, können Sie unten auf die Schaltfläche „Weiter“ klicken.

Auf dem nächsten Bildschirm sehen Sie Optionen, um den Kampagnenansichtstyp zu ändern, eine MonsterEffect-Animation hinzuzufügen und einen Ton abzuspielen, wenn das Popup erscheint.

Experimentieren Sie gerne mit verschiedenen Animations- und Toneinstellungen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Nächster Schritt“.

OptinMonster zeigt dann eine Zusammenfassung Ihrer „Anzeigeregel“-Einstellungen an.

Dies hilft sicherzustellen, dass Sie korrekt eingerichtet haben, wann Ihre Kampagnen auf Ihrer Website erscheinen.

Jetzt sind Sie bereit, Ihre Kampagne live zu schalten und Ihr Kontaktformular-Popup zu veröffentlichen.

Um das zu tun, gehen Sie zum Reiter „Veröffentlichen“ oben. Klicken Sie dann auf die Schaltfläche „Vorschau“, um zu sehen, wie Ihr Popup aussieht, bevor es live geht.

Wenn Sie mit dem Erscheinungsbild Ihrer Kampagne zufrieden sind, ändern Sie den „Veröffentlichungsstatus“ von „Entwurf“ auf „Veröffentlichen“.

Sobald Sie fertig sind, können Sie den OptinMonster Kampagnen-Builder verlassen und den Status Ihrer Kampagne über Ihr WordPress-Dashboard überprüfen.

Navigieren Sie zu OptinMonster » Kampagnen und klicken Sie auf das Dropdown-Menü „Status“. Dann können Sie es von „Ausstehend“ auf „Veröffentlichen“ ändern.

OptinMonster aktualisiert die Änderungen automatisch.

Als Nächstes möchten Sie dorthin navigieren, wo Sie den 'Kontaktieren Sie uns'-Button mit MonsterLink-Integration anzeigen, und das Kontaktformular-Popup in Aktion sehen.

Da haben Sie es!

Sie haben erfolgreich ein Kontaktformular-Popup in WordPress erstellt. Noch besser, Sie haben dies auf eine Weise getan, die Ihr Kontaktformular leicht zugänglich macht, ohne aufdringlich zu sein.

Bonustipps zur Steigerung Ihrer Popup-Anmeldungen

Jetzt, da Sie wissen, wie Sie ein Kontaktformular-Popup erstellen, besteht der nächste Schritt darin, sicherzustellen, dass es die Benutzererfahrung verbessert, anstatt Besucher dazu zu bringen, von Ihrer Website abspringen.

Um Anmeldungen zu maximieren, sollten Sie sich darauf konzentrieren, hilfreiche und relevante Popups zu erstellen, anstatt aufdringliche:

Durch die Kombination dieser Strategien können Sie Popups erstellen, die Aufmerksamkeit erregen, eine Verbindung zu Ihrem Publikum herstellen und zum Handeln anregen, ohne aufdringlich zu wirken.

Weitere Details und Beispiele finden Sie in unserem Leitfaden zum Thema So nutzen Sie die Psychologie von Popups, um Anmeldungen um 250 % zu steigern.

FAQs: Wie man ein Kontaktformular-Popup in WordPress hinzufügt

Haben Sie Fragen zu Kontaktformular-Popups? Hier sind schnelle Antworten, die Ihnen helfen, sie richtig einzurichten.

Wie stelle ich sicher, dass mein Kontaktformular-Popup nicht nervt?

Es geht um Timing und Kontext. Um Besucher nicht zu frustrieren, zeigen Sie Popups basierend auf dem Verhalten an, z. B. nach ein paar Sekunden auf der Seite oder wenn jemand nach unten scrollt. Tools wie OptinMonster ermöglichen es Ihnen, diese Einstellungen fein abzustimmen, damit sich Ihr Popup hilfreich und nicht aufdringlich anfühlt.

Kann ich ein Kontaktformular-Popup für mobile Besucher verwenden?

Ja, aber achten Sie auf den Bildschirmplatz. WPForms und OptinMonster sind mobilfreundlich, was bedeutet, dass sich Ihre Popups an kleinere Bildschirme anpassen. Stellen Sie einfach sicher, dass das Design übersichtlich und auf Mobilgeräten leicht zu schließen ist.

Wie kann ich die Leistung meiner Kontaktformular-Popups verfolgen?

Sie können MonsterInsights verwenden, um wichtige Formularmetriken wie Aufrufe, Klicks und Konversionen direkt von Ihrem WordPress-Dashboard aus zu verfolgen. Dies hilft Ihnen zu verstehen, was funktioniert und wo Sie sich verbessern können.

Verlangsamt ein Kontaktformular-Popup meine Website?

Nicht, wenn es richtig erstellt und konfiguriert ist. Leichte Tools wie WPForms und OptinMonster sind für die Leistung optimiert, sodass sie Ihre Website bei korrekter Verwendung nicht merklich verlangsamen.

Video-Tutorial

Bevor Sie gehen, haben wir ein Video-Tutorial zur Einbindung eines Kontaktformular-Popups auf Ihrer WordPress-Website vorbereitet. Schauen Sie es sich unbedingt an!

Entdecken Sie unsere WordPress-Formular-Anleitungen

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Kontaktformular-Popup in WordPress hinzufügen.

Als Nächstes möchten Sie vielleicht auch unsere Leitfäden zu folgenden Themen lesen:

• So verwenden Sie das Kontaktformular, um Ihre E-Mail-Liste in WordPress zu erweitern
• So senden Sie Bestätigungs-E-Mails nach WordPress-Formularübermittlungen
• So verfolgen und reduzieren Sie Formularabbrüche
• WordPress-Formular funktioniert nicht: Tipps zur Fehlerbehebung
• Der ultimative Leitfaden zur Verwendung von WordPress-Formularen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.