Fermer accidentellement une page sans soumettre votre commentaire ou avec un formulaire à moitié rempli est ennuyeux. Récemment, un de nos utilisateurs nous a demandé s’il était possible de montrer à ses lecteurs une fenêtre contextuelle de confirmation de la navigation ? Cette minuscule 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 la fenêtre contextuelle de confirmation de navigation pour les formulaires WordPress.
Qu’est-ce que la fenêtre contextuelle de confirmation de la navigation ?
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 commenter. Maintenant, s’ils ont fermé leur navigateur, le commentaire sera perdu.
La fenêtre contextuelle de confirmation de la navigation leur donne la possibilité de terminer leur commentaire.
Vous pouvez voir cette fonctionnalité en action dans l’écran de l’éditeur de publication WordPress. Si vous avez des modifications non enregistrées et que vous essayez de quitter la page ou de fermer le navigateur, vous verrez une fenêtre d’avertissement.
Voyons comment nous pouvons ajouter cette fonction d’avertissement aux commentaires WordPress et autres formulaires sur votre site.
Afficher la fenêtre contextuelle Confirmer la 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 d’essayer de créer votre propre plugin. Vous pouvez d’abord le faire 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 confirm-leaving
. Dans le dossier de confirmation de départ, vous devez créer un autre dossier et le nommer js.
Ouvrez maintenant un éditeur de texte brut comme le Bloc-notes et créez un nouveau fichier. A l’intérieur, collez simplement le code suivant :
<?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: Themelocal * 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');
Cette fonction php ajoute simplement un fichier JavaScript au front-end de votre site Web.
Allez-y et enregistrez ce fichier sous confirm-leaving.php
dans le dossier principal de confirmation de départ.
Nous devons maintenant créer le fichier JavaScript que ce plugin charge.
Créez un nouveau fichier et collez ce code à l’intérieur :
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; }); })
Ce code JavaScript détecte si l’utilisateur a des modifications non enregistrées sous forme de commentaire. Si un utilisateur essaie de quitter la page ou de fermer la fenêtre, une fenêtre contextuelle d’avertissement s’affichera.
Vous devez enregistrer ce fichier sous confirm-leaving.js
dans le dossier js.
Après avoir enregistré les deux fichiers, voici à quoi devrait ressembler votre structure de dossiers :
Vous devez maintenant vous connecter à votre site WordPress à l’aide d’un client FTP. Consultez notre guide sur la façon d’utiliser FTP pour télécharger des fichiers WordPress.
Une fois connecté, vous devez télécharger confirm-leaving
dossier vers /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 plugin « Confirmer le départ » dans la liste des plugins installés et cliquez sur le lien « Activer » en dessous.
C’est tout. Vous pouvez désormais 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 soumettre. Une fenêtre contextuelle apparaît, vous avertissant que vous êtes sur le point de quitter une page avec des modifications non enregistrées.
Ajouter 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 pour cibler un formulaire de contact.
Dans cet exemple, nous utilisons le WPForms plugin 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.
Rendez-vous sur la page où vous avez ajouté votre formulaire de contact. Passez la souris sur le premier champ de votre formulaire de contact, faites un clic droit, puis sélectionnez Inspecter dans le menu du navigateur.
Repérez la ligne qui commence par le <form>
étiqueter. Dans la balise form, vous trouverez l’attribut ID.
Dans cet exemple, l’ID de notre formulaire est wpforms-form-170
. Vous devez copier l’attribut ID.
Modifiez maintenant le confirm-leaving.js
fichier et ajoutez l’attribut ID après #commentform
.
Assurez-vous de séparer #commentform
et l’ID de votre formulaire avec une virgule. Vous devrez également ajouter #
signer comme préfixe de l’attribut ID de votre formulaire.
Votre code ressemblera maintenant à ceci :
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; }); })
Enregistrez vos modifications et téléchargez le fichier sur votre site Web.
Vous pouvez maintenant saisir n’importe quel texte dans n’importe quel champ de votre formulaire de contact, puis essayer de quitter la page sans soumettre 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 de confirmation de départ ici. Il ne cible que le formulaire de commentaire, mais n’hésitez pas à modifier le plugin pour cibler d’autres formulaires.
C’est tout, nous espérons que cet article vous a aidé à afficher la fenêtre contextuelle de confirmation de navigation pour les formulaires WordPress. Vous pouvez également essayer ces 8 meilleurs tutoriels jQuery pour les débutants WordPress.