Închiderea accidentală a unei pagini fără trimiterea formularului pe jumătate este enervant. Recent, unul dintre utilizatorii noștri ne-a întrebat dacă este posibil să afișăm o fereastră pop-up care confirmă acțiunea utilizatorului asupra formularelor? Acest mic utilizator alertă și îi împiedică să închidă accidental pagini cu formulare pe jumătate umplute.

În acest tutorial, vă vom arăta cum să afișați o fereastră de confirmare a acțiunii de închidere pentru formularele dvs. WordPress blog.

Ce este un popup de confirmare a navigării

Să presupunem că un utilizator scrie un comentariu pe blogul dvs. a scris deja câteva rânduri, dar ei se distrag și uită să trimită comentariul. Acum, făcând clic pe un link, de exemplu, tot conținutul pe care a început să-l scrie se va pierde.

Confirmarea de navigare le oferă șansa de a-și completa comentariul.

Puteți vedea această caracteristică din interfața editorului de articole / pagini. Dacă aveți modificări nesalvate și încercați să ieșiți din pagină sau să închideți browserul, atunci veți vedea un avertisment pop-up.

Să vedem cum putem adăuga această caracteristică de avertizare la comentariile WordPress și alte forme de pe blogul dvs.

Cum se afișează o fereastră pop-up de confirmare pe formularele nedepuse în WordPress

Pentru acest tutorial, vom face creați un plugin personalizat. V-am arătat deja cum să creați un WordPress plug-in repede.

Să începem.

Mai întâi trebuie să creați un folder nou pe computer și să-l denumiți „confirm-action”. În acest folder trebuie să creați un alt folder și să-l denumiți js.

Acum deschideți un editor de text precum Notepad și creați un fișier nou. În interior, lipiți următorul cod:

<?php
/**
 * Confirmer Action
 * Plugin Name: Confirmer Action
 * Plugin URI:  https://blogpascher.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:      VotreNOM
 * Author URI:  https://blogpascher.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function 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');

Această funcție php adaugă pur și simplu un fișier JavaScript în partea frontală a site-ului dvs. web.

Mergeți mai departe și salvați acest fișier ca „confirmare-acțiune”.php" în folder confirma acțiunea "(Rădăcina pluginului dvs.)

Acum trebuie să creăm fișierul JavaScript pe care îl va încărca acest plugin. Creați un fișier nou și lipiți acest cod în interiorul:

jQuery (documentul) .ready (funcția ($) {$ (documentul) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funcția askConfirm () {if (needToConfirm) {// Pune-ta mesaj personalizat aici reveni "datele nesalvate vor fi pierdute.";}} $ ( "# CommentForm") de schimb (funcția () {needToConfirm = true;}).})

Redenumiți acest fișier confirmați-leaving.js", Mutați-l în" subfolder " js "Of" confirma acțiunea".

Acest cod JavaScript detectează dacă utilizatorul are modificări nesalvate în formularul de comentarii. Dacă utilizatorul încearcă să părăsească pagina, va afișa un avertisment pop-up.

Tot ce trebuie să faceți acum este să încărcați fișierul pe server folosind clientul Favorite FTP. După aceea, tot ce trebuie să faceți este să activați pluginul de pe tabloul de bord.

Asta e tot. Acum puteți vizita un articol de pe site-ul dvs., încercați să scrieți un comentariu, apoi faceți clic pe un link, veți observa un popup similar cu acesta.

Adăugarea avertismentului pe alte formulare WordPress

Puteți folosi același cod pentru a viza toate formularele de pe site-ul dvs. WordPress. Aici vă vom arăta un exemplu pe a formular de contact.

În acest exemplu, vom folosi pluginul WPForms a crea o formular de contact. Instrucțiunile vor fi aceleași dacă utilizați altul plugin pentru formularul de contact pe site.

Accesați pagina în care v-ați adăugat formular de contact. Deplasați mouse-ul peste primul câmp din formularul de contact, faceți clic dreapta, apoi selectați „ inspecta„, Pentru a accesa codul sursă.

Căutați linia care începe cu eticheta <form>. În eticheta formularului veți găsi atributul ID. În acest exemplu, ID-ul formularului nostru este formulaire . Trebuie să copiați atributul ID.

Acum, editați secțiunea confirmer-leaving.js fișier și adăugați atributul ID după „ #commentform Separat de virgulă.

Codul dvs. ar trebui să arate astfel:

jQuery (documentul) .ready (funcția ($) {$ (documentul) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funcția askConfirm () {if (needToConfirm) {// Pune-ta $ message ("# commentform, # form") schimbare (function () {needToConfirm = true;});})

Salvați modificările și instalați pluginul pe blogul dvs. WordPress.

Gata pentru acest tutorial. Sper că vă ajută să adăugați o fereastră de confirmare pop-up pe blogul dvs. Nu ezitați să puneți întrebări dacă nu înțelegeți un punct.