Cum se afișează Confirmă ferestrele de navigare pentru Formulare în WordPress

Închiderea accidentală a unei pagini fără a trimite comentariul sau cu un formular pe jumătate este enervant. Recent, unul dintre utilizatorii noștri ne-a întrebat dacă a fost posibil să se arate cititorilor lor un popup de navigare confirmat? Acest utilizator mic alertă alertă pop-up și le împiedică să lase accidental jumătate umplut și formă depusă. În acest articol, vă vom arăta cum să arătați confirmarea pop-up de navigare pentru formularele WordPress.

Ce este Confirmare navigare popup?

Să presupunem că un utilizator scrie un comentariu pe blogul tău. Au scris deja câteva linii, dar se distrează și uită să prezinte comentarii. Acum, dacă și-au închis browser-ul, atunci comentariul va fi pierdut.

Mesajul de confirmare a navigării le dă șansa să-și termine comentariul.

Puteți vedea această funcție în acțiune în ecranul editorului de posturi WordPress. Dacă aveți modificări nesalvate și încercați să părăsiți pagina sau să închideți browserul, veți vedea un popup de avertizare.

Să vedem cum putem adăuga această caracteristică de avertizare la comentariile WordPress și alte formulare de pe site-ul dvs..

Afișați Confirmați fereastra de navigare pentru Formulare necirculate în WordPress

Pentru acest tutorial, vom crea un plugin personalizat, dar nu vă faceți griji puteți descărca plugin-ul la sfârșitul acestui tutorial pentru a instala pe site-ul dvs..

Cu toate acestea, pentru o mai bună înțelegere a codului, vă vom solicita să încercați să creați propriul plugin. Puteți face acest lucru într-o locație de instalare locală sau pe un site de așteptare.

Să începem.

Mai întâi trebuie să creați un nou folder pe computer și să-l numiți confirmați-lăsând. În interiorul directorului de confirmare-plecare, trebuie să creați un alt dosar și să îl denumiți.

Deschideți acum un editor de text simplu ca Notepad și creați un fișier nou. În interior, pur și simplu lipiți următorul cod:

  
Această funcție php adaugă doar un fișier JavaScript în front-end al site-ului dvs. Web. 
 
Continuați și salvați acest fișier ca confirmați-leaving.php în dosarul principal de confirmare-plecare. 
 
Acum trebuie să creați fișierul JavaScript pe care se încărcă acest plugin. 
 
Creați un fișier nou și inserați acest cod în el: 
 
 jQuery (document) .ready (functie ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm; mesaj personalizat aici se întoarce "Datele dvs. nesalvate vor fi pierdute"; $ ("# commentform") schimbare (function () needToConfirm = true;);) 
 
Acest cod JavaScript detectează dacă utilizatorul are modificări nesalvate în formularul de comentarii. Dacă un utilizator încearcă să navigheze departe de pagină sau să închidă fereastra, acesta va afișa un popup de avertizare. 
 
Trebuie să salvați acest fișier ca confirmați-leaving.js în interiorul directorului js. 
 
După salvarea ambelor fișiere, aceasta ar trebui să arate structura de directoare: 
 
 
Acum trebuie să vă conectați la site-ul dvs. WordPress folosind un client FTP. Consultați ghidul nostru despre utilizarea FTP pentru a încărca fișierele WordPress. 
 
După conectare, trebuie să încărcați confirmați-lăsând dosarul pentru / wp-contents / plugins / pe site-ul dvs. web. 
 
 
După aceea, trebuie să vă conectați la zona de administrare WordPress și să vizitați pagina Plugins. Găsiți pluginul "Confirmare plecare" în lista pluginurilor instalate și dați clic pe linkul "activează" de sub el. 
 
 
Asta e tot. Puteți vizita acum orice postare de pe site-ul dvs., puteți scrie un text în orice câmp al formularului de comentariu și apoi încercați să părăsiți pagina fără a fi trimisă. Va apărea un pop-up, care vă avertizează că sunteți pe punctul de a lăsa o pagină cu modificări nesalvate. 
 
 
Adăugarea Avertismentului la alte Formulare în WordPress
 
Puteți utiliza aceeași bază de cod pentru a viza orice formă de pe site-ul dvs. WordPress. Aici vă vom arăta un exemplu de utilizare a acestuia pentru a viza un formular de contact. 
 
În acest exemplu, folosim pluginul WPForms pentru a crea un formular de contact. Instrucțiunile vor fi aceleași dacă utilizați un plugin de formular de contact diferit pe site-ul dvs. Web. 
 
Accesați pagina pe care ați adăugat formularul dvs. de contact. Luați mouse-ul peste primul câmp din formularul de contact, faceți clic dreapta, apoi selectați Inspect din meniul browserului. 
 
 
Localizați linia care începe cu  etichetă. În eticheta formularului, veți găsi atributul ID. 
 
În acest exemplu, ID-ul formularului nostru este wpforms-form-170. Trebuie să copiați atributul ID. 
 
Acum editați confirmați-leaving.js fișier și adăugați atributul ID după #commentform.
 
Asigurați-vă că vă separați #commentform și ID-ul formei dvs. cu o virgulă. Va trebui, de asemenea, să adăugați # semnați ca prefix pentru atributul de identitate al formularului. 
 
Codul dvs. va arăta astfel:
 
 jQuery (document) .ready (functie ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm; mesaj personalizat aici retur "datele dvs. nesalvate vor fi pierdute"; $ ("# commentform, # wpforms-form-170") schimbare (function () needToConfirm = true; 
 
Salvați modificările și încărcați fișierul înapoi pe site-ul dvs. Web. 
 
Acum puteți introduce orice text în orice câmp al formularului dvs. de contact și apoi încercați să părăsiți pagina fără a trimite formularul. Va apărea un pop-up cu un avertisment că aveți modificări nesalvate. 
 
Puteți descărca plugin-ul de confirmare aici. Se vizează numai formularul de comentarii, dar nu ezitați să editați pluginul pentru a viza alte forme. 
 
Asta e tot, sperăm că acest articol v-a ajutat să arătați confirmarea pop-up-ului de navigare pentru formularele WordPress. S-ar putea să doriți să încercați, de asemenea, mâinile pe aceste 8 cele mai bune tutoriale jQuery pentru începători WordPress. 
 
Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.