Slik viser du Bekreft navigasjonsoppslag for skjemaer i WordPress

Uheldigvis å stenge en side uten å sende inn kommentaren din eller med et halvt fylt skjema er irriterende. Nylig spurte en av brukerne oss om det var mulig å vise leserne en bekreftelsesnavigasjons-popup? Disse små, små popup-varselbrukerne og forhindrer at de ved et uhell forlater halvfylt og ikke-sendt form. I denne artikkelen vil vi vise deg hvordan du viser bekreft navigasjonspopup for WordPress-skjemaer.

Hva er Bekreft Navigasjons-popup?

La oss anta at en bruker skriver en kommentar på bloggen din. De har allerede skrevet ganske mange linjer, men de blir distrahert og glemmer å sende inn kommentarer. Nå, hvis de lukket nettleseren din, vil kommentaren gå tapt.

Bekreft navigasjons popup gir dem en sjanse til å fullføre sin kommentar.

Du kan se denne funksjonen i handlingen på WordPress-postredigeringsskjermen. Hvis du har ubehandlede endringer, og du prøver å forlate siden eller lukke nettleseren, vil du se en advarselspopp.

La oss se hvordan vi kan legge til denne advarselsfunksjonen i WordPress-kommentarer og andre skjemaer på nettstedet ditt.

Vis Bekreft navigasjons-popup for Unsubmitted Forms i WordPress

For denne opplæringen vil vi skape et tilpasset plugin, men ikke bekymre deg, du kan også laste ned pluginet på slutten av denne opplæringen for å installere på nettstedet ditt.

For bedre forståelse av koden vil vi imidlertid be om at du prøver å lage ditt eget plugin. Du kan gjøre dette på en lokal installasjon eller et oppføringssted først.

La oss komme i gang.

Først må du opprette en ny mappe på datamaskinen din og gi den navnet bekrefte avgangs. Inne i mappen for å bekrefte, må du opprette en annen mappe og gi den navnet js.

Åpne nå et vanlig tekstredigeringsprogram som Notisblokk og opprett en ny fil. Innsiden, rett og slett lim inn følgende kode:

  
Denne php-funksjonen legger ganske enkelt til en JavaScript-fil til forsiden av nettstedet ditt. 
 
Gå videre og lagre denne filen som bekrefte-leaving.php inne i hovedbekreftelsesmappen. 
 
Nå må vi lage JavaScript-filen som dette pluginet laster inn. 
 
Opprett en ny fil og lim inn denne koden inne i den: 
 
 jQuery (dokument) .ready (funksjon ($) $ (dokument) .ready (funksjon () needToConfirm = false; window.onbeforeunload = askConfirm;); funksjon askConfirm () if (needToConfirm) // Sett inn egendefinert melding her returneres "Dine ubehandlede data vil gå tapt."; $ ("# commentform"). endre (funksjon () needToConfirm = true;);) 
 
Denne JavaScript-koden oppdager om brukeren har ikke lagrede endringer i kommentarformular. Hvis en bruker forsøker å navigere bort fra siden eller lukke vinduet, vil den vise en advarselspopp. 
 
Du må lagre denne filen som bekrefte-leaving.js inne i js-mappen. 
 
Når du har lagret begge filene, er dette hva mappestrukturen din skal se ut som: 
 
 
Nå må du koble til WordPress-siden din ved hjelp av en FTP-klient. Se vår veiledning om hvordan du bruker FTP til å laste opp WordPress-filer. 
 
Når du er tilkoblet, må du laste opp bekrefte avgangs mappe til / WP-innhold / plugg / mappe på nettstedet ditt. 
 
 
Deretter må du logge inn på WordPress admin-området og besøke Plugins-siden. Finn "Bekreft Leaving" -tillegget i listen over installerte plugins og klikk på "aktiver" -linken under det. 
 
 
Det er alt. Du kan nå besøke et innlegg på nettstedet ditt, skrive litt tekst i et hvilket som helst felt i kommentarskjemaet, og prøv å forlate siden uten å sende inn. En popup ville dukke opp, og advare deg om at du skal legge en side med ubehandlede endringer. 
 
 
Legge til advarselen til andre skjemaer i WordPress
 
Du kan bruke samme kodebase til å målrette mot noen former på WordPress-siden din. Her vil vi vise deg et eksempel på å bruke det til å målrette et kontaktskjema. 
 
I dette eksemplet bruker vi WPForms plugin for å lage et kontaktskjema. Instruksjonene vil være det samme hvis du bruker et annet kontaktskjema på nettstedet ditt. 
 
Gå til siden der du har lagt til kontaktskjemaet ditt. Ta musen over til det første feltet i kontaktskjemaet, høyreklikk, og velg deretter Inspiser fra nettlesermenyen. 
 
 
Finn linjen som starter med  stikkord. I skjemaetiketten finner du ID-attributtet. 
 
I dette eksemplet er vårt skjema ID wpforms-skjema-170. Du må kopiere ID-attributtet. 
 
Rediger nå bekrefte-leaving.js fil og legg til ID-attributtet etter #commentform.
 
Pass på at du skiller #commentform og skjemaets ID med komma. Du må også legge til # tegn som prefiks til skjemaets ID-attributt. 
 
Koden din vil nå se slik ut:
 
 jQuery (dokument) .ready (funksjon ($) $ (dokument) .ready (funksjon () needToConfirm = false; window.onbeforeunload = askConfirm;); funksjon askConfirm () if (needToConfirm) // Sett inn egendefinert melding her returneres "Dine ubehandlede data vil gå tapt."; $ ("# commentform, # wpforms-form-170"). endre (funksjon () needToConfirm = true;);) 
 
Lagre endringene dine og last opp filen til nettstedet ditt. 
 
Nå kan du legge inn noen tekst i et hvilket som helst felt i kontaktskjemaet ditt, og prøv å forlate siden uten å sende inn skjemaet. En popup vises med en advarsel om at du har ubehandlede endringer. 
 
Du kan laste ned pluginet for å bekrefte og forlate dette. Den er bare rettet mot kommentarformularen, men gjerne redigere pluginet for å målrette mot andre former. 
 
Det er alt, vi håper denne artikkelen hjalp deg med å vise bekreft navigasjons popup for WordPress skjemaer. Du vil kanskje også prøve hendene dine på disse 8 beste jQuery-opplæringene for WordPress-nybegynnere. 
 
Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.