Paano Ipakita ang Kumpirmahin ang Popup sa Pag-navigate para sa Mga Form sa WordPress

Ang aksidenteng pagsasara ng isang pahina nang hindi isinumite ang iyong komento o may isang kalahati na puno na form ay nakakainis. Kamakailan lamang, tinanong kami ng isa sa aming mga gumagamit kung posible na ipakita ang kanilang mga mambabasa ng isang kumpirmadong popup sa pag-navigate? Ang mga maliliit na maliliit na popup na alerto sa mga gumagamit at maiwasan ang mga ito mula sa aksidenteng pag-alis kalahati napuno at unsubmitted form. Sa artikulong ito, ipapakita namin sa iyo kung paano magpapakita ng pagkumpirma ng navigation popup para sa mga form sa WordPress.

Ano ang Kumpirmahing Nabigasyon Popup?

Let’s assume isang user ay nagsusulat ng komento sa iyong blog. Naitala na nila ang ilang mga linya, ngunit nakakakuha sila ng ginulo at nalimutan na magsumite ng komento. Ngayon kung isinara nila ang kanilang browser, ang komento ay mawawala.

Ang confirm popup nabigasyon ay nagbibigay sa kanila ng isang pagkakataon upang tapusin ang kanilang mga komento.

Makikita mo ang tampok na ito sa pagkilos sa screen ng editor ng WordPress post. Kung mayroon kang mga hindi nai-save na mga pagbabago, at sinubukan mong iwanan ang pahina o isara ang browser, pagkatapos ay makakakita ka ng babala na popup.

Tingnan natin kung paano namin maidaragdag ang tampok na babalang ito sa mga komento ng WordPress at iba pang mga form sa iyong site.

Ipakita ang Kumpirmadong pag-popup sa Pag-nabigasyon para sa Mga Form sa Unsubmit sa WordPress

Para sa tutorial na ito, gagawin namin ang isang pasadyang plugin, ngunit huwag mag-alala maaari mo ring i-download ang plugin sa dulo ng tutorial na ito upang i-install sa iyong website.

Gayunpaman, para sa mas mahusay na pag-unawa sa code, hihilingin namin na subukan mong lumikha ng iyong sariling plugin. Magagawa mo ito sa isang lokal na pag-install o isang pambungad na site muna.

Magsimula na tayo.

Una kailangan mong lumikha ng isang bagong folder sa iyong computer at pangalanan ito kumpirmahin-umaalis . Sa loob ng folder ng pagkumpirma-iwan, kailangan mong lumikha ng isa pang folder at pangalanan ito js.

Ngayon buksan ang isang plain text editor tulad ng Notepad at lumikha ng isang bagong file. Sa loob, i-paste lamang ang sumusunod na code:

Ang php function na ito ay nagdaragdag lamang ng JavaScript file sa front-end ng iyong website. 
Sige at i-save ang file na ito bilang confirm-leaving.php sa loob ng pangunahing kumpirmasyon-umaalis na folder. 
Ngayon kailangan naming lumikha ng JavaScript file na ang plugin na ito ay naglo-load. 
Lumikha ng isang bagong file at i-paste ang code na ito sa loob nito: 
jQuery (dokumento) .ready (function ($) {

 $ (document) .ready (function () {
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 });

 function askConfirm () {
     kung (needToConfirm) {
         // Ilagay ang iyong pasadyang mensahe dito
         ibalik "Ang iyong data na hindi ligtas ay mawawala.";
     }
 }
 
 $ ("# commentform"). change (function () {
     needToConfirm = true;
 });

  }) 
Nakita ng code ng JavaScript na ito kung ang gumagamit ay may mga hindi nai-save na pagbabago sa form ng komento.  Kung ang isang gumagamit ay sumusubok na mag-navigate mula sa pahina o isara ang window, ipapakita nito ang isang popup na babala. 
Kailangan mong i-save ang file na ito bilang confirm-leave.js sa loob ng js folder. 
Pagkatapos i-save ang parehong mga file, ito ang magiging hitsura ng iyong folder na istraktura: 

Ngayon ay kailangan mong kumonekta sa iyong WordPress site gamit ang isang FTP client. 
Kapag nakakonekta, kailangan mong mag-upload kumpirmahin-umaalis folder sa / wp-contents / plugins / folder sa iyong website. 

Pagkatapos nito, kailangan mong mag-login sa WordPress admin area at bisitahin ang pahina ng Mga Plugin.  Hanapin ang plugin na 'Kumpirmahin ang Pag-iwan' sa listahan ng mga naka-install na plugin at mag-click sa 'activate' na link sa ibaba nito. 

Iyon lang.  Maaari mo na ngayong bisitahin ang anumang post sa iyong website, magsulat ng ilang teksto sa anumang larangan ng form ng komento at pagkatapos ay subukan ang pag-alis sa pahina nang hindi nagsumite.  Ang isang popup ay lilitaw, nagbabala sa iyo na babalik ka sa isang pahina na may mga hindi nai-save na pagbabago. 

Pagdaragdag ng Babala sa Ibang Mga Form sa WordPress 
Maaari mong gamitin ang parehong base ng code upang i-target ang anumang mga form sa iyong WordPress site.  Narito kami ay magpapakita sa iyo ng isang halimbawa ng paggamit nito upang i-target ang isang contact form. 
Sa halimbawang ito, ginagamit namin ang WPForms plugin upang lumikha ng isang contact form.  Ang mga tagubilin ay magkapareho kung gumagamit ka ng ibang contact form plugin sa iyong website. 
Pumunta sa pahina kung saan mo idinagdag ang iyong contact form.  Dalhin ang mouse sa unang field sa iyong contact form, i-right click, at pagkatapos ay piliin ang Inspect mula sa menu ng browser. 

Hanapin ang linya na nagsisimula sa 

tag.  Sa tag na form, makikita mo ang ID na katangian. 
Sa halimbawang ito, ang ID ng aming form ay wpforms-form-170 .  Kailangan mong kopyahin ang katangian ng ID. 
Ngayon, i-edit ang confirm-leave.js file at idagdag ang attribute ng ID pagkatapos #commentform . 
Tiyaking nakahiwalay ka #commentform at ID ng iyong form na may kuwit.  Kakailanganin mo ring idagdag # sign bilang prefix sa attribute ID ng iyong form. 
Makikita ngayon ang iyong code: 
jQuery (dokumento) .ready (function ($) {

 $ (document) .ready (function () {
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 });

 function askConfirm () {
     kung (needToConfirm) {
         // Ilagay ang iyong pasadyang mensahe dito
         ibalik "Ang iyong data na hindi ligtas ay mawawala.";
     }
 }

 $ ("# commentform, # wpforms-form-170"). pagbabago (function () {
     needToConfirm = true;
 });

  }) 
I-save ang iyong mga pagbabago at i-upload ang file pabalik sa iyong website. 
Ngayon ay maaari kang magpasok ng anumang teksto sa anumang larangan ng iyong contact form at pagkatapos ay subukan upang iwanan ang pahina nang hindi isumite ang form.  Lilitaw ang popup na may babala na mayroon kang mga hindi nai-save na pagbabago. 
Maaari mong i-download ang confirm-leaving plugin dito.  Tinatarget lamang nito ang form ng komento, ngunit huwag mag-atubiling i-edit ang plugin upang ma-target ang iba pang mga form. 
Iyon lang, inaasahan naming nakatulong ang artikulong ito na ipakita sa iyo ang pagkumpirma ng popup sa pag-navigate para sa mga form sa WordPress.  Maaari mo ring nais na subukan ang iyong mga kamay sa mga 8 pinakamahusay na jQuery tutorial para sa mga nagsisimula WordPress.