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

Fermer accidentellement une page sans envoyer votre commentaire ou avec un formulaire à moitié rempli est agaçant. Récemment, un de nos utilisateurs/utilisatrices nous a demandé s’il était possible d’afficher à ses lecteurs une fenêtre surgissante de confirmation de navigation.

Cette toute petite fenêtre surgissante alerte les utilisateurs/utilisatrices et les empêche de laisser accidentellement des formulaires à moitié remplis et non soumis. C’est un bon moyen d’améliorer l’expérience des utilisateurs/utilisatrices et d’éviter aux internautes de devoir recommencer quelque chose depuis le début.

Dans cet article, nous allons vous montrer comment afficher la fenêtre surgissante de navigation de confirmation pour les formulaires WordPress.

Qu’est-ce qu’une fenêtre surgissante de navigation de confirmation ?

Supposons qu’un utilisateur soit en train de commenter votre blog. Il a déjà écrit plusieurs lignes, mais il est distrait et oublie d’envoyer son commentaire. Or, s’il ferme son navigateur, le commentaire sera perdu.

La fenêtre surgissante 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 publications WordPress. Si vous avez des modifications non enregistrées et que vous essayez de quitter la page ou de fermer le navigateur, vous verrez apparaître une fenêtre surgissante d’avertissement.

Voyons comment ajouter cette fonctionnalité d’avertissement aux commentaires WordPress et à d’autres formulaires de votre site :

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

Pour ce tutoriel, nous allons créer une extension personnalisée, mais ne vous inquiétez pas, vous pouvez également télécharger l’extension à la fin de ce tutoriel pour l’installer sur votre site.

Cependant, pour une meilleure compréhension du code, nous vous demanderons d’essayer de créer votre propre extension. Vous pouvez le faire sur une installation locale ou sur un site de staging dans un premier temps.

Premiers pas.

Tout d’abord, vous devez créer un nouveau dossier sur votre ordinateur et le nommer confirm-leaving. Dans le dossier confirm-leaving, vous devez créer un autre dossier et le nommer js.

Ouvrez un éditeur/éditrices de texte tel que Notepad et créez un nouveau fichier. À l’intérieur, collez simplement le code suivant :

[php]
<?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');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/php]

Cette fonction PHP ajoute simplement un fichier JavaScript à l’interface publique de votre site.

Enregistrez ce fichier confirm-leaving.PHP dans le dossier principal confirm-leaving.

Nous devons maintenant créer le fichier JavaScript que cette extension charge.

Créez un nouveau fichier et collez-y ce code :

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Ce code JavaScript détecte si l’utilisateur a des modifications non enregistrées dans le formulaire de commentaire. Si un compte tente de quitter la page ou de fermer la fenêtre, il affiche une fenêtre surgissante d’avertissement.

Vous devez enregistrer ce fichier sous le nom de confirm-leaving.js dans le dossier js.

Après avoir enregistré les deux fichiers, voici à quoi devrait ressembler la structure de votre dossier :

Vous devez maintenant vous connecter à votre site WordPress à l’aide d’un client FTP. Consultez notre guide sur l’utilisation de FTP pour téléverser des fichiers WordPress.

Une fois connecté, vous devez téléverser le dossier confirm-leaving dans le dossier /wp-contents/plugins/ de votre site.

Ensuite, vous devez vous connecter à la zone d’administration de WordPress et visiter la page du plugin.

Emplacement de l’extension ‘Confirm Leaving’ dans la liste des extensions activées et cliquez sur le lien ‘activate’ situé en dessous.

C’est tout. Vous pouvez maintenant visiter n’importe quelle publication sur votre site, écrire un texte dans n’importe quel champ du formulaire de commentaire, puis essayer de quitter la page sans l’envoyer.

Une fenêtre surgissante apparaît, vous avertissant que vous êtes sur le point de quitter une page dont les modifications n’ont pas été enregistrées.

Ajouté l’avertissement à d’autres formulaires dans WordPress

Vous pouvez utiliser la même base de code pour cibler n’importe quel formulaire sur votre site WordPress. Ici, nous allons vous afficher un exemple d’utilisation pour cibler un formulaire de contact.

Dans cet exemple, nous utilisons l’extension WPForms pour créer un formulaire de contact. Les instructions seront les mêmes si vous utilisez une autre extension de formulaire de contact sur votre site.

Allez sur la page où vous avez ajouté votre formulaire de contact. Placez la souris sur le premier champ de votre formulaire de contact, cliquez avec le bouton droit de la souris et sélectionnez « Inspecter » dans le menu du navigateur.

Emplacement de la ligne qui commence par l’identifiant <form>. Dans l’identifié du formulaire, 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 fichier confirm-leaving.js et ajoutez l’attribut ID après #commentform.

Confirmez que vous séparez #commentform l’ID de votre formulaire par une virgule. Vous devrez également ajouter un signe # comme préfixe à l’attribut ID de votre formulaire.

Votre code ressemblera désormais à ceci :

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Enregistrez vos modifications et téléversez le fichier sur votre site.

Vous pouvez désormais saisir n’importe quel texte dans n’importe quel champ de votre formulaire de contact, puis essayer de quitter la page sans envoyer le formulaire. Une fenêtre surgissante vous avertit que vos modifications ne sont pas enregistrées.

Vous pouvez télécharger l’extension confirm-leaving ici. Il cible uniquement le formulaire de commentaire, mais n’hésitez pas à modifier l’extension pour cibler d’autres formulaires.

C’est tout ; nous espérons que cet article vous a aidé à afficher la fenêtre surgissante de navigation de confirmation pour les formulaires WordPress. Vous pouvez également consulter nos extensions et outils WordPress indispensables pour les sites professionnels ou lire notre guide ultime sur la façon d’augmenter le trafic de votre blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.