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

4 min


122

Laat, E.W.M. de (Erwin)

all rights reserved

DeLaatbusiness

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

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.

Bevestig de pop-up van de navigatie wanneer de gebruiker een formulier onaangekondigd achterlaat

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.

Niet-opgeslagen pop-up met wijzigingen in de WordPress-berichteditor

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 confirm-leaving. 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. Binnenin plakt u gewoon de volgende code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?php

/**

 * Confirm Leaving

 * Plugin Name: Confirm Leaving

 * Plugin URI:  https://www.wpbeginner.com

 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.

 * Version:     1.0.0

 * Author:      WPBeginner

 * Author URI:  https://www.wpbeginner.com

 * License:     GPL-2.0+

 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt

 */

  

function wpb_confirm_leaving_js() {

 

     wp_enqueue_script( ‘Confirm Leaving’, plugins_url( ‘js/confirm-leaving.js’, __FILE__ ), array(‘jquery’), ‘1.0.0’, true );

}

add_action(‘wp_enqueue_scripts’, ‘wpb_confirm_leaving_js’);

Deze php-functie voegt gewoon een JavaScript-bestand toe aan de voorkant van uw website.

Ga je gang en sla dit bestand op als confirm-leaving.phpin de hoofdmap voor bevestigen en verlaten.

Nu moeten we het JavaScript-bestand maken dat deze plug-in laadt.

Maak een nieuw bestand en plak deze code erin:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

jQuery(document).ready(function($) {

 

$(document).ready(function() {

    needToConfirm = false;

    window.onbeforeunload = askConfirm;

});

 

function askConfirm() {

    if (needToConfirm) {

        // Put your custom message here

        return “Your unsaved data will be lost.”;

    }

}

  

$(“#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 confirm-leaving.jsin de map js.

Nadat u beide bestanden hebt opgeslagen, ziet uw mappenstructuur er als volgt uit:

Plugin bestandstructuur

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 de confirm-leavingmap uploaden naar de /wp-contents/plugins/map op uw website.

Plugin-bestanden uploaden naar uw WordPress-site

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.

Activeer plugin

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.

pop-upmelding waarschuwing gebruiker over niet-opgeslagen wijzigingen

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.

ID van formulier zoeken

Zoek de regel die begint met de <form>tag. 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 het confirm-leaving.jsbestand en voeg daarna het ID-kenmerk toe #commentform.

Zorg ervoor dat u #commentformde ID van uw formulier scheidt met een komma. U moet ook een #teken als voorvoegsel toevoegen aan het ID-kenmerk van uw formulier.

Uw code ziet er nu als volgt uit:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

jQuery(document).ready(function($) {

 

$(document).ready(function() {

    needToConfirm = false;

    window.onbeforeunload = askConfirm;

});

 

function askConfirm() {

    if (needToConfirm) {

        // Put your custom message here

        return “Your unsaved data will be lost.”;

    }

}

 

$(“#commentform,#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 .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format