So zeigen Sie ein Bestätigungs-Navigations-Popup für Formulare in WordPress an

Es gibt nichts Frustrierenderes, als ein WordPress-Formular auszufüllen, versehentlich auf den Zurück-Button zu klicken und dann alles zu verlieren. Das ist uns allen schon passiert – und es reicht normalerweise aus, um jemanden sofort aufzugeben.

Für Website-Besitzer kann dieser kleine Stolperstein zu verlustreichen Verkäufen und weniger Anmeldungen führen. Besucher werden verärgert abspringen und es ist unwahrscheinlich, dass sie zurückkehren und es erneut versuchen.

Die gute Nachricht? Es gibt eine einfache Lösung: ein Bestätigungs-Pop-up für die Navigation. Diese einfache Warnung gibt Benutzern eine zweite Chance, bevor sie eine Seite mit einem nicht abgeschickten Formular verlassen.

In dieser Anleitung zeigen wir Ihnen, wie Sie diese Funktion zu Ihren WordPress-Formularen hinzufügen, um eine reibungslosere Erfahrung zu schaffen und Ihre Abschlussraten zu erhöhen.

Was ist ein Bestätigungs-Navigations-Popup und warum brauchen Sie es?

Ein Bestätigungs-Navigations-Popup ist eine Browser-Warnung, die erscheint, wenn ein Benutzer mit ungespeicherten Änderungen in einem Formular versucht, eine Webseite zu verlassen.

Sie haben diese Funktion wahrscheinlich bereits auf dem Bildschirm des WordPress-Inhaltseditors in Aktion gesehen. Wenn Sie ungespeicherte Änderungen haben und versuchen, die Seite zu verlassen, erscheint ein Warn-Popup, um zu verhindern, dass Sie Ihre Arbeit verlieren.

Das Hinzufügen dieser Funktion zu Ihren eigenen Formularen ist eine kleine Änderung mit großen Vorteilen:

• Verbessert die Benutzererfahrung: Sie erspart den Besuchern die Frustration, ihren Fortschritt versehentlich zu verlieren, und zeigt, dass Sie ihre Zeit schätzen.
• Erhöht die Konversionsraten: Indem Sie versehentliche Abbrüche verhindern, geben Sie Benutzern eine zweite Chance, das Formular auszufüllen, was Leads steigern kann.
• Baut Vertrauen auf: Eine durchdachte Funktion wie diese demonstriert Professionalität und Sorgfalt, was dazu beitragen kann, Loyalität aufzubauen und wiederkehrende Besuche zu fördern.

In diesem Sinne fügen wir diese Warnung zu Ihren WordPress-Kommentaren und anderen Formularen auf Ihrer Website hinzu.

Hier ist alles, was wir in diesem Leitfaden behandeln werden:

• Methode 1: Bestätigungs-Pop-up für nicht abgeschickte Formulare in WordPress anzeigen
• Methode 2: Das Warn-Pop-up zu anderen Formularen auf Ihrer WordPress-Website hinzufügen
• Bonus: Verbessern Sie die Leistung Ihrer WordPress-Formulare
• Häufig gestellte Fragen zu Bestätigungs-Navigations-Popups
• Zusätzliche Anleitungen zur Verwendung von WordPress-Formularen

Bereit? Legen wir los.

Methode 1: Bestätigungs-Pop-up für nicht abgeschickte Formulare in WordPress anzeigen

Diese Methode beinhaltet die Erstellung eines einfachen, benutzerdefinierten Plugins.

Machen Sie sich keine Sorgen, wenn Sie noch nie zuvor codiert haben! Wir führen Sie durch jeden Schritt des Prozesses, und es ist eine großartige Möglichkeit zu sehen, wie WordPress-Plugins funktionieren.

Außerdem können Sie das Plugin am Ende dieses Tutorials herunterladen, um es auf Ihrer Website zu installieren.

Wir empfehlen jedoch dringend, das Plugin selbst zu erstellen, um besser zu verstehen, wie der Code funktioniert. Sie können zunächst eine lokale Installation oder Staging-Site verwenden.

Zuerst müssen Sie einen neuen Ordner auf Ihrem Computer erstellen und ihn confirm-leaving nennen. Innerhalb des confirm-leaving-Ordners erstellen Sie einen weiteren Ordner und nennen ihn js.

Öffnen Sie nun einen einfachen Texteditor wie Notepad und erstellen Sie eine neue Datei. Fügen Sie einfach den folgenden Code ein:

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://014.leahstevensyj.workers.dev
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
 * Version:     1.0.0
 * Author:      WPBeginner
 * Author URI:  https://014.leahstevensyj.workers.dev
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

function wpb_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Diese PHP-Funktion verwendet wp_enqueue_script, die offizielle WordPress-Methode zum Hinzufügen von JavaScript. Dies ist die beste Vorgehensweise, da sie hilft, Skriptkonflikte mit anderen Plugins zu vermeiden.

Speichern Sie diese Datei nun als confirm-leaving.php im Hauptordner confirm-leaving.

Nun müssen wir die JavaScript-Datei erstellen, die dieses Plugin lädt. Sie können dies tun, indem Sie eine neue Datei in Ihrem Texteditor erstellen und diesen Code darin einfügen:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Dieses JavaScript erkennt, ob ein Benutzer begonnen hat, das Kommentarformular auszufüllen. Wenn er versucht, die Seite zu verlassen, bevor er sie absendet, wird das Warn-Popup ausgelöst.

Speichern Sie diese Datei als confirm-leaving.js im Ordner js, den Sie zuvor erstellt haben.

Nachdem Sie beide Dateien gespeichert haben, sollte Ihre Ordnerstruktur wie folgt aussehen:

Jetzt müssen Sie sich mit Ihrer WordPress-Site über einen FTP-Client verbinden. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zum Hochladen von WordPress-Dateien per FTP.

Nach der Verbindung müssen Sie den Ordner confirm-leaving in den Ordner /wp-contents/plugins/ auf Ihrer Website hochladen.

Danach möchten Sie sich im WordPress Admin-Bereich anmelden und zu 'Plugins' gehen.

Von hier aus sollten Sie das Plugin 'Confirm Leaving' in der Liste der installierten Plugins sehen. Sie können dann auf den Link 'Aktivieren' darunter klicken.

Das ist alles. Sie können jetzt jeden Beitrag auf Ihrer Website besuchen, etwas in das Kommentarformular eingeben und dann versuchen, die Seite zu verlassen.

Dann erscheint ein Popup, das Sie warnt, dass Sie ungespeicherte Änderungen haben.

Aus Sicherheitsgründen zeigen moderne Webbrowser ihre eigene generische Warnmeldung an (z. B. „Seite verlassen? Änderungen, die Sie vorgenommen haben, werden möglicherweise nicht gespeichert.“) anstelle des benutzerdefinierten Textes aus dem Code. Der Zweck des Codes besteht lediglich darin, diese Standard-Browseraufforderung auszulösen.

Methode 2: Das Warn-Pop-up zu anderen Formularen auf Ihrer WordPress-Website hinzufügen

Sie können denselben Code verwenden, um jedes andere Formular auf Ihrer WordPress-Website anzusprechen, z. B. ein Kontaktformular.

In diesem Beispiel zielen wir auf ein Formular ab, das mit dem WPForms-Plugin erstellt wurde, aber diese Schritte funktionieren auch, wenn Sie ein anderes Kontaktformular-Plugin auf Ihrer Website verwenden.

Haben Sie kein Kontaktformular und möchten eines erstellen? Dann können Sie sich unseren Leitfaden ansehen, wie Sie ein Kontaktformular erstellen.

Bei WPBeginner verwenden wir WPForms, um viele verschiedene Formulare einzubetten, darunter unser Kontaktformular, die jährliche Leserumfrage und Migrationsanfragen. Wenn Sie neugierig auf das Tool und seine Möglichkeiten sind, können Sie sich unseren vollständigen WPForms-Testbericht ansehen.

Das Erste, was Sie tun müssen, ist, zu der Seite zu gehen, auf der Sie Ihr Kontaktformular eingebettet haben.

Dann bewegen Sie die Maus über das erste Feld in Ihrem Kontaktformular, klicken Sie mit der rechten Maustaste und wählen Sie dann „Inspizieren“ aus dem Browser-Menü.

From here, you’ll want to locate the line that starts with the <form> tag to find the ID attribute. In this example, our form’s ID is wpforms-form-170.

Sobald Sie das Tag gefunden haben, kopieren Sie das ID-Attribut.

Öffnen Sie nun Ihre confirm-leaving.js -Datei, um den jQuery-Selektor zu bearbeiten. Sie müssen die ID Ihres Formulars direkt nach #commentform hinzufügen, getrennt durch ein Komma. Stellen Sie sicher, dass Sie Ihrer neuen ID ein #-Präfix hinzufügen, genau wie das Kommentarformular es hat.

Ihr Code sieht jetzt so aus:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Wenn alles gut aussieht, können Sie Ihre Änderungen an der Datei confirm-leaving.js speichern und sie wieder auf Ihren Server hochladen, wobei die alte Datei überschrieben wird.

Jetzt können Sie beliebigen Text in jedes Feld Ihres Kontaktformulars eingeben und dann versuchen, die Seite zu verlassen, ohne das Formular abzuschicken. Ein Popup wird mit einer Warnung angezeigt, dass Sie ungespeicherte Änderungen haben.

📥 Plugin-Download: Sie können das confirm-leaving-Plugin hier herunterladen, dann das Plugin wie gewohnt installieren und aktivieren. Wenn Sie Hilfe benötigen, können Sie unsere Anleitung zur Installation eines WordPress-Plugins durchgehen.

Beachten Sie, dass es sich um das Kommentarformular handelt, aber Sie können das Plugin bearbeiten, um Ihr Benutzerregistrierungsformular, Umfragen, Feedback-Formular, Bewerbungsformular oder andere Formulare anzusprechen.

Bonus: Verbessern Sie die Leistung Ihrer WordPress-Formulare

Nachdem Sie das Bestätigungs-Navigations-Popup hinzugefügt haben, ist es eine gute Idee zu verfolgen, wie oft Benutzer ihre Formulare abbrechen. Das Wissen um diese Daten kann Ihnen helfen, Probleme zu finden und zu beheben, die dazu führen, dass Personen abbrechen.

Eines der besten Tools zur Verfolgung von Formularabbrüchen ist MonsterInsights. Es ist das beste Google Analytics-Plugin für WordPress. Sein Forms-Addon (verfügbar in der Pro-Version) erleichtert die automatische Verfolgung von Formularaufrufen und -übermittlungen.

Auf diese Weise können Sie direkt von Ihrem Dashboard aus sehen, wie Benutzer mit Ihren Formularen interagieren.

Bei WPBeginner verwenden wir MonsterInsights, um alle unsere wichtigen Conversions zu verfolgen, einschließlich Formulare, Schaltflächen und Affiliate-Links. Lesen Sie unsere vollständige MonsterInsights-Bewertung, um alle seine Funktionen kennenzulernen.

Weitere Details finden Sie in unserem Leitfaden unter wie Sie Formularabbrüche verfolgen und reduzieren.

Sie können auch A/B-Split-Tests durchführen, um zu sehen, welche Version Ihres Formulars besser abschneidet. Sie könnten zum Beispiel verschiedene Formularstile oder Button-Texte testen, um zu sehen, was mehr Abschlüsse fördert.

Zum Beispiel könnten Sie den Wortlaut Ihres Bestätigungs-Navigations-Popups ändern oder Ihr Formular anpassen. Durch die Analyse der Ergebnisse können Sie feststellen, was Benutzer bindet und hilft, Abbruchraten zu reduzieren.

Thrive Optimize ist das beste Plugin für diese Aufgabe. Es ermöglicht Ihnen, A/B-Split-Tests einfach und ohne Programmierung durchzuführen.

Weitere Informationen finden Sie in unserem Leitfaden zum A/B-Split-Testing in WordPress.

Häufig gestellte Fragen zu Bestätigungs-Navigations-Popups

Wird das Hinzufügen dieses Codes meine Website verlangsamen?

Nein, überhaupt nicht. Der JavaScript-Code ist sehr schlank und wird nur ausgeführt, wenn ein Benutzer versucht, eine Seite mit einem geänderten Formular zu verlassen. Er hat keine spürbaren Auswirkungen auf die Leistung Ihrer Website.

Kann ich die Nachricht im Bestätigungs-Popup ändern?

Leider nein. Aus Sicherheitsgründen erlauben moderne Browser Websites nicht mehr, eine benutzerdefinierte Nachricht in dem Bestätigungs-Popup anzuzeigen. Sie zeigen dem Benutzer immer eine generische, Standardwarnung an.

Funktioniert dieses Bestätigungs-Pop-up auch in mobilen Browsern?

Ja, das onbeforeunload-Ereignis wird von den meisten modernen mobilen Browsern unterstützt, einschließlich Chrome und Safari auf Android und iOS. Das Verhalten ist dasselbe wie auf einem Desktop.

Zusätzliche Anleitungen zur Verwendung von WordPress-Formularen

Wir hoffen, dieser Artikel hat Ihnen geholfen, das Bestätigungs-Popup für die Navigation für Ihre WordPress-Formulare anzuzeigen.

Möglicherweise möchten Sie auch diese anderen Anleitungen und Experten-Tipps lesen:

• So erstellen Sie ein Kontaktformular mit mehreren Empfängern
• So senden Sie Bestätigungs-E-Mails nach WordPress-Formularübermittlungen
• Möglichkeiten, bedingte Logik in Ihren WordPress-Formularen zu verwenden
• Beste Online-Formularersteller (Expertenauswahl)
• 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.