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 peut être super frustrant. 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.

Cependant, si cette fonctionnalité n’est pas correctement configurée, elle peut être gênante et perturber votre site, frustrant ainsi les utilisateurs/utilisatrices. Vous aurez besoin d’un moyen fiable pour l’ajouter en douceur et éviter ces problèmes.

Version, nous voulons vous afficher comment le faire en utilisant une extension personnalisée. Ne vous inquiétez pas, c’est plus facile que vous ne le pensez !

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 ? Pourquoi en avez-vous besoin ?

Supposons qu’un utilisateur soit en train de commenter votre blog WordPress. Ils ont déjà écrit pas mal de lignes, mais ils sont distraits et oublient d’envoyer les commentaires. Maintenant, s’ils ferment leur navigateur, alors le commentaire sera perdu.

La fenêtre surgissante de confirmation de la navigation leur donne la possibilité de terminer leur commentaire.

Cette fonctionnalité est affichée 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, une fenêtre surgissante d’avertissement s’affiche.

Régler une fenêtre surgissante de navigation de confirmation peut améliorer l’expérience utilisateur, les taux de conversion et la confiance des utilisateurs.

Voici comment : En offrant aux utilisateurs une fonctionnalité d’avertissement, vous affichez votre intérêt pour l’expérience de vos utilisateurs/utilisatrices, ce qui peut aider à les fidéliser et à les faire revenir. Les utilisateurs/utilisatrices sont plus enclins à terminer les formulaires ou les commentaires s’ils savent qu’ils ne perdront pas leur progression.

Dans cette optique, nous allons vous afficher comment ajouter cette fonctionnalité d’avertissement aux commentaires WordPress et aux autres formulaires de votre site. Voici un aperçu rapide de tout ce dont nous parlerons dans ce guide :

Vous êtes prêts ? Premiers pas.

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 un 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.

Ouvrons maintenant un éditeur de texte brut comme le Bloc-notes et créons 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.

Maintenant, nous devons créer le fichier JavaScript que cette extension charge. Vous pouvez le faire en créant un nouveau fichier dans votre éditeur/éditrices de texte et en collant ce code à l’intérieur :

[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 ensuite 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. Pour obtenir des instructions étape par étape, vous pouvez consulter notre guide sur l ‘utilisation du FTP pour téléverser des fichiers WordPress.

Une fois connecté, vous devrez 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 vous rendre dans la section « Plugins ».

Consultez cette page et voyez l’extension « Confirm Leaving » dans la liste des extensions installées. Vous pouvez alors cliquer sur le lien « activer » qui se trouve 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.

Ajouter la fenêtre surgissante d’avertissement à d’autres formulaires de votre site 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.

La première chose à faire est de vous rendre sur la page où vous avez ajouté votre formulaire de contact. Ensuite, vous passez la souris sur le premier champ de votre formulaire de contact, vous cliquez avec le bouton droit de la souris et vous sélectionnez « Inspecter » dans le menu du navigateur.

À partir de là, vous devez repérer la ligne qui commence par l’identifiant <form> pour trouver l’attribut ID. Dans cet exemple, l’ID de notre formulaire est wpforms-form-170.

Une fois que vous avez trouvé l’identifié, copiez l’attribut ID.

Maintenant, modifions le fichier confirm-leaving.js et ajoutons l’attribut ID après #commentform. Confirmez simplement que vous séparez #commentform de 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]

Si tout semble correct, vous pouvez enregistrer vos modifications et téléverser 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 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 l’installation d’une extension WordPress.

Notez qu’il commente le formulaire de commentaires, mais vous pouvez modifier l’extension pour cibler votre formulaire d’Inscription, vos enquêtes, votre formulaire de retour d’information, votre formulaire de demande d’emploi ou tout autre formulaire.

Astuce : Améliorer la performance de vos formulaires WordPress

Après avoir ajouté la fenêtre surgissante de navigation de confirmation, il est judicieux de suivre la fréquence à laquelle les utilisateurs/utilisatrices abandonnent leur formulaire.

Le fait de savoir combien de personnes quittent le site sans l’avoir terminé peut vous aider à déterminer dans quelle mesure votre site leur convient. Vous pouvez ainsi trouver ce qui les pousse à partir et apporter des améliorations.

L’un des meilleurs outils de suivi des abandons de formulaires est MonsterInsights.

C’est le meilleur plugin Google Analytics, qui permet de voir facilement comment les utilisateurs/utilisatrices interagissent avec vos formulaires et où ils ont tendance à s’inancer, le tout depuis votre Tableau de bord WordPress.

Pour plus de détails, veuillez consulter notre guide sur le suivi et la réduction des abandons de formulaires.

Le cas échéant, vous pouvez également effectuer un test par division A/B. Il s’agit d’essayer différentes versions de vos formulaires pour voir laquelle est la plus performante.

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

Thrive Optimize est la meilleure extension pour cette tâche. Il vous permet d’exécuter des tests par division A/B sans aucun codage et garde vos données en sécurité.

Pour en savoir plus, vous pouvez vous référer à notre guide sur comment faire un test par division A/B sur WordPress.

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 choix d’experts des meilleurs constructeurs de formulaires en ligne et notre guide sur la façon d’ajouter de meilleures notifications personnalisées.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.