Cum să afișați un popup de confirmare a navigării pentru formulare în WordPress

Nu există nimic mai frustrant decât să completezi un formular WordPress, doar pentru a apăsa din greșeală butonul înapoi și a pierde totul. Cu toții am trecut prin asta – și de obicei este suficient pentru a face pe cineva să renunțe imediat.

Pentru proprietarii de site-uri, acest mic obstacol poate însemna pierderi de vânzări și mai puține înscrieri. Vizitatorii vor pleca iritați și sunt mult mai puțin probabil să revină și să încerce din nou.

Vestea bună? Există o soluție simplă: un popup de confirmare a navigării. Acest avertisment simplu oferă utilizatorilor o a doua șansă înainte de a părăsi o pagină cu un formular nesupus.

În acest ghid, vă vom arăta cum să adăugați această funcționalitate la formularele dvs. WordPress, astfel încât să puteți crea o experiență mai fluidă și să creșteți ratele de completare a formularelor.

Ce este un Popup de Confirmare a Navigării și de ce aveți nevoie de el?

Un popup de confirmare a navigării este un avertisment al browserului care apare atunci când un utilizator cu modificări nesalvate într-un formular încearcă să părăsească o pagină web.

Probabil ați văzut această funcționalitate în acțiune pe ecranul editorului de conținut WordPress. Dacă aveți modificări nesalvate și încercați să părăsiți pagina, apare un popup de avertizare pentru a vă împiedica să vă pierdeți munca.

Adăugarea acestui lucru la propriile formulare este o mică schimbare cu beneficii mari:

• Îmbunătățește experiența utilizatorului: Salvează vizitatorii de la frustrarea pierderii accidentale a progresului, arătând că le prețuiești timpul.
• Crește ratele de conversie: Prin prevenirea abandonării accidentale, oferiți utilizatorilor o a doua șansă de a completa formularul, ceea ce poate crește numărul de lead-uri.
• Construiește încrederea utilizatorilor: O funcționalitate atentă ca aceasta demonstrează profesionalism și grijă, ceea ce poate ajuta la construirea loialității și la încurajarea vizitelor repetate.

Având în vedere acest lucru, să adăugăm acest avertisment la comentariile dvs. WordPress și la alte formulare de pe site-ul dvs.

Iată tot ce vom acoperi în acest ghid:

• Metoda 1: Afișarea popup-ului de confirmare a navigării pentru formularele nesupuse în WordPress
• Metoda 2: Adăugarea popup-ului de avertizare la alte formulare de pe site-ul dvs. WordPress
• Bonus: Îmbunătățiți performanța formularelor WordPress
• Întrebări frecvente despre popup-urile de confirmare a navigării
• Ghiduri suplimentare pentru utilizarea formularelor WordPress

Gata? Să începem.

Metoda 1: Afișarea popup-ului de confirmare a navigării pentru formularele nesupuse în WordPress

Această metodă implică crearea unui plugin simplu, personalizat.

Nu-ți face griji dacă nu ai mai programat niciodată! Te vom ghida prin fiecare pas al procesului și este o modalitate excelentă de a vedea cum funcționează pluginurile WordPress.

În plus, puteți descărca pluginul la sfârșitul acestui tutorial pentru a-l instala pe site-ul dvs.

Cu toate acestea, recomandăm cu tărie să creați pluginul singur pentru a înțelege mai bine cum funcționează codul. Puteți urmări pe o instalație locală sau site de staging mai întâi.

Mai întâi, trebuie să creați un folder nou pe computer și să îl numiți confirm-leaving. În interiorul folderului confirm-leaving, veți crea un alt folder și îl veți numi js.

Acum, să deschidem un editor de text simplu, cum ar fi Notepad, și să creăm un fișier nou. În interior, pur și simplu lipiți următorul cod:

<?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
		
		

Această funcție PHP folosește wp_enqueue_script, care este metoda oficială WordPress pentru adăugarea de JavaScript. Aceasta este cea mai bună practică, deoarece ajută la prevenirea conflictelor de script cu alte plugin-uri.

Acum, salvați acest fișier ca confirm-leaving.php în interiorul folderului principal confirm-leaving.

Acum, trebuie să creăm fișierul JavaScript pe care acest plugin îl încarcă. Puteți face acest lucru creând un fișier nou în editorul dvs. de text și lipind acest cod în el:

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
		
		

Acest JavaScript detectează dacă un utilizator a început să completeze formularul de comentarii. Dacă încearcă să părăsească pagina înainte de a trimite, declanșează popup-ul de avertizare.

Continuați și salvați acest fișier ca confirm-leaving.js în interiorul folderului js pe care l-ați creat anterior.

După salvarea ambelor fișiere, structura folderului dvs. ar trebui să arate astfel:

Acum, trebuie să vă conectați la site-ul dvs. WordPress folosind un client FTP. Pentru instrucțiuni pas cu pas, puteți consulta ghidul nostru despre cum să folosești FTP pentru a încărca fișiere pe WordPress.

Odată conectat, va trebui să încărcați folderul confirm-leaving în folderul/wp-contents/plugins/ de pe site-ul dvs.

După aceea, vei dori să te conectezi la zona de administrare WordPress și să accesezi „Pluginuri”.

De aici, ar trebui să vedeți pluginul „Confirm Leaving” în lista de pluginuri instalate. Puteți apoi să faceți clic pe linkul „activate” de sub el.

Gata. Acum puteți vizita orice articol de pe site-ul dvs., să tastați ceva în formularul de comentarii și apoi să încercați să părăsiți pagina.

Apoi, va apărea o fereastră pop-up, avertizându-vă că aveți modificări nesalvate.

Din motive de securitate, browserele web moderne vor afișa propriul mesaj de avertizare generic (cum ar fi „Părăsiți site-ul? Modificările pe care le-ați făcut s-ar putea să nu fie salvate.”) în loc de textul personalizat din cod. Scopul codului este pur și simplu de a declanșa acest prompt standard al browserului.

Metoda 2: Adăugarea popup-ului de avertizare la alte formulare de pe site-ul dvs. WordPress

Puteți utiliza același cod pentru a viza orice alt formular de pe site-ul dvs. WordPress, cum ar fi un formular de contact.

În acest exemplu, vizăm un formular creat cu pluginul WPForms, dar acești pași vor funcționa dacă utilizați un alt plugin de formulare de contact pe site-ul dvs.

Nu aveți un formular de contact și doriți să creați unul? Atunci puteți consulta ghidul nostru despre cum să creați un formular de contact.

La WPBeginner, folosim WPForms pentru a încorpora multe formulare diferite, inclusiv formularul nostru de contact, sondajul anual al cititorilor și cererile de migrare. Dacă sunteți curios despre instrument și ce poate face, puteți accesa recenzia noastră completă despre WPForms.

Primul lucru de făcut este să mergi la pagina unde ai încorporat formularul de contact.

Apoi, veți muta mouse-ul peste primul câmp din formularul de contact, veți da clic dreapta și apoi veți selecta „Inspect” din meniul browserului.

De aici, veți dori să localizați linia care începe cu tag-ul <form> pentru a găsi atributul ID. În acest exemplu, ID-ul formularului nostru este wpforms-form-170.

Odată ce ați găsit eticheta, copiați atributul ID.

Acum, deschideți fișierul dvs. confirm-leaving.js pentru a edita selectorul jQuery. Va trebui să adăugați ID-ul formularului dvs. chiar după #commentform, separat printr-o virgulă. Asigurați-vă că adăugați un prefix # la noul dvs. ID, la fel cum are formularul de comentarii.

Codul dvs. va arăta acum astfel:

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
		
		

Dacă totul arată bine, puteți salva modificările în fișierul confirm-leaving.js și îl puteți încărca înapoi pe server, suprascriind fișierul vechi.

Acum, puteți introduce orice text în orice câmp al formularului de contact și apoi încercați să părăsiți pagina fără a trimite formularul. Va apărea un popup cu un avertisment că aveți modificări nesalvate.

📥 Descărcare plugin: Puteți descărca pluginul confirm-leaving aici, apoi instalați și activați pluginul ca de obicei. Dacă aveți nevoie de ajutor, puteți consulta ghidul nostru despre cum să instalați un plugin WordPress.

Rețineți că vizează formularul de comentarii, dar puteți edita pluginul pentru a viza formularul dvs. de înregistrare a utilizatorilor, sondaje, formular de feedback, formular de candidatură pentru un loc de muncă sau orice alte formulare.

Bonus: Îmbunătățiți performanța formularelor WordPress

După ce adăugați popup-ul de confirmare a navigării, este o idee bună să urmăriți cât de des utilizatorii își abandonează formularele. Cunoașterea acestor date vă poate ajuta să găsiți și să remediați problemele care îi determină pe oameni să plece.

Unul dintre cele mai bune instrumente pentru urmărirea abandonării formularelor este MonsterInsights. Este cel mai bun plugin Google Analytics pentru WordPress. Addon-ul său Forms (disponibil în versiunea Pro) face ușoară urmărirea automată a vizualizărilor și a trimiterilor de formulare.

Astfel, puteți vedea cum interacționează utilizatorii cu formularele dvs. direct din tabloul de bord.

La WPBeginner, folosim MonsterInsights pentru a urmări toate conversiile noastre importante, inclusiv formulare, butoane și linkuri de afiliere. Consultați recenzia completă MonsterInsights pentru a afla despre toate funcționalitățile sale.

Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să urmăriți și să reduceți abandonul formularelor.

Puteți, de asemenea, să efectuați teste A/B pentru a vedea ce versiune a formularului dvs. funcționează mai bine. De exemplu, ați putea testa diferite stiluri de formular sau texte ale butoanelor pentru a vedea ce încurajează mai multe completări.

De exemplu, ați putea schimba formularea pop-up-ului de confirmare a navigării sau personaliza formularul. Analizând rezultatele, puteți determina ce îi menține pe utilizatori implicați și ajută la reducerea ratelor de abandon.

Thrive Optimize este cel mai bun plugin pentru această sarcină. Vă permite să efectuați teste A/B split ușor, fără nicio codare.

Pentru a afla mai multe, consultați ghidul nostru despre cum să faceți testarea A/B split în WordPress.

Întrebări frecvente despre popup-urile de confirmare a navigării

Adăugarea acestui cod va încetini site-ul meu?

Nu, deloc. Codul JavaScript este foarte ușor și rulează doar atunci când un utilizator încearcă să părăsească o pagină cu un formular modificat. Nu va avea niciun impact notabil asupra performanței site-ului dvs.

Pot schimba mesajul din popup-ul de confirmare?

Din păcate, nu. Din motive de securitate, browserele moderne nu mai permit site-urilor web să afișeze un mesaj personalizat în fereastra pop-up de confirmare. Acestea vor afișa întotdeauna un avertisment generic, standard, utilizatorului.

Acest popup de confirmare funcționează pe browserele mobile?

Da, evenimentul onbeforeunload este suportat de majoritatea browserelor mobile moderne, inclusiv Chrome și Safari pe Android și iOS. Comportamentul va fi același ca pe desktop.

Ghiduri suplimentare pentru utilizarea formularelor WordPress

Sperăm că acest articol v-a ajutat să afișați popup-ul de confirmare a navigării pentru formularele dvs. WordPress.

De asemenea, ați putea dori să consultați aceste alte ghiduri și recomandări ale experților:

• Cum să creați un formular de contact cu mai mulți destinatari
• Cum să trimiți e-mailuri de confirmare după trimiterea formularelor WordPress
• Modalități de a utiliza logica condițională în formularele dvs. WordPress
• Cele mai bune constructoare de formulare online (alegeri ale experților)
• Ghidul complet pentru utilizarea formularelor WordPress

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.