Das versehentliche Schließen einer Seite ohne Senden Ihres halb ausgefüllten Formulars ist ärgerlich. Kürzlich hat uns einer unserer Benutzer gefragt, ob es möglich ist, ein Popup anzuzeigen, das die Benutzeraktion auf Formularen bestätigt. Diese winzige Warnung alarmiert Benutzer und verhindert, dass sie versehentlich Seiten mit halb ausgefüllten Formularen schließen.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein Bestätigungsfenster für das Schließen von Aktionen für Ihre Formulare anzeigen. Wordpress-Blog.

Was ist ein Popup-Bestätigungs-Popup?

Angenommen, ein Benutzer schreibt einen Kommentar in Ihr Blog. Er hat bereits einige Zeilen geschrieben, aber sie werden abgelenkt und vergessen, den Kommentar einzureichen. Wenn Sie beispielsweise auf einen Link klicken, geht der gesamte Inhalt, den er zu schreiben begonnen hat, verloren.

Die Browsing-Bestätigung gibt ihnen die Möglichkeit, ihren Kommentar zu vervollständigen.

Sie können diese Funktion auf der Oberfläche des Artikel- / Seiteneditors sehen. Wenn Sie nicht gespeicherte Änderungen haben und versuchen, die Seite zu verlassen oder den Browser zu schließen, wird eine Popup-Warnung angezeigt.

Mal sehen, wie wir diese Warnfunktion in WordPress-Kommentaren und anderen Formularen in Ihrem Blog hinzufügen können.

So zeigen Sie ein Bestätigungs-Popup auf nicht eingereichten Formularen in WordPress an

Für dieses Tutorial, werden wir erstelle ein benutzerdefiniertes Plugin. Wir haben Ihnen bereits gezeigt, wie Sie eine erstellen WordPress Plugin schnell.

Lassen Sie uns beginnen.

Zuerst müssen Sie einen neuen Ordner auf Ihrem Computer erstellen und ihn "Bestätigungsaktion" nennen. In diesem Ordner müssen Sie einen anderen Ordner erstellen und ihn js nennen.

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

<?php
/**
 * Aktion bestätigen
 * Plugin-Name: Aktion bestätigen
 * Plugin-URI: https://blogpascher.com
 * Beschreibung: Dieses Plugin zeigt Benutzern eine Warnung an, wenn sie vergessen, in einem Kommentarformular auf die Schaltfläche „Senden“ zu klicken.
 * Version: 1.0.0
 * Autor: YourNAME
 * Autoren-URI: https://blogpascher.com
 * Lizenz: GPL-2.0+
 * Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
Funktion bpc_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', 'bpc_confirm_leaving_js');

Diese PHP-Funktion fügt einfach eine JavaScript-Datei zum Frontend Ihrer Website hinzu.

Fahren Sie fort und speichern Sie diese Datei als "Bestätigungsaktion".php" im Ordner bestätigen Aktion "(Wurzel Ihres Plugins).

Jetzt 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 (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); Funktion askConfirm () {if (needToConfirm) {// Setzen Sie Ihre benutzerdefinierte Nachricht hierher zurückkehren "Ihre nicht gespeicherten Daten verloren gehen.";}} $ ( "# Kommentarformular") Austausch (function () {needToConfirm = true;}).})

Benennen Sie diese Datei um bestätigen-leaving.js", Verschiebe es in den" Unterordner " js »Von« bestätigen Aktion".

Dieser JavaScript-Code erkennt, ob der Benutzer Änderungen im Kommentarformular nicht gespeichert hat. Wenn der Benutzer versucht, die Seite zu verlassen, wird eine Popup-Warnung angezeigt.

Jetzt müssen Sie nur noch Ihre Datei mit Ihrem Client auf Ihren Server hochladen FTP-Favoriten. Danach müssen Sie nur noch das Plugin über Ihr Dashboard aktivieren.

Das ist alles. Sie können jetzt einen Artikel auf Ihrer Website besuchen, versuchen, einen Kommentar zu schreiben, und dann auf einen Link klicken. Sie werden ein ähnliches Popup bemerken.

Hinzufügen der Warnung zu anderen WordPress-Formularen

Sie können den gleichen Code verwenden, um alle Formulare auf Ihrer WordPress-Site anzusprechen. Hier zeigen wir Ihnen ein Beispiel auf a Kontaktformular.

In diesem Beispiel verwenden wir das Plugin WPForms a erstellen Kontaktformular. Die Anweisungen sind die gleichen, wenn Sie eine andere verwenden Kontaktformular Plugin auf Ihrer Website.

Gehen Sie zu der Seite, auf der Sie Ihre hinzugefügt haben Kontaktformular. Bewegen Sie die Maus über das erste Feld in Ihrem Kontaktformular, klicken Sie mit der rechten Maustaste und wählen Sie dann „ inspizieren“, Um auf den Quellcode zuzugreifen.

Suchen Sie die Zeile, die mit dem Tag beginnt <form>. Im Formular-Tag finden Sie das ID-Attribut. In diesem Beispiel lautet die ID unseres Formulars formulaire . Sie müssen das ID-Attribut kopieren.

Bearbeiten Sie nun die confirmer-leaving.js Datei und fügen Sie das ID-Attribut nach " #commentform Durch Komma getrennt.

Ihr Code sollte folgendermaßen aussehen:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); Funktion askConfirm () {if (needToConfirm) {// Setzen Sie Ihre benutzerdefinierte Nachricht hierher zurückkehren "Ihre nicht gespeicherten Daten verloren gehen.";}} $ ( "# Kommentarformular, Form #") Austausch (function () {needToConfirm = true;}).})

Speichern Sie Ihre Änderungen und Installieren Sie das Plugin auf Ihrem Wordpress-Blog.

Das war's für dieses Tutorial. Ich hoffe, es hilft Ihnen dabei, Ihrem Blog ein Popup-Bestätigungsfenster hinzuzufügen. Zögern Sie nicht, Fragen zu stellen, wenn Sie einen Punkt nicht verstehen.