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

Es ist ärgerlich, wenn eine Seite versehentlich geschlossen wird, ohne dass ein Kommentar abgegeben wurde, oder wenn ein Formular nur halb ausgefüllt ist. Kürzlich fragte uns einer unserer Nutzer, ob es möglich sei, seinen Lesern ein Popup zur Bestätigung der Navigation anzuzeigen.

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

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

Was ist ein Popup zur Navigationsbestätigung?

Nehmen wir an, ein Benutzer schreibt einen Kommentar in Ihrem Blog. Er hat bereits einige Zeilen geschrieben, aber er wird abgelenkt und vergisst, den Kommentar 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.

Sie können diese Funktion auf dem Bildschirm des WordPress-Beitragseditors in Aktion sehen. Wenn Sie nicht gespeicherte Änderungen haben und versuchen, die Seite zu verlassen oder den Browser zu schließen, wird ein Warn-Popup angezeigt.

Sehen wir uns an, wie wir diese Warnfunktion zu WordPress-Kommentaren und anderen Formularen auf Ihrer Website hinzufügen können:

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

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

Um den Code besser zu verstehen, bitten wir Sie jedoch, Ihr eigenes Plugin zu erstellen. Sie können dies zunächst auf einer lokalen Installation oder einer Staging-Site tun.

Fangen wir an.

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

Öffnen Sie nun einen einfachen Texteditor wie Notepad und erstellen Sie 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 das Plugin lädt.

Erstellen Sie eine neue Datei und fügen Sie diesen Code 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.

Sie müssen diese Datei unter dem Namen confirm-leaving.js im Ordner js speichern.

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

Nun müssen Sie mit einem FTP-Client eine Verbindung zu Ihrer WordPress-Website herstellen. Sehen Sie sich unsere Anleitung zum Hochladen von WordPress-Dateien mit FTP an.

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 in den WordPress-Administrationsbereich einloggen und die Seite des Plugins besuchen.

Suchen Sie das Plugin ‚Confirm Leaving‘ in der Liste der installierten Plugins und klicken Sie auf den Link ‚aktivieren‘ darunter.

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

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

Hinzufügen der Warnung zu anderen Formularen in WordPress

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 die gleichen, wenn Sie ein anderes Kontaktformular-Plugin auf Ihrer Website verwenden.

Gehen Sie zu der Seite, auf der Sie Ihr Kontaktformular eingefügt haben. Fahren Sie mit der Maus über das erste Feld Ihres Kontaktformulars, klicken Sie mit der rechten Maustaste und wählen Sie dann im Browsermenü „Prüfen“.

Suchen Sie die Zeile, die mit dem <form>-Tag beginnt. In dem Formular-Tag finden Sie das Attribut ID.

In diesem Beispiel lautet die ID unseres Formulars wpforms-form-170. Sie müssen das Attribut ID kopieren.

Bearbeiten Sie nun die Datei confirm-leaving.js und fügen Sie das Attribut ID nach #commentform hinzu.

Trennen Sie #commentform durch ein Komma von der ID Ihres Formulars. Sie müssen auch ein #-Zeichen als Präfix zum 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]

Speichern Sie Ihre Änderungen und laden Sie die Datei wieder auf Ihre Website hoch.

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. Es zielt nur auf das Kommentarformular ab, aber Sie können das Plugin gerne bearbeiten, um andere Formulare anzusprechen.

Das war’s. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das Navigations-Popup für WordPress-Formulare zu bestätigen. Vielleicht möchten Sie auch einen Blick auf unsere WordPress-Plugins und -Tools für Business-Websites werfen oder unseren ultimativen Leitfaden lesen, wie Sie Ihren Blog-Traffic erhöhen 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.