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

Il n’y a rien de plus frustrant que de remplir un formulaire WordPress, d’appuyer par erreur sur le bouton retour et de tout perdre. Nous sommes tous passés par là, et c’est généralement suffisant pour qu’une personne abandonne immédiatement.

Pour les propriétaires de sites, ce petit contretemps peut signifier des ventes perdues et moins d'inscriptions. Les visiteurs partiront agacés et seront beaucoup moins susceptibles de revenir et d'essayer à nouveau.

La bonne nouvelle ? Il existe une solution simple : une fenêtre contextuelle de confirmation de navigation. Cet avertissement simple donne aux utilisateurs une seconde chance avant de quitter une page avec un formulaire non soumis.

Dans ce guide, nous vous montrerons comment ajouter cette fonctionnalité à vos formulaires WordPress afin que vous puissiez créer une expérience plus fluide et augmenter vos taux de complétion de formulaires.

Qu'est-ce qu'une fenêtre contextuelle de confirmation de navigation et pourquoi en avez-vous besoin ?

Une fenêtre contextuelle de confirmation de navigation est un avertissement du navigateur qui apparaît lorsqu'un utilisateur ayant des modifications non enregistrées dans un formulaire tente de quitter une page web.

Vous avez probablement déjà vu cette fonctionnalité en action sur l’écran de l’éditeur de contenu WordPress. Si vous avez des modifications non enregistrées et que vous essayez de quitter la page, une fenêtre contextuelle d’avertissement apparaît pour vous empêcher de perdre votre travail.

L'ajout de cela à vos propres formulaires est un petit changement avec de grands avantages :

• Améliore l’expérience utilisateur : Cela évite aux visiteurs la frustration de perdre accidentellement leur progression, montrant que vous appréciez leur temps.
• Augmente les taux de conversion : En empêchant l’abandon accidentel, vous donnez aux utilisateurs une seconde chance de remplir le formulaire. Comme le taux moyen d’abandon des formulaires en ligne est d’environ 68 %, cette simple vérification peut considérablement augmenter les prospects.
• Renforce la confiance des utilisateurs : Une fonctionnalité réfléchie comme celle-ci démontre professionnalisme et attention, ce qui peut aider à fidéliser et encourager les visites de retour.

Dans cette optique, ajoutons cet avertissement à vos commentaires WordPress et autres formulaires sur votre site.

Voici tout ce que nous allons couvrir dans ce guide :

Prêt ? Commençons.

Méthode 1 : Afficher une popup de confirmation de navigation pour les formulaires non soumis dans WordPress

D’après notre expérience, la méthode la plus fiable consiste à créer un plugin simple et personnalisé.

Ne vous inquiétez pas si vous n’avez jamais codé auparavant ! Nous avons personnellement exécuté et vérifié ce code pour nous assurer qu’il fonctionne, et c’est un excellent moyen de voir comment fonctionnent les plugins WordPress.

De plus, vous pouvez également télécharger le plugin à la fin de ce tutoriel pour l'installer sur votre site web.

Cependant, nous vous recommandons vivement de créer le plugin vous-même pour mieux comprendre le fonctionnement du code. Vous pouvez suivre sur une installation locale ou un site de staging d’abord.

Tout d'abord, vous devez créer un nouveau dossier sur votre ordinateur et le nommer confirm-leaving. À l'intérieur du dossier confirm-leaving, vous créerez un autre dossier et le nommerez js.

Maintenant, ouvrons un éditeur de texte brut comme le Bloc-notes pour Windows ou TextEdit pour Mac. Si vous utilisez TextEdit, réglez-le immédiatement en mode texte brut via Format » Rendre le texte brut avant de coller quoi que ce soit, afin d’éviter les erreurs de mise en forme.

À l’intérieur, collez simplement le code suivant :

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://014.leahstevensyj.workers.dev
 * 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://014.leahstevensyj.workers.dev
 * 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');

		
Hébergé avec ❤️ par WPCode
		

			
			Utilisation en 1 clic dans WordPress
		
		

Cette fonction PHP utilise wp_enqueue_script, qui est la méthode officielle de WordPress pour ajouter du JavaScript. C’est la meilleure pratique car elle permet d’éviter les conflits de scripts avec d’autres plugins.

Maintenant, enregistrez ce fichier sous le nom confirm-leaving.php dans le dossier principal confirm-leaving.

Maintenant, nous devons créer le fichier JavaScript que ce plugin charge. Vous pouvez le faire en créant un nouveau fichier dans votre éditeur de texte et en y collant ce code :

<br>jQuery(document).ready(function($) {<br>    var needToConfirm = false;<br>    window.onbeforeunload = askConfirm;<br> <br>function askConfirm() {<br>    if (needToConfirm) {<br>        // Put your custom message here<br>        return "Your unsaved data will be lost.";<br>    }<br>}<br> <br>$("#commentform").change(function() {<br>    needToConfirm = true;<br>});<br> <br> })<br>

		
Hébergé avec ❤️ par WPCode
		

			
			Utilisation en 1 clic dans WordPress
		
		

Ce JavaScript détecte si un utilisateur a commencé à remplir le formulaire de commentaire. S’il essaie de quitter la page avant de soumettre, il déclenche la popup d’avertissement.

Allez-y et enregistrez ce fichier sous le nom confirm-leaving.js dans le dossier js que vous avez créé précédemment.

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

Maintenant, vous devez vous connecter à votre site WordPress à l’aide d’un client FTP. Pour des instructions étape par étape, vous pouvez consulter notre guide sur comment utiliser FTP pour téléverser des fichiers WordPress.

Une fois connecté, vous devrez télécharger le dossier confirm-leaving dans le dossier /wp-content/plugins/ de votre site web.

Après cela, vous voudrez vous connecter à la zone d’administration de WordPress et aller dans « Plugins ».

À partir de là, vous devriez voir le plugin « Confirm Leaving » dans la liste des plugins installés. Vous pouvez ensuite cliquer sur le lien « activer » en dessous.

C’est tout. Vous pouvez maintenant visiter n’importe quel article de votre site web, taper quelque chose dans le formulaire de commentaire, puis essayer de quitter la page.

Ensuite, une fenêtre contextuelle apparaîtra, vous avertissant que vous avez des modifications non enregistrées.

Pour des raisons de sécurité, les navigateurs Web modernes afficheront leur propre message d'avertissement générique (comme « Quitter le site ? Les modifications que vous avez apportées pourraient ne pas être enregistrées. ») au lieu du texte personnalisé du code. Le but du code est simplement de déclencher cette invite standard du navigateur.

Méthode 2 : Ajouter la popup d'avertissement à d'autres formulaires de votre site WordPress

Vous pouvez utiliser le même code pour cibler n'importe quel autre formulaire sur votre site WordPress, comme un formulaire de contact.

Dans cet exemple, nous ciblons un formulaire créé avec le plugin WPForms, un constructeur de formulaires WordPress puissant par glisser-déposer, mais ces étapes fonctionneront si vous utilisez un autre plugin de formulaire de contact sur votre site web.

Vous n’avez pas de formulaire de contact et vous voulez en créer un ? Alors vous pouvez consulter notre guide sur comment créer un formulaire de contact.

Chez WPBeginner, nous utilisons WPForms pour intégrer de nombreux formulaires différents, y compris notre formulaire de contact, notre sondage annuel auprès des lecteurs et nos demandes de migration. Si vous êtes curieux de connaître l’outil et ce qu’il peut faire, vous pouvez consulter notre avis complet sur WPForms.

La première chose à faire est d’aller sur la page où vous avez intégré votre formulaire de contact.

Ensuite, sur un navigateur de bureau, survolez le premier champ de votre formulaire de contact, faites un clic droit et sélectionnez « Inspecter » dans le menu. Dans le panneau qui s’ouvre, recherchez un élément mis en surbrillance qui commence par <form id= — cette ligne contient l’ID dont vous avez besoin.

Dans cet exemple, l’ID de notre formulaire est wpforms-form-170. Veuillez noter que le numéro d’ID de votre formulaire sera différent en fonction de sa date de création ; vous devez remplacer « 170 » par votre numéro unique.

Une fois que vous avez trouvé la balise, copiez l'attribut ID.

Maintenant, ouvrez votre fichier confirm-leaving.js pour modifier le sélecteur jQuery.

Vous devrez ajouter l’ID de votre formulaire juste après #commentform, séparé par une virgule. La virgule agit comme un opérateur « OU » en jQuery, ce qui signifie que le script surveillera le formulaire de commentaires ou votre formulaire de contact spécifique.

Assurez-vous également d’ajouter un préfixe # à votre nouvel ID, tout comme le formulaire de commentaires.

Votre code ressemblera maintenant à ceci :

<br>jQuery(document).ready(function($) {<br>    var needToConfirm = false;<br>    window.onbeforeunload = askConfirm;<br><br>function askConfirm() {<br>    if (needToConfirm) {<br>        // Put your custom message here<br>        return "Your unsaved data will be lost.";<br>    }<br>}<br> <br>$("#commentform,#wpforms-form-170").change(function() {<br>    needToConfirm = true;<br>});<br> <br> })<br>

		
Hébergé avec ❤️ par WPCode
		

			
			Utilisation en 1 clic dans WordPress
		
		

Si tout semble correct, vous pouvez enregistrer vos modifications dans le fichier confirm-leaving.js. Ensuite, dans votre client FTP, naviguez vers /wp-content/plugins/confirm-leaving/js/ et faites glisser le fichier mis à jour pour remplacer le fichier confirm-leaving.js existant.

Maintenant, vous pouvez entrer du 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.

📥 Téléchargement du plugin : Vous pouvez télécharger le plugin de confirmation de sortie ici, puis installer et activer le plugin comme d’habitude. Si vous avez besoin d’aide, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Notez qu’il cible le formulaire de commentaire, mais vous pouvez modifier le plugin pour cibler votre formulaire d’inscription utilisateur, vos sondages, votre formulaire de commentaires, votre formulaire de candidature, ou tout autre formulaire.

Bonus : Améliorez les performances de vos formulaires WordPress

Après avoir ajouté la fenêtre contextuelle de confirmation de navigation, il est conseillé de suivre la fréquence à laquelle les utilisateurs abandonnent leurs formulaires. Connaître ces données peut vous aider à identifier et à corriger les problèmes qui poussent les gens à partir.

Alors que WPForms capture les entrées partielles réelles, MonsterInsights fournit des analyses de haut niveau pour suivre les vues par rapport aux soumissions dans Google Analytics. C’est l’un des meilleurs plugins Google Analytics pour suivre l’abandon de formulaire.

De cette façon, vous pouvez voir comment les utilisateurs interagissent avec vos formulaires directement depuis votre tableau de bord.

Chez WPBeginner, nous utilisons MonsterInsights pour suivre toutes nos conversions importantes, y compris les formulaires, les boutons et les liens d'affiliation. Consultez notre avis complet sur MonsterInsights pour découvrir toutes ses fonctionnalités.

Pour plus de détails, veuillez consulter notre guide sur la manière de suivre et de réduire l'abandon de formulaire.

Vous pouvez également exécuter des tests A/B pour voir quelle version de votre formulaire est la plus performante. Par exemple, vous pourriez tester différents styles de formulaire ou textes de bouton pour voir ce qui encourage le plus de soumissions.

Par exemple, vous pourriez modifier le libellé de votre fenêtre contextuelle de confirmation de navigation ou personnaliser votre formulaire. En analysant les résultats, vous pouvez déterminer ce qui maintient l'engagement des utilisateurs et aide à réduire les taux d'abandon.

Thrive Optimize est le meilleur plugin pour cette tâche. Il vous permet d’exécuter facilement des tests A/B sans aucun codage. Pour en savoir plus, consultez notre guide sur comment effectuer des tests A/B dans WordPress.

Questions fréquemment posées sur les popups de confirmation de navigation

Vous avez peut-être encore quelques questions sur le fonctionnement pratique, alors examinons quelques réponses rapides.

L'ajout de ce code ralentira-t-il mon site web ?

Non, pas du tout. Le code JavaScript est très léger et ne s'exécute que lorsqu'un utilisateur tente de quitter une page avec un formulaire modifié. Il n'aura aucun impact notable sur les performances de votre site.

Puis-je modifier le message dans la fenêtre contextuelle de confirmation ?

Malheureusement, non. Pour des raisons de sécurité, les navigateurs modernes ne permettent plus aux sites web d'afficher un message personnalisé dans la fenêtre contextuelle de confirmation. Ils afficheront toujours un avertissement générique et standard à l'utilisateur.

Cette fenêtre contextuelle de confirmation fonctionne-t-elle sur les navigateurs mobiles ?

Oui, l’événement onbeforeunload est pris en charge par la plupart des navigateurs mobiles modernes, y compris Chrome et Safari sur Android et iOS.

Cependant, sur les navigateurs mobiles (en particulier iOS Safari), l’utilisateur doit avoir interagi avec la page, par exemple en tapant dans un champ de formulaire, pour que le déclencheur de la fenêtre contextuelle s’active de manière fiable.

Guides supplémentaires pour l'utilisation des formulaires WordPress

Nous espérons que cet article vous a aidé à afficher la fenêtre contextuelle de confirmation de navigation pour vos formulaires WordPress. Vous voudrez peut-être également consulter ces autres guides et sélections d’experts :

• Comment créer un formulaire de contact avec plusieurs destinataires
• Comment envoyer des e-mails de confirmation après la soumission de formulaires WordPress
• Façons d'utiliser la logique conditionnelle dans vos formulaires WordPress
• Meilleurs constructeurs de formulaires en ligne (Sélections d'experts)
• Le guide ultime pour utiliser les formulaires WordPress

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.