Wie man das Navigations-Popup für Formulare in WordPress bestätigt

Wenn eine Seite versehentlich geschlossen wird, ohne dass ein Kommentar abgegeben wurde, oder wenn ein Formular nur halb ausgefüllt ist, kann das sehr frustrierend sein. Kürzlich fragte uns einer unserer Benutzer, ob es möglich sei, seinen Besuchern ein Popup zur Bestätigung der Navigation anzuzeigen.

Dieses winzige Popup-Fenster warnt die Benutzer und verhindert, dass sie versehentlich halb ausgefüllte und nicht abgeschickte Formulare hinterlassen. Es ist eine gute Möglichkeit, die Benutzererfahrung zu verbessern und zu verhindern, dass die Besucher etwas von Grund auf neu beginnen müssen.

Wenn diese Funktion jedoch nicht richtig eingerichtet ist, kann sie lästig sein und Ihre Website stören und die Benutzer frustrieren. Sie brauchen eine zuverlässige Methode, um diese Funktion reibungslos hinzuzufügen und diese Probleme zu vermeiden.

Deshalb wollen wir Ihnen zeigen, wie Sie dies mit einem individuell erstellten Plugin tun können. Keine Sorge, es ist einfacher als Sie denken!

In diesem Artikel zeigen wir Ihnen, wie Sie das Navigations-Popup für WordPress-Formulare anzeigen können.

Was ist ein Popup zur Bestätigung der Navigation? Warum brauchen Sie es?

Nehmen wir an, ein Benutzer schreibt einen Kommentar in Ihrem WordPress-Blog. Er hat bereits einige Zeilen geschrieben, aber er wird abgelenkt und vergisst, Kommentare abzuschicken. Wenn sie nun ihren Browser schließen, geht der Kommentar verloren.

Das Popup-Fenster zur Bestätigung der Navigation gibt ihnen die Möglichkeit, ihren Kommentar zu beenden.

Diese Funktion wird in der Ansicht des WordPress Editors für Beiträge in Aktion gezeigt. Wenn Sie nicht gespeicherte Änderungen haben und versuchen, die Seite zu verlassen oder den Browser zu schließen, wird ein Warn-Popup angezeigt.

Die Einrichtung eines Popup-Fensters zur Bestätigung der Navigation kann die Benutzererfahrung, die Konversionsraten und das Vertrauen der Benutzer verbessern.

Und so geht’s: Indem Sie den Benutzern eine Warnfunktion anbieten, zeigen Sie, dass Ihnen die Erfahrung Ihrer Benutzer wichtig ist, was die Loyalität und die Wiederbesuche fördern kann. Benutzer füllen eher Formulare oder Kommentare aus, wenn sie wissen, dass sie ihren Fortschritt nicht verlieren werden.

Deshalb zeigen wir Ihnen, wie Sie diese Warnfunktion zu WordPress-Kommentaren und anderen Formularen auf Ihrer Website hinzufügen können. Hier ist ein kurzer Überblick über alle Dinge, über die wir in diesem Leitfaden sprechen werden:

Sind Sie bereit? Dann fangen wir an.

Popup zur Navigationsbestätigung für nicht abgeschickte Formulare in WordPress anzeigen

Für dieses Tutorial werden wir ein individuelles Plugin erstellen, aber keine Sorge. Sie können das Plugin auch am Ende dieses Tutorials herunterladen, um es auf Ihrer Website zu installieren.

Zum besseren Verständnis des Codes möchten wir Sie jedoch bitten, Ihr eigenes Plugin zu erstellen. Sie können dies zunächst auf einer lokalen Installation oder einer Website tun.

Zunächst 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 wir nun einen einfachen Texteditor wie Notepad und erstellen eine neue Datei. Fügen Sie darin einfach den folgenden Code ein:

[php]
<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.com
 * 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://www.wpbeginner.com
 * 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
		
		
[/php]

Diese PHP-Funktion fügt einfach eine JavaScript-Datei in das Frontend Ihrer Website ein.

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

Nun müssen wir die JavaScript-Datei erstellen, die dieses Plugin lädt. Dazu erstellen Sie eine neue Datei in Ihrem Texteditor und fügen diesen Code darin ein:

[javascript]
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
		
		
[/javascript]

Dieser JavaScript-Code erkennt, ob der Benutzer nicht gespeicherte Änderungen im Kommentarformular vorgenommen hat. Wenn ein Benutzer versucht, die Seite zu verlassen oder das Fenster zu schließen, wird ein Warn-Popup angezeigt.

Diese Datei müssen Sie dann als confirm-leaving.js im Ordner js speichern.

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

Nun müssen Sie eine Verbindung zu Ihrer WordPress Website mit einem FTP-Client herstellen. Eine Schritt-für-Schritt-Anleitung finden Sie in unserer Anleitung zum Hochladen von WordPress-Dateien mit FTP.

Sobald die Verbindung hergestellt ist, müssen Sie den Ordner confirm-leaving in den Ordner/wp-contents/plugins/ auf Ihrer Website hochladen.

Danach müssen Sie sich im WordPress-Administrationsbereich anmelden und zu „Plugins“ gehen.

Von hier aus sollten Sie das Plugin „Austritt bestätigen“ in der Liste der installierten Plugins sehen. Klicken Sie dann auf den Link „Aktivieren“ darunter.

Das war’s schon. Sie können nun jeden beliebigen Beitrag auf Ihrer Website besuchen, etwas Text in ein beliebiges Feld des Kommentarformulars schreiben und dann versuchen, die Seite zu verlassen, ohne den Beitrag zu senden.

Es erscheint ein Popup-Fenster, das Sie darauf hinweist, dass Sie im Begriff sind, eine Seite mit nicht gespeicherten Änderungen zu verlassen.

Hinzufügen des Warn-Popups zu anderen Formularen auf Ihrer WordPress Website

Sie können dieselbe Code-Basis verwenden, um beliebige Formulare auf Ihrer WordPress-Website anzusprechen. Hier zeigen wir Ihnen ein Beispiel für die Verwendung für ein Kontaktformular.

In diesem Beispiel verwenden wir das WPForms Plugin, um ein Kontaktformular zu erstellen. Die Anweisungen sind dieselben, wenn Sie ein anderes Plugin für Kontaktformulare auf Ihrer Website verwenden.

Als Erstes müssen Sie die Seite aufrufen, auf der Sie Ihr Kontaktformular hinzugefügt haben. Dann fahren Sie mit der Maus über das erste Feld Ihres Kontaktformulars, klicken mit der rechten Maustaste und wählen im Browser-Menü die Option „Prüfen“.

Von hier aus müssen Sie die Zeile suchen, die mit dem <form>-Schlagwort beginnt, um das Attribut ID zu finden. In diesem Beispiel lautet die ID unseres Formulars wpforms-form-170.

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

Bearbeiten Sie nun die Datei confirm-leaving.js und fügen Sie das Attribut ID nach #commentform ein. Stellen Sie sicher, dass Sie #commentform durch ein Komma von der ID Ihres Formulars trennen. Sie müssen auch ein #-Zeichen als Präfix für das ID-Attribut Ihres Formulars hinzufügen.

Ihr Code sieht nun wie folgt aus:

[javascript]
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
		
		
[/javascript]

Wenn alles gut aussieht, können Sie Ihre Änderungen speichern und die Datei wieder auf Ihre Website hochladen.

Jetzt können Sie einen beliebigen Text in ein beliebiges Feld Ihres Kontaktformulars eingeben und dann versuchen, die Seite zu verlassen, ohne das Formular abzuschicken. Es erscheint ein Popup-Fenster mit einer Warnung, dass die Änderungen nicht gespeichert wurden.

Sie können das Plugin zum Bestätigen des Verlassens hier herunterladen, installieren und aktivieren Sie es wie gewohnt. Wenn Sie Hilfe benötigen, können Sie unseren Leitfaden zur Installation eines WordPress Plugins durchgehen.

Beachten Sie, dass es auf das Kommentarformular abzielt, aber Sie können das Plugin so bearbeiten, dass es auf Ihr Benutzer-Registrierungsformular, Befragungen, Feedback-Formular, Bewerbungsformular oder andere Formulare abzielt.

Bonustipp: Verbessern Sie die Leistung Ihrer WordPress-Formulare

Nachdem Sie das Popup zur Bestätigung der Navigation hinzugefügt haben, sollten Sie verfolgen, wie oft Benutzer ihre Formulare abbrechen.

Wenn Sie wissen, wie viele Besucher die Website verlassen, ohne sie zu beenden, können Sie feststellen, wie gut Ihre Website für sie funktioniert. Auf diese Weise können Sie herausfinden, was sie zum Verlassen der Seite veranlasst, und Verbesserungen vornehmen.

Eines der besten Werkzeuge zur Verfolgung von Formularabbrüchen ist MonsterInsights.

Es ist das beste Google Analytics Plugin, mit dem Sie ganz einfach sehen können, wie Benutzer mit Ihren Formularen interagieren und wo sie dazu neigen, abzubrechen – und das alles von Ihrem WordPress-Dashboard aus.

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Verfolgung und Reduzierung von Formularabbrüchen.

Wenn Sie möchten, können Sie auch einen A/B-Splittest durchführen. Das bedeutet, dass Sie verschiedene Versionen Ihrer Formulare ausprobieren, um zu sehen, welche besser abschneidet.

So können Sie beispielsweise den Wortlaut des Popups zur Bestätigung der Navigation ändern oder Ihr Formular individuell anpassen. Durch die Analyse der Ergebnisse können Sie feststellen, was die Benutzer bei der Stange hält und dazu beiträgt, die Abbruchraten zu senken.

Thrive Optimize ist das beste Plugin für diese Aufgabe. Mit ihm können Sie A/B-Split-Tests ohne Programmierung durchführen und Ihre Daten sicher aufbewahren.

Weitere Informationen finden Sie in unserem Leitfaden für A/B-Split-Tests in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das Popup zur Bestätigung der Navigation für WordPress-Formulare zu zeigen. Vielleicht möchten Sie auch unsere Expertenauswahl der besten Online-Formularersteller und unsere Anleitung zum Hinzufügen besserer individueller Benachrichtigungen lesen.

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.