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

Rien n'est plus frustrant que de remplir un formulaire WordPress, d'appuyer accidentellement sur le bouton retour et de tout perdre. Nous avons tous vécu cela, et c'est généralement suffisant pour décourager quelqu'un 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 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, ce qui peut 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 :

• Méthode 1 : Afficher une popup de confirmation de navigation pour les formulaires non soumis dans WordPress
• Méthode 2 : Ajouter la popup d'avertissement à d'autres formulaires de votre site WordPress
• Bonus : Améliorez les performances de vos formulaires WordPress
• Questions fréquemment posées sur les popups de confirmation de navigation
• Guides supplémentaires pour l'utilisation des formulaires WordPress

Prêt ? Commençons.

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

Cette méthode implique la création d'un plugin simple et personnalisé.

Ne vous inquiétez pas si vous n'avez jamais codé auparavant ! Nous vous guiderons à chaque étape du processus, 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 les étapes sur une installation locale ou site de staging dans un premier temps.

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 et créons un nouveau fichier. À 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');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in 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 :

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
		
		

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 fenêtre d'alerte.

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 sur WordPress.

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

Après cela, vous devrez 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 sur 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, 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 souhaitez 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, vous déplacerez la souris sur le premier champ de votre formulaire de contact, cliquerez avec le bouton droit, puis sélectionnerez « Inspecter » dans le menu du navigateur.

À partir de là, vous devrez localiser la ligne qui commence par la balise <form> pour trouver l'attribut ID. Dans cet exemple, l'ID de notre formulaire est wpforms-form-170.

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. Assurez-vous d'ajouter un préfixe # à votre nouvel ID, tout comme le formulaire de commentaire.

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;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Si tout semble correct, vous pouvez enregistrer vos modifications dans le fichier confirm-leaving.js et le téléverser à nouveau sur votre serveur, en écrasant l'ancien fichier.

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 confirm-leaving 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 commentaires, mais vous pouvez modifier le plugin pour cibler votre formulaire d'inscription utilisateur, les sondages, le formulaire de feedback, le 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.

L'un des meilleurs outils pour suivre l'abandon de formulaires est MonsterInsights. C'est le meilleur plugin Google Analytics pour WordPress. Son module complémentaire Forms (disponible dans la version Pro) facilite le suivi automatique des vues et des soumissions de formulaires.

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 critique complète de MonsterInsights pour découvrir toutes ses fonctionnalités.

Pour plus de détails, veuillez consulter notre guide sur comment suivre et 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 popup 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

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. Le comportement sera le même que sur un ordinateur de bureau.

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 aussi 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 cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.