Wie man ein Kontaktformular-Popup in WordPress hinzufügt

Kontaktformulare sind ein Muss, um mit den Besuchern Ihrer Website in Kontakt zu treten. Wir verwenden ein solches Formular auf unserer Website, und es hat sich als großartige Möglichkeit erwiesen, mit unseren Besuchern in Kontakt zu bleiben.

Wenn Sie Ihr Kontaktformular in einem Popup-Fenster platzieren, ist es für die Besucher einfach, sich zu melden, was zu mehr Anfragen, Feedback und potenziellen Konversionen führt.

Popups können jedoch aufdringlich sein, wenn sie nicht klug eingesetzt werden. Werden sie zu oft oder zur falschen Zeit eingeblendet, kann das Benutzer frustrieren. Daher ist es wichtig, die richtige Balance zu finden, damit Ihr Popup-Kontaktformular hilfreich und nicht störend ist.

Bei WPBeginner sind wir große Fans von WPForms, weil es benutzerfreundlich, leistungsstark und perfekt für das Erstellen aller Arten von Formularen ist. Die gute Nachricht ist, dass Sie es zusammen mit OptinMonsters verwenden können, um ganz einfach ein Popup-Kontaktformular zu erstellen.

In diesem Artikel führen wir Sie durch die Schritte zum Hinzufügen eines Kontaktformular-Popups in WordPress.

Warum ein Popup-Kontaktformular?

Jeder WordPress-Blog oder jede WordPress-Website benötigt ein Kontaktformular, über das Benutzer Fragen, Feedback oder Probleme übermitteln können.

Wenn sich Ihr Kontaktformular jedoch nur auf einer einzigen Seite befindet, ist es für die Besucher schwer, es zu finden. Das kann dazu führen, dass Ihre Benutzer Ihre Website verlassen, bevor sie sich mit Ihnen in Verbindung setzen, und Sie könnten potenzielle Leads und Konversionen verlieren.

Ein Kontaktformular-Popup löst dieses Problem, indem es Ihren Besuchern ermöglicht, das Formular durch Anklicken eines Buttons schnell anzuzeigen. Auf diese Weise können sie sich mit Ihnen in Verbindung setzen, egal auf welcher Seite sie sich gerade befinden.

Diese Art von Kontaktformular trägt auch dazu bei, die Besucher auf Ihrer Website zu halten, da sie die angezeigte Seite nicht verlassen müssen. Außerdem können Sie Ihre E-Mail-Liste mit einem Popup-Kontaktformular erweitern.

Dazu müssen Sie zunächst ein Kontaktformular erstellen und es in einem Popup-Fenster auf Ihren Seiten anzeigen.

Aber keine Sorge. In den folgenden Abschnitten werden wir Sie durch das Erstellen eines Kontaktformulars und das Hinzufügen zu einem Popup in WordPress führen.

Außerdem geben wir Ihnen unsere Expertentipps für das Erstellen eines Popups, das Aufmerksamkeit erregt, ohne aufdringlich zu sein. Dieser Ansatz sorgt dafür, dass Ihre WordPress Website benutzerfreundlich bleibt und gleichzeitig die Interaktionsmöglichkeiten maximiert werden.

Hier finden Sie einen kurzen Überblick über alle Schritte, die Sie durchlaufen werden:

Sind Sie bereit? Dann fangen wir an.

Schritt 1: Erstellen Sie ein WordPress-Kontaktformular

Zunächst 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 die beste Option für Anfänger ist.

Wir verwenden es selbst auf unserer Website, um Kontaktformulare, jährliche Befragungen von Benutzern und Formulare für die Migration der Website anzuzeigen. Einzelheiten zu unseren Erfahrungen mit dem Plugin finden Sie in unserer Rezension zu WPForms.

WPForms ist ein einsteigerfreundliches Plugin, das einen Drag-and-drop-Builder zum Erstellen von Kontaktformularen in WordPress mit nur wenigen Klicks bietet. Es bietet auch vorgefertigte Templates für Formulare und viele Optionen zur individuellen Anpassung.

Für dieses Tutorial werden wir die WPForms Lite-Version verwenden, die kostenlos ist und ein Template für ein Kontaktformular bietet.

Sie können jedoch auch die Premium-Version verwenden, um weitere Funktionen freizuschalten. Zum Beispiel bietet WPForms Pro mehr als 2.000 Templates, mehr Optionen zur individuellen Anpassung, leistungsstarke Add-ons und die Möglichkeit, Online-Zahlungen ohne zusätzliche Transaktionsgebühren zu sammeln.

Um zu beginnen, müssen Sie zunächst das Plugin WPForms Lite installieren und aktivieren. Wenn Sie Hilfe benötigen, können Sie sich unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress Plugins ansehen.

Sobald das Plugin aktiviert ist, können Sie Ihr Kontaktformular erstellen. Alles, was Sie tun müssen, ist, von Ihrem WordPress-Dashboard aus zu WPForms ” Add New zu gehen.

Danach wird WPForms Sie auffordern, Ihr Formular zu benennen und ein Template auszuwählen.

Nachdem Sie einen Formularnamen eingegeben haben, wählen Sie das Template “Einfaches Kontaktformular” aus.

Als Nächstes können Sie mit dem Drag-and-Drop-Builder Felder in das Formular einfü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 auch die Positionen der einzelnen Felder im Formular neu anordnen.

Mit WPForms können Sie auch jedes Feld des Kontaktformulars individuell anpassen.

Wenn Sie zum Beispiel auf das Feld “Name” klicken, erhalten Sie verschiedene Optionen, z. B. zum Ändern der Beschriftung und des Formats. Sie können sogar eine Beschreibung hinzufügen oder ein Feld als erfordert markieren.

Wenn Sie fertig sind, klicken Sie auf die Option “Einstellungen”, um die Benachrichtigung und Bestätigung des Formulars zu konfigurieren.

Im Abschnitt “Allgemein” können Sie das Formular umbenennen, den Text des Submit Buttons ändern, den Anti-Spam-Schutz aktivieren und vieles mehr.

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

Sie können Ihre Benachrichtigungen über das Kontaktformular jedoch an jede beliebige 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 Betreffzeile der E-Mail verwendet WPForms den Namen des Formulars, das Sie zuvor eingegeben haben. Sie können jedoch den Text der Betreffzeile nach Belieben bearbeiten.

Gehen wir nun zu der Option “Bestätigungen”.

WPForms verwendet “Message” als Standard-Bestätigungstyp. Nach dem Absenden eines Formulars wird dies Ihren Besuchern eine Dankesnachricht anzeigen.

Sie können jedoch den Nachrichtentyp ändern und die Benutzer zu einer bestimmten Seite auf Ihrer Website weiterleiten, wenn sie ein Formular ausfüllen.

Wenn Sie mit dem Erstellen eines Kontaktformulars fertig sind, klicken Sie auf die Schaltfläche “Speichern” in der oberen rechten Ecke, um Ihre Änderungen zu speichern.

Anschließend können Sie auf die Option “Einbetten” in der oberen Ecke neben dem Button “Speichern” klicken, um den Shortcode des Formulars zu erhalten. Sie benötigen diese Informationen, um Ihr Formular in einem Popup-Fenster anzuzeigen.

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

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

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

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

Wir empfehlen OptinMonster, da es das beste Plugin für die Lead-Generierung und Conversion-Optimierung für WordPress ist. Es ist auch eines der beliebtesten, denn mehr als 1,2 Millionen Websites nutzen dieses leistungsstarke Werkzeug.

Bei WPBeginner verwenden wir OptinMonster für verschiedene Aufgaben, einschließlich der Förderung von Sonderangeboten und Angeboten auf Popups, Slide-Ins und Header-Bannern. Wenn Sie weitere Informationen wünschen, lesen Sie bitte unsere Rezension zu OptinMonster.

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

Zunächst müssen Sie sich auf der OptinMonster-Website für ein Konto anmelden. Besuchen Sie einfach die Website und klicken Sie auf den Button “Get OptinMonster Now”.

Als Nächstes müssen Sie das kostenlose Plugin OptinMonster auf Ihrer Website installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress Plugins.

Nachdem das Plugin aktiviert ist, wird der Einrichtungsassistent angezeigt. Klicken Sie auf die Schaltfläche “Ihr bestehendes Konto verbinden”.

Es erscheint nun ein Popup-Fenster, in dem OptinMonster Sie auffordert, sich mit Ihrem Konto zu verbinden.

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

Da Ihr Konto nun verbunden ist, müssen Sie als Nächstes eine neue Kampagne für Ihr Popup-Kontaktformular erstellen.

Sie können beginnen, indem Sie zu OptinMonster ” Kampagnen gehen und dann auf die Schaltfläche “Ihre erste Kampagne erstellen” klicken.

In der nächsten Ansicht müssen Sie eine Kampagnenart auswählen.

Da wir ein Popup-Kontaktformular erstellen werden, wählen Sie als Kampagnentyp “Popup”.

Danach müssen Sie auf der Seite nach unten blättern, um ein Template auszuwählen.

OptinMonster bietet über 75 attraktive und hoch konvertierende Designs für Ihre Popups. Sie können jedes Template auswählen, das Ihnen gefällt.

Wenn Sie sich für ein Template entschieden haben, geben Sie einfach einen Namen für Ihre Kampagne ein und klicken Sie auf den Button “Start Building”.

Mit dem Drag-and-drop-Builder in OptinMonster können Sie jetzt Ihre Popup-Vorlage bearbeiten.

Im Menü auf der linken Seite werden verschiedene “Blöcke” angezeigt. Suchen Sie den Block “WPForms”, und ziehen Sie ihn per Drag-and-drop auf Ihr Template.

Danach müssen Sie in den Blockeinstellungen im linken Menü auf das Dropdown-Menü “Formularauswahl” klicken. Wählen Sie dann die Option “Shortcode manuell hinzufügen”.

Von hier aus können Sie Ihren Shortcode für das WPForms-Kontaktformular in den Block eingeben. Um den Code zu finden, müssen Sie zu Ihren WPForms-Einstellungen zurückkehren und den Shortcode kopieren.

Es ist wichtig zu beachten, dass Sie keine Vorschau des Kontaktformulars im Template sehen werden, wenn Sie den Shortcode hinzufügen.

Das ist normal, denn Ihr Kontaktformular erscheint, wenn die Kampagne veröffentlicht wird.

Als Nächstes können Sie auf dem Tab ‘Anzeigeregeln’ oben festlegen, wann das Popup auf Ihrer Website erscheinen soll.

Standardmäßig stellt OptinMonster es so ein, dass das Popup auf jeder Seite erscheint, wenn die Zeit auf der Seite 5 Sekunden beträgt. Sie können jedoch die Einstellungen der Anzeigeregel ändern und verschiedene Auslöser und Optionen für die Zielgruppen auswählen.

Wir empfehlen die Verwendung des MonsterLink (On Click) Targetings. Auf diese Weise wird Ihr Popup erscheinen, wenn ein Besucher auf einen Link oder eine Schaltfläche klickt.

Als nächstes können Sie auf den ‘Copy MonsterLink Code’ Button klicken und ihn zu einem beliebigen Text, Bild oder Button auf Ihrer Webseite hinzufügen.

Weitere Einzelheiten finden Sie in unserem Leitfaden für Anfänger zum Hinzufügen eines Links in WordPress.

Ihr MonsterLink-Code wird in HTML wie folgt aussehen:

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

Um den Link in Ihren WordPress-Blogbeitrag oder Ihre Seite einzubetten, benötigen Sie jedoch nur die URL aus dem Code.

So sollte die URL aussehen:

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

Nehmen wir an, Sie möchten auf Ihrer Website einen Button “Kontakt” hinzufügen.

In diesem Fall können Sie mit der Bearbeitung einer Seite oder eines Beitrags beginnen und zum WordPress Editor gehen. Klicken Sie dann auf das Pluszeichen (+) am oberen Rand und fügen Sie einen Block “Buttons” hinzu.

Danach können Sie einen Text für Ihren Button eingeben und auf das Link-Symbol klicken. Wir verwenden zum Beispiel “Contact Us” als Text für den Button.

Nun ist es an der Zeit, die MonsterLink URL zu Ihrem Button hinzuzufügen. Klicken Sie auf den Button, dann auf den Link-Inserter-Button und fügen Sie die URL ein.

Sobald Sie das getan haben, machen Sie weiter und veröffentlichen Sie Ihren WordPress Beitrag oder Ihre Seite. Der MonsterLink wird nun zu Ihrem ‘Contact Us’ Button hinzugefügt.

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

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

Auf dem nächsten Bildschirm sehen Sie Optionen zum Ändern des Ansichtstyps der Kampagne, zum Hinzufügen einer MonsterEffect-Animation und zum Abspielen eines Tons, wenn das Popup erscheint.

Sie können kreativ sein und mit verschiedenen Einstellungen experimentieren. Wenn Sie mit der Konfiguration zufrieden sind, klicken Sie auf den Button “Weiter”.

OptinMonster zeigt dann eine Zusammenfassung der Einstellungen für die “Anzeigeregel” an.

So können Sie sicherstellen, dass Sie richtig eingestellt haben, wann Ihre Kampagnen auf Ihrer Website erscheinen werden.

Jetzt können Sie Ihre Kampagne live schalten und Ihr Kontaktformular-Popup veröffentlichen. Gehen Sie dazu auf den Tab “Veröffentlichen” am oberen Rand.

Anschließend können Sie auf die Schaltfläche “Vorschau” klicken, bevor Sie Ihre Kampagne veröffentlichen. Dies zeigt Ihnen eine Live-Vorschau, wie Ihr Popup auf Ihrer Website aussehen wird.

Wenn Sie mit dem Design Ihrer Kampagne zufrieden sind, ändern Sie den Status “Veröffentlichen” von “Entwurf” auf “Veröffentlichen”.

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

Dazu navigieren Sie zu OptinMonster “ Kampagnen. Klicken Sie hier einfach auf das Dropdown-Menü “Status” und ändern Sie es von “Ausstehend” in “Veröffentlichen”.

OptinMonster wird die Änderungen automatisch aktualisieren.

Als Nächstes gehen Sie zu der Stelle, an der Sie den ‘Contact Us’ Button mit der MonsterLink-Integration anzeigen, um das Kontaktformular-Popup in Aktion zu sehen.

Da haben Sie es!

Sie haben erfolgreich ein Plugin für ein Kontaktformular in WordPress erstellt. Mehr noch, Sie haben dies getan und dabei sichergestellt, dass das Formular nicht aufdringlich ist.

Bonus-Tipp: Steigern Sie Ihre Popup-Anmeldungen

Nachdem Sie nun wissen, wie man ein Kontaktformular-Popup erstellt, müssen Sie im nächsten Schritt sicherstellen, dass es die Benutzererfahrung verbessert und nicht dazu führt, dass die Besucher Ihre Website verlassen.

Um die Zahl der Anmeldungen zu maximieren, sollten Sie sich darauf konzentrieren, hilfreiche und relevante Popups zu erstellen, anstatt aufdringliche Popups.

Erstens ist der Zeitpunkt entscheidend. Popups, die zu früh erscheinen, können Benutzer frustrieren. Versuchen Sie daher, sie erst anzuzeigen, nachdem ein Besucher gescrollt oder einige Zeit auf Ihrer Website verbracht hat.

Personalisierung ist ein weiterer entscheidender Faktor. Damit sich Ihre Popups relevanter anfühlen, sollten Sie sie auf die Aktivitäten der Benutzer abstimmen, z. B. indem Sie ihnen einen Rabatt auf ein Produkt anbieten, das sie gerade durchsuchen.

Um zu schnellem Handeln zu ermutigen, erstellen Sie Dringlichkeit mit Sätzen wie “Zeitlich begrenztes Angebot” oder nutzen Sie die Angst, etwas zu verpassen (FOMO), indem Sie hervorheben, was sie gewinnen könnten, wenn sie jetzt handeln.

Das Hinzufügen von Social Proof, wie Rezensionen oder Statistiken, kann ebenfalls Vertrauen schaffen und Ihre Popups überzeugender machen. Vergessen Sie nicht die Rolle der Farbe: kräftige Farbtöne können Aufmerksamkeit erregen, während sanftere Töne Vertrauen und Harmonie schaffen.

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 Informationen zu diesem Thema finden Sie in unserem Leitfaden , wie Sie die Psychologie von Popups nutzen, um die Zahl der Anmeldungen um 250 % zu steigern.

Video-Anleitung

Bevor Sie loslegen, haben wir ein Video-Tutorial zum Hinzufügen eines Kontaktformular-Popups zu Ihrer WordPress Website vorbereitet. Schauen Sie es sich unbedingt an!

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein Kontaktformular-Popup in WordPress einfügt. Als Nächstes möchten Sie vielleicht auch unseren Leitfaden zum Versenden von Bestätigungs-E-Mails nach WordPress-Formularübermittlungen lesen und erfahren, wie Sie Formularabbrüche verfolgen und reduzieren können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.