Å lukke en side ved et uhell uten å sende inn det halvfylte skjemaet er irriterende. Nylig spurte en av brukerne oss om det var mulig å vise et popup-vindu som bekrefter brukerhandling på skjemaer? Denne lille, små varslingsbrukerne og forhindrer dem i å tilfeldigvis lukke sider med halvfylte skjemaer.

I denne opplæringen vil vi vise deg hvordan du viser et lukket handlingsbekreftelsesvindu for skjemaene dine. WordPress blog.

Hva er en popup for surfingbekreftelse?

Anta at en bruker skriver en kommentar på bloggen din. han har allerede skrevet mange linjer, men de blir distrahert og glemmer å sende inn kommentaren. Nå, ved å klikke på en lenke for eksempel, vil alt innholdet han har begynt å skrive gå tapt.

Nettbekreftelsen gir dem en sjanse til å fullføre kommentaren.

Du kan se denne funksjonen fra artikkel / side editor-grensesnittet. Hvis du har endringer som ikke er lagret, og prøver å avslutte siden eller lukke nettleseren, vil du se en popup-advarsel.

La oss se hvordan vi kan legge til denne advarselfunksjonen på WordPress-kommentarer og andre skjemaer på bloggen din.

Hvordan vise en bekreftelses popup på ikke-innsendte skjemaer i WordPress

For denne opplæringen, vil vi opprette en tilpasset plugin. Vi har allerede vist deg hvordan du lager en WordPress Plugin raskt.

La oss begynne.

Først må du opprette en ny mappe på datamaskinen din og gi den navnet "bekreft-handling". I denne mappen må du opprette en annen mappe og gi den navnet js.

Åpne nå en tekstredigerer som Notisblokk og opprett en ny fil. Inne er det bare å lime inn følgende kode:

<?php
/**
 * Bekreft handling
 * Pluginnavn: Bekreft handling
 * Plugin-URI: https://blogpascher.com
 * Beskrivelse: Denne plugin-en viser en advarsel til brukere når de prøver de glemmer å trykke på send-knappen på et kommentarskjema.
 * Versjon: 1.0.0
 * Forfatter: YourNAME
 * Forfatter-URI: https://blogpascher.com
 * Lisens: GPL-2.0+
 * Lisens-URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
funksjon bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Bekreft å forlate', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Denne php-funksjonen legger ganske enkelt til en JavaScript-fil på forsiden av nettstedet ditt.

Fortsett og lagre denne filen som "bekreft-handling.php" i mappen bekrefte handlingen "(Root of plugin).

Nå må vi opprette JavaScript-filen som dette pluginet vil laste inn. Opprett en ny fil og lim denne koden inn:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funksjon askConfirm () {if (needToConfirm) {// Sett definert melding her tilbake "Dine ulagrede data går tapt.";}} $ ( "# CommentForm") utveksling (function () {needToConfirm = true;}).})

Gi denne filen nytt navn bekrefte-leaving.js", Flytt den til" undermappen " js "Av" bekrefte handlingen".

Denne JavaScript-koden oppdager om brukeren har ikke lagrede endringer i kommentarskjemaet. Hvis brukeren prøver å gå ut av siden, vil de vise en popup-advarsel.

Alt du trenger å gjøre nå er å laste opp filen din til serveren din ved hjelp av klienten FTP favoritter. Etter det er alt du trenger å gjøre å aktivere plugin fra dashbordet.

Det er alt. Du kan nå besøke en artikkel på nettstedet ditt, prøve å skrive en kommentar og deretter klikke på en lenke, du vil legge merke til en popup som ligner på denne.

Tillegg av advarselen på andre WordPress-skjemaer

Du kan bruke den samme koden for å målrette mot alle skjemaer på WordPress-nettstedet ditt. Her vil vi vise deg et eksempel på en Kontaktskjema.

I dette eksemplet bruker vi plugin WPForms å lage en Kontaktskjema. Instruksjonene vil være de samme hvis du bruker en annen kontaktskjema plugin på nettstedet ditt.

Gå til siden der du la til Kontaktskjema. Flytt musen over det første feltet i kontaktskjemaet ditt, høyreklikk og velg " inspisere“, For å få tilgang til kildekoden.

Finn linjen som begynner med tag <form>. I skjemaet finner du ID-attributtet. I dette eksemplet er ID-en for skjemaet vårt formulaire . Du må kopiere ID-attributtet.

Nå rediger du confirmer-leaving.js fil og legg til ID-attributtet etter " #commentform Separert med komma.

Koden din skal se slik ut:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funksjon askConfirm () {if (needToConfirm) {// Sett definert melding her tilbake "Dine ulagrede data går tapt.";}} $ ( "# CommentForm, skjema #") utveksling (function () {needToConfirm = true;}).})

Lagre endringene og installere plugin på din WordPress blog.

Det er det for denne opplæringen. Håper det hjelper deg å legge til popup-bekreftelsesvindu til bloggen din. Ikke nøl med å stille spørsmål hvis du ikke forstår et poeng.