So fügen Sie ein Slide-Out-Kontaktformular in WordPress hinzu (einfaches Tutorial)

Es kann frustrierend sein, wenn Besucher Ihre WordPress-Website besuchen, sich aber nie melden. Vielleicht durchsuchen sie Ihre Seiten, lesen sogar ein paar Minuten lang, aber Ihr Kontaktformular erhält keine Einsendungen.

Oft liegt es nicht daran, dass Besucher keine Verbindung aufnehmen möchten. Sie sehen einfach keinen einfachen oder einladenden Weg, dies zu tun.

Hier kann ein ausklappbares Kontaktformular einen großen Unterschied machen. Es erscheint sanft von der Seite und bietet Hilfe genau dann, wenn Besucher sie brauchen, ohne ihre Erfahrung zu unterbrechen.

In diesem Leitfaden zeigen wir Ihnen Schritt für Schritt, wie Sie ein ausklappbares Kontaktformular zu Ihrer WordPress-Site hinzufügen, und zwar mit einer zuverlässigen und getesteten Methode. 🧑‍💻

Warum ein ausklappbares Kontaktformular in WordPress hinzufügen? 💭

Ein ausklappbares Kontaktformular erleichtert es Besuchern, sich zu melden, ohne die Seite zu verlassen, auf der sie sich gerade befinden. Es gleitet sanft von der Seite herein, erregt Aufmerksamkeit und ermöglicht es Benutzern, eine schnelle Nachricht zu senden, genau dann, wenn sie Hilfe benötigen.

Viele Kleinunternehmer fügen eine Kontaktseite hinzu, in der Hoffnung, dass Besucher diese nutzen und sie ihnen hilft, ihr Geschäft auszubauen.

Aber in Wirklichkeit verlassen die meisten Leute die Seite, ohne jemals Kontakt aufzunehmen. Deshalb sehen Sie auf beliebten Websites Kontakt-Popups, Slider oder schwebende Schaltflächen, um die Kommunikation zu erleichtern.

Diese animierten und interaktiven Optionen lenken die Aufmerksamkeit auf das Kontaktformular und lassen Ihre Website interaktiver und zugänglicher erscheinen. So können Sie Gelegenheitsbesucher leichter in echte Leads oder Kunden verwandeln.

Mit diesen Worten teilen wir Ihnen mit, wie Sie ein ausklappbares Kontaktformular in WordPress erstellen. Hier ist eine kurze Übersicht über alle Dinge, die wir in dieser Anleitung behandeln werden:

• Hinzufügen eines ausklappbaren Kontaktformulars in WordPress
• Schritt 1: Erstellen eines Kontaktformulars in WordPress
• Schritt 2: Erstellen einer Ausklapp-Kampagne in OptinMonster
• Schritt 3: Ein Slide-Out-Kontaktformular in WordPress anzeigen
• FAQ: Ein Slide-Out-Kontaktformular in WordPress hinzufügen
• Bonus-Ressourcen für die Verwendung von WordPress-Formularen

Fangen wir an.

Hinzufügen eines ausklappbaren Kontaktformulars in WordPress

Für dieses Tutorial benötigen Sie WPForms. Es ist das beste WordPress-Kontaktformular-Plugin auf dem Markt, da es sowohl einfach als auch leistungsstark ist.

ℹ️ Hinweis: WPForms betreibt alle unsere Formulare bei WPBeginner, einschließlich unseres Kontaktformulars. Es ist einfach zu bedienen, hochgradig anpassbar und die neuen KI-Tools machen die Erstellung von Formularen schneller als je zuvor.

Neugierig, wie es funktioniert? Schauen Sie sich unseren vollständigen WPForms-Testbericht an, um alles zu entdecken, was es kann.

Um diesem Tutorial zu folgen, können Sie die kostenlose Version des WPForms-Kontaktformular-Plugins verwenden, wenn Sie keine seiner Premium-Funktionen (bedingte Logik, erweiterte Integrationen und mehr) benötigen.

Dann verbinden Sie Ihr Formular mit OptinMonster. Es ist die leistungsstärkste Software zur Konversionsoptimierung und hilft Ihnen, abgebrochene Website-Besucher in Kunden zu verwandeln.

Schritt 1: Erstellen eines Kontaktformulars in WordPress

Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Gehen Sie von Ihrem WordPress-Adminbereich aus zu Plugins » Neues Plugin hinzufügen , um zu beginnen.

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

Klicken Sie in den Suchergebnissen einfach auf 'Jetzt installieren' und dann auf 'Aktivieren', um den Vorgang abzuschließen.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins

Nach der Aktivierung müssen Sie die Seite WPForms » Neu hinzufügen besuchen, um ein neues Kontaktformular zu erstellen. Dies startet die WPForms-Builder-Oberfläche.

Geben Sie oben auf der Seite einen Namen für Ihr Kontaktformular ein.

Danach müssen Sie mit der Maus über die Vorlage 'Einfaches Kontaktformular' fahren und auf die Schaltfläche 'Vorlage verwenden' klicken.

WPForms erstellt ein neues Formular basierend auf der Vorlage „Einfaches Kontaktformular“.

Sie sehen die Formularvorschau im rechten Bereich des Formular-Builders. Sie können auf jedes Feld klicken, um es zu bearbeiten, oder neue Formularfelder aus der linken Spalte hinzufügen.

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

Wenn Sie mit der Bearbeitung des Formulars fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Als Nächstes müssen Sie oben auf die Schaltfläche „Einbetten“ klicken, um den Einbettungscode Ihres Formulars zu erhalten.

Dies öffnet ein Popup, das verschiedene Möglichkeiten anzeigt, Ihr Formular einzubetten. Klicken Sie einfach auf den Link „Shortcode verwenden“ und kopieren Sie dann den Shortcode. Sie werden ihn im nächsten Schritt benötigen.

Schritt 2: Erstellen einer Ausklapp-Kampagne in OptinMonster

Jetzt erstellen wir eine Slide-out-Kampagne, die das im ersten Schritt erstellte Kontaktformular anzeigt.

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

ℹ️ Hinweis: Wir verwenden OptinMonster bei WPBeginner, um exklusive Angebote über Popups, Slide-ins und Banner zu bewerben. Es ist ein vielseitiges Tool, das das Engagement fördert und mühelos unsere E-Mail-Liste erweitert.

Möchten Sie mehr erfahren? Lesen Sie unseren vollständigen OptinMonster-Testbericht, um seine Funktionen zu erkunden.

Zuerst richten wir Ihr OptinMonster-Konto ein. Klicken Sie auf deren Website auf die Schaltfläche „OptinMonster jetzt holen“, wählen Sie einen Plan aus und schließen Sie den Registrierungsprozess ab.

Sobald dies erledigt ist, werden Sie zu Ihrem OptinMonster-Dashboard weitergeleitet.

Gehen Sie nun in Ihrem WordPress-Dashboard zu Plugins » Neues Plugin hinzufügen, um das OptinMonster-Plugin zu installieren.

Verwenden Sie als Nächstes einfach die Suchfunktion, um das OptinMonster-Plugin schnell zu finden.

Sobald Sie es gefunden haben, klicken Sie auf die Schaltfläche „Jetzt installieren“ und dann auf „Aktivieren“.

Details finden Sie in unserer Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung startet der OptinMonster-Einrichtungsassistent automatisch. Damit können Sie ein neues Konto erstellen oder ein bestehendes Konto verbinden.

Nachdem Sie Ihr OptinMonster-Konto erstellt oder verbunden haben, können Sie eine neue Optin-Kampagne erstellen.

Navigieren Sie einfach zur Seite OptinMonster » Kampagnen und klicken Sie auf die Schaltfläche „Neu hinzufügen“. Wenn Sie noch keine Kampagnen haben, können Sie auch auf die Schaltfläche „Erste Kampagne erstellen“ klicken.

OptinMonster bietet verschiedene Arten von dynamischen Kampagnen an.

Für dieses Tutorial werden wir die Kampagne „Slide-in“ verwenden.

Klicken Sie auf 'Slide-in' als Kampagnentyp.

Als Nächstes müssen Sie die Vorlage auswählen. OptinMonster bietet mehrere fertige Vorlagen an.

Für dieses Tutorial müssen Sie „Canvas“ auswählen.

Sie können dies leicht über die Suchfunktion finden und dann auf die Schaltfläche 'Vorlage verwenden' klicken, die erscheint, wenn Sie mit der Maus darüber fahren.

Sobald Sie die Vorlage ausgewählt haben, werden Sie aufgefordert, einen Namen für Ihre Kampagne anzugeben. Dies hilft Ihnen, die Kampagne in Ihrem OptinMonster-Dashboard leicht zu finden.

Klicken Sie anschließend auf die Schaltfläche „Erstellen starten“.

Nun lädt OptinMonster seine Kampagnen-Builder-Oberfläche.

Sie sehen eine Live-Vorschau Ihrer Kampagne auf der rechten Seite und die verschiedenen Blöcke im Menü auf der linken Seite.

Suchen Sie einfach den WPForms-Block und ziehen Sie ihn dann in den Vorschau-Bereich.

Jetzt erscheint der WPForms-Block in der Vorlage und Sie sehen seine Einstellungen auf der linken Seite.

Sie müssen im Menü auf der linken Seite unter den Blockeinstellungen auf das Dropdown-Menü „Formularauswahl“ klicken und die Option „Kurzcode manuell hinzufügen“ auswählen.

Dies ermöglicht es Ihnen, den WPForms Kontaktformular-Shortcode in den Block einzufügen. Sie haben ihn zuvor im Tutorial kopiert.

Jetzt können Sie die anderen Blöcke im Formular löschen oder anpassen.

Sie können beispielsweise das Bild ändern, indem Sie darauf klicken und die Einstellungen auf der linken Seite verwenden.

Oder Sie können ihn einfach löschen, indem Sie mit der Maus über den Block fahren und auf das Symbol „Papierkorb“ klicken.

Für dieses Tutorial werden wir die anderen Blöcke aus dem Opt-in löschen und nur den WPForms-Block übrig lassen.

Wenn Sie möchten, können Sie auch auf den Hintergrund klicken und aus dem Einstellungsbereich auf der linken Seite eine Farbe, einen Farbverlauf oder ein Bild für die Option auswählen.

Als Nächstes müssen Sie auf den Tab „Anzeigeregeln“ oben auf der Seite klicken, um zu konfigurieren, wann und wie das Optin angezeigt werden soll.

Sie sollten sich auf dem Tab 'Bedingungen' am unteren Bildschirmrand befinden. Hier zeigen die Standardeinstellungen die Optin-Meldung nach 5 Sekunden auf jeder Seite an. Dies sollte für die meisten Websites funktionieren.

Als Nächstes sollten Sie auf den Reiter „Aktionen“ am unteren Rand der Seite klicken.

Standardmäßig gibt es keine Animation oder keinen Ton, wenn das Opt-in angezeigt wird. Wenn Sie möchten, können Sie aus dem Dropdown-Menü „Mit MonsterEffects animieren“ eine Option auswählen, z. B. „Einblenden (links)“.

Wenn Sie mit der Konfiguration der Anzeigeregeln fertig sind, müssen Sie oben auf die Schaltfläche „Speichern“ klicken, um Ihre Einstellungen zu speichern, und dann auf die Schaltfläche „Veröffentlichen“.

Auf dem nächsten Bildschirm müssen Sie den Veröffentlichungsstatus auf 'Veröffentlichen' ändern. Dadurch wird die Optin auf Ihrem WordPress-Blog oder Ihrer Website verfügbar.

Schritt 3: Ein Slide-Out-Kontaktformular in WordPress anzeigen

Jetzt, da Sie sowohl das Kontaktformular als auch die Slide-out-Kampagne erstellt haben, können Sie sie auf Ihrer Website anzeigen.

Sie können die Seite „Veröffentlichungsstatus“ schließen, indem Sie auf das Symbol „X“ in der oberen rechten Ecke klicken. Sie sollten nun eine Seite sehen, auf der Sie die „WordPress-Ausgabeeinstellungen“ und die „Sichtbarkeit & Status“ des Opt-ins konfigurieren können.

Wenn Sie im Abschnitt „Sichtbarkeit & Status“ nach unten scrollen, möchten Sie normalerweise, dass „Alle Besucher und eingeloggten Benutzer“ die Kampagne sehen. Es gibt jedoch Optionen für „Nur Besucher“ und „Nur eingeloggte Benutzer‘.

Sobald Sie dies getan haben, sollten Sie auf die Schaltfläche „Änderungen speichern“ klicken, um Ihre Einstellungen zu speichern.

Sie können nun Ihre Website besuchen, um das Slide-out-Kontaktformular in Aktion zu sehen:

FAQ: Ein Slide-Out-Kontaktformular in WordPress hinzufügen

Jetzt, da Sie wissen, wie Sie ein Slide-out-Kontaktformular in WordPress hinzufügen, lassen Sie uns einige häufig gestellte Fragen von Benutzern durchgehen.

Was ist die ideale Größe für ein Slide-out-Fenster?

Eine Breite von etwa 400–600 Pixeln und eine Höhe von 300–400 Pixeln sind normalerweise gut geeignet. Es sollte auffallen, ohne zu viel von der Seite zu verdecken.

Was ist der Unterschied zwischen einem Slide-out, einem Popup und einem Overlay?

Ein Slide-out gleitet von der Seite herein, ein Popup erscheint in der Mitte und ein Overlay bedeckt den gesamten Bildschirm. Slide-outs sind in der Regel weniger aufdringlich, aber jede Option kann Ihnen helfen, das Engagement zu steigern – wählen Sie einfach, was am besten zum Stil Ihrer Website passt.

Was sind einige der besten Alternativen zu Popup-Formularen?

Sie können Inline-Formulare, schwebende Leisten oder Slide-out-Formulare für eine reibungslosere, weniger störende Benutzererfahrung verwenden.

Bonus-Ressourcen für die Verwendung von WordPress-Formularen

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

Möglicherweise möchten Sie auch einige unserer anderen Anleitungen zu WordPress-Formularen sehen:

• So zeigen Sie ein schwebendes Kontaktformular in WordPress an
• So fügen Sie ein Kontaktformular-Popup in WordPress hinzu
• Best Practices für das Design von Kontaktformularseiten (mit Beispielen)
• So verwenden Sie das Kontaktformular, um Ihre E-Mail-Liste in WordPress zu erweitern
• So blockieren Sie Spam in Kontaktformularen in WordPress

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.