So zeigen Sie das Bestätigungsnavigations-Popup für Formulare in WordPress an

Wenn Sie versehentlich eine Seite schließen, ohne Ihren Kommentar oder ein halb ausgefülltes Formular einzureichen, ist dies ärgerlich. Kürzlich hat uns einer unserer Benutzer gefragt, ob es möglich ist, seinen Lesern ein Bestätigungsnavigationsfenster anzuzeigen. Dieses kleine Popup alarmiert Benutzer und verhindert, dass sie versehentlich ein halb ausgefülltes und nicht eingereichtes Formular verlassen. In diesem Artikel zeigen wir Ihnen, wie Sie ein Bestätigungs-Popup für WordPress-Formulare anzeigen.

Was ist ein Navigations-Popup??

Nehmen wir an, ein Benutzer schreibt einen Kommentar in Ihr Blog. Sie haben schon einige Zeilen geschrieben, aber sie werden abgelenkt und vergessen, einen Kommentar abzugeben. Wenn sie nun ihren Browser schließen, geht der Kommentar verloren.

Das Bestätigungsnavigations-Popup gibt ihnen die Möglichkeit, ihren Kommentar zu beenden.

Sie können diese Funktion in Aktion im WordPress-Post-Editor-Bildschirm sehen. Wenn Sie nicht gespeicherte Änderungen vorgenommen haben und versuchen, die Seite zu verlassen oder den Browser zu schließen, wird eine Warnmeldung angezeigt.

Mal sehen, wie wir diese Warnfunktion zu WordPress-Kommentaren und anderen Formularen auf Ihrer Site hinzufügen können.

Popup-Fenster "Bestätigte Navigation anzeigen" für nicht gesendete Formulare in WordPress anzeigen

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

Zum besseren Verständnis des Codes bitten wir Sie jedoch, Ihr eigenes Plugin zu erstellen. Sie können dies zunächst auf einer lokalen Installations- oder Staging-Site durchführen.

Lass uns anfangen.

Zuerst müssen Sie einen neuen Ordner auf Ihrem Computer erstellen und ihm einen Namen geben Bestätigen-Verlassen. Im Bestätigungsordner müssen Sie einen anderen Ordner erstellen und den Namen js nennen.

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

  
Diese PHP-Funktion fügt dem Frontend Ihrer Website einfach eine JavaScript-Datei hinzu. 
 
Speichern Sie diese Datei unter Bestätigen-Verlassen.php im Hauptordner für die Bestätigung. 
 
Nun müssen wir die JavaScript-Datei erstellen, die dieses Plugin lädt. 
 
Erstellen Sie eine neue Datei und fügen Sie diesen Code ein: 
 
 jQuery (document) .ready (Funktion ($) $ (document) .ready (Funktion () needToConfirm = false; window.onbeforeunload = askConfirm;); Funktion askConfirm () if (needToConfirm) // Setzen Sie Ihre Benutzerdefinierte Nachricht hier zurückgeben "Ihre nicht gespeicherten Daten gehen verloren."; $ ("# commentform"). change (function () needToConfirm = true;);) 
 
Dieser JavaScript-Code erkennt, ob der Benutzer Änderungen in Kommentarform nicht gespeichert hat. Wenn ein Benutzer versucht, von der Seite weg zu navigieren oder das Fenster zu schließen, wird ein Warnfenster angezeigt. 
 
Sie müssen diese Datei als speichern Bestätigen-Verlassen.js im Ordner js. 
 
Nach dem Speichern beider Dateien sollte Ihre Ordnerstruktur folgendermaßen aussehen: 
 
 
Jetzt müssen Sie über einen FTP-Client eine Verbindung zu Ihrer WordPress-Site herstellen. In unserem Handbuch erfahren Sie, wie Sie WordPress-Dateien mit FTP hochladen. 
 
Einmal verbunden, müssen Sie hochladen Bestätigen-Verlassen Ordner zu / wp-contents / plugins / Ordner auf Ihrer Website. 
 
 
Danach müssen Sie sich im WordPress-Adminbereich anmelden und die Plugins-Seite besuchen. Suchen Sie das Plugin 'Confirm Leaving' in der Liste der installierten Plugins und klicken Sie auf den Link 'Aktivieren'. 
 
 
Das ist alles. Sie können jetzt jeden Post auf Ihrer Website besuchen, Text in ein beliebiges Feld des Kommentarformulars schreiben und dann versuchen, die Seite ohne Absenden zu verlassen. Es erscheint ein Popup, das Sie darauf hinweist, dass Sie eine Seite mit nicht gespeicherten Änderungen verlassen. 
 
 
Hinzufügen der Warnung zu anderen Formularen in WordPress
 
Sie können dieselbe Codebasis verwenden, um auf beliebige Formulare auf Ihrer WordPress-Site zu zielen. Hier zeigen wir Ihnen ein Beispiel für die Verwendung eines Kontaktformulars. 
 
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 hinzugefügt haben. Fahren Sie mit der Maus zum ersten Feld in Ihrem Kontaktformular, klicken Sie mit der rechten Maustaste, und wählen Sie im Browsermenü Inspizieren aus. 
 
 
Suchen Sie die Zeile, die mit der beginnt  Etikett. Im Formular-Tag finden Sie das ID-Attribut. 
 
In diesem Beispiel lautet die ID unseres Formulars wpforms-form-170. Sie müssen das ID-Attribut kopieren. 
 
Bearbeiten Sie nun die Bestätigen-Verlassen.js Datei und fügen Sie das ID-Attribut nach #commentform.
 
Stellen Sie sicher, dass Sie sich trennen #commentform und die ID Ihres Formulars mit einem Komma. Sie müssen auch hinzufügen # Melden Sie sich als Präfix für das ID-Attribut Ihres Formulars. 
 
Ihr Code sieht nun so aus:
 
 jQuery (document) .ready (Funktion ($) $ (document) .ready (Funktion () needToConfirm = false; window.onbeforeunload = askConfirm;); Funktion askConfirm () if (needToConfirm) // Setzen Sie Ihre benutzerdefinierte Nachricht hier zurückgeben "Ihre nicht gespeicherten Daten gehen verloren."; $ ("# commentform, # wpforms-form-170"). change (function () needToConfirm = true;);) 
 
Speichern Sie Ihre Änderungen und laden Sie die Datei zurück auf Ihre Website. 
 
Jetzt können Sie beliebigen Text in jedes Feld Ihres Kontaktformulars eingeben und dann versuchen, die Seite zu verlassen, ohne das Formular zu senden. Es erscheint ein Popup mit der Warnung, dass Sie Änderungen nicht gespeichert haben. 
 
Sie können das Bestätigungs-Plugin hier herunterladen. Es ist nur für das Kommentarformular bestimmt, aber Sie können das Plug-in auch für andere Formulare bearbeiten. 
 
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das Navigations-Popup für WordPress-Formulare anzuzeigen. Sie können auch die 8 besten jQuery-Tutorials für WordPress-Anfänger ausprobieren. 
 
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.