Hoe bevestig je de navigatie pop-up voor formulieren in WordPress

Per ongeluk een pagina sluiten zonder uw commentaar in te dienen of met een halfgevuld formulier is vervelend. Onlangs vroeg een van onze gebruikers ons of het mogelijk was om hun lezers een bevestigde navigatie-popup te laten zien? Dit piepkleine pop-upvenster waarschuwt gebruikers en voorkomt dat ze per ongeluk een halfgevulde en niet-ingeleverde vorm achterlaten. In dit artikel laten we u zien hoe u de pop-upbevestiging voor WordPress-formulieren kunt tonen.

Wat is de navigatiebevestiging bevestigen??

Stel dat een gebruiker een reactie op je blog schrijft. Ze hebben al behoorlijk wat regels geschreven, maar ze worden afgeleid en vergeten commentaar in te dienen. Als ze nu hun browser hebben gesloten, is de opmerking verloren.

De pop-upbevestiging geeft hen de kans hun opmerking af te ronden.

Je kunt deze functie in actie zien in het WordPress berichtbewerkingsscherm. Als u niet-opgeslagen wijzigingen heeft en u probeert de pagina te verlaten of de browser te sluiten, ziet u een pop-up met waarschuwingen.

Laten we eens kijken hoe we deze waarschuwingsfunctie kunnen toevoegen aan WordPress-opmerkingen en andere formulieren op uw site.

Toon Confirm Navigation popup voor Unsubmitted Forms in WordPress

Voor deze tutorial zullen we een aangepaste plug-in maken, maar maak je geen zorgen, je kunt ook de plug-in downloaden aan het einde van deze tutorial om op je website te installeren..

Voor een beter begrip van de code, zullen we u echter vragen om uw eigen plug-in te maken. U kunt dit eerst doen op een lokale installatie of een staging-site.

Laten we beginnen.

Eerst moet je een nieuwe map op je computer maken en deze een naam geven bevestigen-het verlaten. In de map voor het verwijderen van bevestigingen moet je een andere map maken en hem een ​​naam geven.

Open nu een gewone teksteditor zoals Notepad en maak een nieuw bestand aan. Vul binnen gewoon de volgende code in:

  
Deze php-functie voegt gewoon een JavaScript-bestand toe aan de voorkant van uw website. 
 
Ga je gang en bewaar dit bestand als bevestigen-leaving.php in de hoofdmap voor bevestigen van het verlaten van de map. 
 
Nu moeten we het JavaScript-bestand maken dat deze plug-in laadt. 
 
Maak een nieuw bestand en plak deze code erin: 
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Zet uw aangepast bericht hier retour "Uw niet-opgeslagen gegevens gaan verloren."; $ ("# commentform"). change (function () needToConfirm = true;);) 
 
Deze JavaScript-code detecteert of de gebruiker niet-opgeslagen wijzigingen in het reactieformulier heeft. Als een gebruiker probeert weg te navigeren van de pagina of het venster te sluiten, verschijnt er een pop-up met een waarschuwing. 
 
U moet dit bestand opslaan als bevestigen-leaving.js in de map js. 
 
Nadat u beide bestanden hebt opgeslagen, ziet uw mappenstructuur er als volgt uit: 
 
 
Nu moet u verbinding maken met uw WordPress-site met behulp van een FTP-client. Raadpleeg onze handleiding over het gebruik van FTP om WordPress-bestanden te uploaden. 
 
Nadat u bent verbonden, moet u uploaden bevestigen-het verlaten map naar / Wp-contents / plugins / map op uw website. 
 
 
Hierna moet je inloggen op het WordPress-beheergebied en de pagina Plug-ins bezoeken. Zoek de plug-in 'Bevestig Leaving' in de lijst met geïnstalleerde plug-ins en klik op 'activeer' link eronder. 
 
 
Dat is alles. U kunt nu elk bericht op uw website bezoeken, tekst in elk veld van het reactieformulier schrijven en vervolgens de pagina verlaten zonder deze in te dienen. Er verschijnt een pop-up die u waarschuwt dat u op het punt staat een pagina met niet-opgeslagen wijzigingen te verlaten. 
 
 
De waarschuwing toevoegen aan andere formulieren in WordPress
 
U kunt dezelfde codebasis gebruiken om formulieren op uw WordPress-site te targeten. Hier zullen we u een voorbeeld laten zien van het gebruik ervan om een ​​contactformulier te targeten. 
 
In dit voorbeeld gebruiken we de plug-in WPForms om een ​​contactformulier te maken. De instructies zijn hetzelfde als u een andere plug-in voor contactformulieren op uw website gebruikt. 
 
Ga naar de pagina waar je je contactformulier hebt toegevoegd. Ga met de muis naar het eerste veld in uw contactformulier, klik met de rechtermuisknop en selecteer vervolgens Inspecteren in het browsermenu. 
 
 
Zoek de regel die begint met de  label. In de formuletag vindt u het ID-kenmerk. 
 
In dit voorbeeld is de ID van ons formulier wpforms-form-170. U moet het ID-kenmerk kopiëren. 
 
Bewerk nu de bevestigen-leaving.js bestand en voeg daarna het ID-kenmerk toe #commentform.
 
Zorg ervoor dat je scheidt #commentform en de ID van uw formulier met een komma. Je moet ook toevoegen # teken als voorvoegsel aan het ID-kenmerk van uw formulier. 
 
Uw code ziet er nu als volgt uit:
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Zet uw aangepast bericht hier terug "Uw niet-opgeslagen gegevens zullen verloren gaan."; $ ("# commentaarformulier, # wpforms-form-170"). change (function () needToConfirm = true;);) 
 
Sla uw wijzigingen op en upload het bestand naar uw website. 
 
Nu kunt u elke tekst in elk veld van uw contactformulier invoeren en vervolgens proberen de pagina te verlaten zonder het formulier in te dienen. Er verschijnt een pop-up met een waarschuwing dat er niet-opgeslagen wijzigingen zijn. 
 
Je kunt de plug-in-plug-in hier downloaden. Het richt zich alleen op het reactieformulier, maar u kunt de plug-in bewerken om andere formulieren te targeten. 
 
Dat is alles, we hopen dat dit artikel u heeft geholpen om de navigatiepop-up voor WordPress-formulieren te bevestigen. Misschien wil je ook deze 8 beste jQuery-tutorials voor WordPress-beginners eens proberen. 
 
Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.