Per ongeluk een pagina sluiten zonder uw halfgevulde formulier in te dienen, is vervelend. Onlangs vroeg een van onze gebruikers ons of het mogelijk was om een ​​pop-upvenster weer te geven dat gebruikersactie op formulieren bevestigt. Deze kleine waarschuwing gebruikers en voorkomt dat ze per ongeluk pagina's sluiten met halfgevulde formulieren.

In deze zelfstudie laten we u zien hoe u een bevestigingsvenster voor het sluiten van een actie weergeeft voor uw formulieren. WordPress blog.

Wat is een pop-up met browserbevestiging?

Stel dat een gebruiker een opmerking op uw blog schrijft. hij heeft al een flink aantal regels geschreven, maar ze worden afgeleid en vergeten de opmerking in te dienen. Door nu bijvoorbeeld op een link te klikken, gaat alle inhoud die hij is gaan schrijven verloren.

De browse-bevestiging geeft hen de kans om hun opmerking te voltooien.

U kunt deze functie zien vanuit de artikel- / pagina-editorinterface. Als u niet-opgeslagen wijzigingen heeft en u probeert de pagina te verlaten of de browser te sluiten, ziet u een pop-upwaarschuwing.

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

Hoe u een bevestigingspop-up weergeeft op niet-ingediende formulieren in WordPress

Voor deze handleiding zullen we maak een aangepaste plug-in. We hebben u al laten zien hoe u een WordPress Plugin snel.

Laten we beginnen.

Eerst moet u een nieuwe map op uw computer aanmaken en deze "confirm-action" noemen. In deze map moet u een andere map maken en deze js noemen.

Open nu een teksteditor zoals Kladblok en maak een nieuw bestand. Plak binnenin gewoon de volgende code:

<?php
/**
 * Bevestig actie
 * Plug-innaam: actie bevestigen
 * Plug-in-URI: https://blogpascher.com
 * Beschrijving: deze plug-in toont een waarschuwing aan gebruikers wanneer ze vergeten op de verzendknop op een reactieformulier te klikken.
 * Versie: 1.0.0
 * Auteur: JouwNAAM
 * Auteur-URI: https://blogpascher.com
 * Licentie: GPL-2.0+
 * Licentie-URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
functie bpc_confirm_leaving_js() {

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

Deze php-functie voegt eenvoudig een javascript-bestand toe aan de voorkant van uw website.

Ga je gang en sla dit bestand op als "confirm-action.php" in de map bevestigen actie "(Root van uw plug-in).

Nu moeten we het JavaScript-bestand maken dat deze plug-in zal laden. Maak een nieuw bestand en plak deze code erin:

jQuery (document) .ready (functie ($) {$ (document) .ready (functie () {needToConfirm = false; window.onbeforeunload = askConfirm;}) functie askConfirm () () () () () () () () () Dit is het standaardbericht voor de gebruiker.

Hernoem dit bestand bevestigen-leaving.js", Verplaats het naar de" submap " js "Of" bevestigen actie".

Deze JavaScript-code detecteert of de gebruiker niet-opgeslagen wijzigingen in het opmerkingenformulier heeft. Als de gebruiker de pagina probeert te verlaten, wordt er een pop-upwaarschuwing weergegeven.

Het enige dat u nu hoeft te doen, is uw bestand met uw client naar uw server te uploaden FTP favorieten. Daarna hoef je alleen nog maar de plug-in te activeren vanaf je dashboard.

Dat is alles. U kunt nu een artikel op uw website bezoeken, proberen een opmerking te schrijven en vervolgens op een link klikken, u zult een pop-up zien die lijkt op deze.

Toevoeging van de waarschuwing op andere WordPress-formulieren

U kunt dezelfde code gebruiken om alle formulieren op uw WordPress-site te targeten. Hier laten we u een voorbeeld zien op a Contact formulier.

In dit voorbeeld gebruiken we de plug-in WPForms een maken Contact formulier. De instructies zijn hetzelfde als u een andere gebruikt plugin voor contactformulier op uw site.

Ga naar de pagina waar u uw heeft toegevoegd Contact formulier. Beweeg de muis over het eerste veld in uw contactformulier, klik met de rechtermuisknop en selecteer vervolgens “ inspecteren“, Om toegang te krijgen tot de broncode.

Zoek de lijn die begint met de tag <form>. In de formulier-tag vind je het ID-attribuut. In dit voorbeeld is de ID van ons formulier formulaire . U moet het ID-kenmerk kopiëren.

Bewerk nu de confirmer-leaving.js bestand en voeg het ID-kenmerk toe na ' #commentform Gescheiden door een komma.

Uw code zou er zo uit moeten zien:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); functie askConfirm () {if (needToConfirm) {// Zet uw aangepaste () functie () (needToConfirm = true;});})

Sla uw wijzigingen op en installeer je plugin op je WordPress blog.

Dat is het voor deze tutorial. Ik hoop dat het je helpt om een ​​pop-up bevestigingsvenster aan je blog toe te voegen. Aarzel niet om vragen te stellen als u een punt niet begrijpt.