Comment afficher la fenêtre contextuelle de navigation de confirmation pour les formulaires dans WordPress

Fermer une page par inadvertance sans envoyer votre commentaire ou avec un formulaire à moitié rempli est agaçant. Récemment, un de nos utilisateurs nous a demandé s’il était possible de montrer à ses lecteurs un menu contextuel de navigation de confirmation. Cette petite fenêtre contextuelle alerte les utilisateurs et les empêche de laisser accidentellement un formulaire à moitié rempli et non soumis. Dans cet article, nous allons vous montrer comment afficher une fenêtre contextuelle de navigation de confirmation pour les formulaires WordPress..

Qu'est-ce que Confirmer la navigation Popup?

Supposons qu'un utilisateur rédige un commentaire sur votre blog. Ils ont déjà écrit pas mal de lignes, mais ils sont distraits et oublient de soumettre leurs commentaires. Maintenant, s'ils ont fermé leur navigateur, le commentaire sera perdu.

La fenêtre de confirmation de navigation leur donne une chance de finir leur commentaire.

Vous pouvez voir cette fonctionnalité en action dans l'écran de l'éditeur de publications WordPress. Si vous avez des modifications non enregistrées et que vous essayez de quitter la page ou de fermer le navigateur, un message d'avertissement apparaît..

Voyons comment nous pouvons ajouter cette fonctionnalité d'avertissement aux commentaires WordPress et aux autres formulaires de votre site..

Afficher la fenêtre de confirmation de navigation pour les formulaires non soumis dans WordPress

Pour ce tutoriel, nous allons créer un plugin personnalisé, mais ne vous inquiétez pas, vous pouvez également télécharger le plugin à la fin de ce tutoriel pour l'installer sur votre site web..

Cependant, pour une meilleure compréhension du code, nous vous demanderons de créer votre propre plugin. Vous pouvez le faire d'abord sur une installation locale ou sur un site intermédiaire..

Commençons.

Vous devez d’abord créer un nouveau dossier sur votre ordinateur et le nommer. confirmer-partir. Dans le dossier de confirmation de départ, vous devez créer un autre dossier et nommez-le js..

Ouvrez maintenant un éditeur de texte brut tel que le Bloc-notes et créez un nouveau fichier. A l'intérieur, collez simplement le code suivant:

  
Cette fonction php ajoute simplement un fichier JavaScript au front-end de votre site web. 
 
Allez-y et enregistrez ce fichier sous confirmer-partir.php dans le dossier principal de confirmation-départ. 
 
Maintenant, nous devons créer le fichier JavaScript que ce plugin est en train de charger.. 
 
Créez un nouveau fichier et collez ce code à l'intérieur: 
 
 jQuery (document) .ready (fonction ($) $ (document) .ready (fonction () needToConfirm = false; window.onbeforeunload = askConfirm;); fonction askConfirm () if (needToConfirm) // Mettez votre message personnalisé ici renvoie "Vos données non sauvegardées seront perdues."; $ ("# commentform"). change (function () needToConfirm = true;);) 
 
Ce code JavaScript détecte si l'utilisateur a des modifications non enregistrées dans le formulaire de commentaire. Si un utilisateur tente de quitter la page ou de fermer la fenêtre, un message d’avertissement apparaîtra.. 
 
Vous devez enregistrer ce fichier sous confirmer-laissant.js dans le dossier js. 
 
Après avoir enregistré les deux fichiers, voici à quoi devrait ressembler votre structure de dossiers: 
 
 
Maintenant, vous devez vous connecter à votre site WordPress en utilisant un client FTP. Consultez notre guide sur l'utilisation de FTP pour télécharger des fichiers WordPress.. 
 
Une fois connecté, vous devez télécharger confirmer-partir dossier à / wp-contents / plugins / dossier sur votre site web. 
 
 
Après cela, vous devez vous connecter à la zone d'administration de WordPress et visiter la page Plugins. Localisez le plug-in 'Confirm Leaving' dans la liste des plugins installés et cliquez sur le lien 'activer' situé en dessous.. 
 
 
C'est tout. Vous pouvez maintenant visiter n’importe quel article de votre site Web, écrire du texte dans n’importe quel champ du formulaire de commentaire, puis essayer de quitter la page sans vous l'envoyer. Une fenêtre contextuelle apparaît, vous avertissant que vous êtes sur le point de quitter une page contenant des modifications non enregistrées.. 
 
 
Ajout de l'avertissement à d'autres formulaires dans WordPress
 
Vous pouvez utiliser la même base de code pour cibler tous les formulaires de votre site WordPress. Ici, nous allons vous montrer un exemple d'utilisation de celui-ci pour cibler un formulaire de contact.. 
 
Dans cet exemple, nous utilisons le plugin WPForms pour créer un formulaire de contact. Les instructions seront les mêmes si vous utilisez un autre plugin de formulaire de contact sur votre site Web.. 
 
Accédez à la page où vous avez ajouté votre formulaire de contact. Passez la souris sur le premier champ de votre formulaire de contact, cliquez avec le bouton droit de la souris, puis sélectionnez Inspecter dans le menu du navigateur.. 
 
 
Localisez la ligne qui commence par le  étiquette. Dans la balise de formulaire, vous trouverez l'attribut ID. 
 
Dans cet exemple, l'ID de notre formulaire est wpforms-form-170. Vous devez copier l'attribut ID. 
 
Maintenant, éditez le confirmer-laissant.js déposer et ajouter l'attribut ID après #commentform.
 
Assurez-vous de séparer #commentform et l'identifiant de votre formulaire avec une virgule. Vous devrez également ajouter # signer en tant que préfixe de l'attribut ID de votre formulaire. 
 
Votre code va maintenant ressembler à ceci:
 
 jQuery (document) .ready (fonction ($) $ (document) .ready (fonction () needToConfirm = false; window.onbeforeunload = askConfirm;); fonction askConfirm () if (needToConfirm) // Mettez votre message personnalisé renvoyé ici "Vos données non sauvegardées seront perdues."; $ ("# commentform, # wpforms-form-170"). change (function () needToConfirm = true;)) 
 
Enregistrez vos modifications et téléchargez le fichier sur votre site Web.. 
 
Vous pouvez maintenant entrer du texte dans n’importe quel champ de votre formulaire de contact, puis essayer de quitter la page sans envoyer le formulaire. Une fenêtre contextuelle apparaîtra avec un avertissement indiquant que vous avez des modifications non enregistrées.. 
 
Vous pouvez télécharger le plugin confirmation-laissant ici. Il ne cible que le formulaire de commentaire, mais n'hésitez pas à éditer le plugin pour cibler d'autres formulaires. 
 
C’est tout, nous espérons que cet article vous a aidé à afficher la confirmation de navigation dans une fenêtre contextuelle pour les formulaires WordPress. Vous pouvez également essayer vos 8 meilleurs tutoriels jQuery pour les débutants WordPress. 
 
Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.