Les internautes quittent-ils votre site sans avoir rempli de formulaire ? Cela arrive parfois parce qu’un visiteur quitte accidentellement une page ou ferme par inadvertance la fenêtre de son navigateur : Formulaire site web. Dans les deux cas, il est utile de créer une fenêtre contextuelle pour la confirmation des formulaires incomplets dans WordPress.
Cela permet au visiteur de rester sur la page et de terminer sans perdre ses informations.
Pensez-y, combien de fois la confirmation de « rester » ou « quitter » vous a-t-elle sauvé lorsque vous quittez accidentellement un article que vous avez passé des heures à créer ? Je sais que je ne peux pas compter le nombre de fois où WordPress m’a épargné du temps et des efforts parce que j’avais accidentellement cliqué sur quelque chose.
Dans ce tutoriel, je vous montrerai comment créer un plugin de confirmation de navigation dans WordPress. Evaluation site web. Ne vous inquiétez pas, c’est relativement facile et direct. En fait, vous n’avez pas besoin de connaître beaucoup de choses sur le codage pour que cela fonctionne.
Création d’une fenêtre contextuelle pour le plugin de confirmation de navigation
Les plugins sont sans doute le pain et le beurre de WordPress : Exemple formulaire site web. Ils élargissent les possibilités du site et stimulent souvent l’engagement de vos visiteurs.
Aujourd’hui, vous allez créer un petit plugin pour afficher un formulaire de confirmation vide.
Création de confirm_leave.php
Le fichier confirm_leave.php est le moteur de ce plugin : Formsite. Tout d’abord, créez un nouveau dossier sur votre ordinateur appelé « confirm-leaving-form ».
Vous allez maintenant créer un nouveau fichier dans ce dossier : Formulaire contact site web. Ouvrez un éditeur de texte simple sur votre ordinateur (Formulaire esta site officiel). Par exemple, les utilisateurs de Windows disposent de Notepad.
Collez le code suivant dans votre éditeur de texte (remplacez « monsiteinternet.com » par votre domaine) :[ht_message mstyle=« info » title=« show_icon= »« id= »« class= »« style= » » ]/*** Confirm Leaving* Nom du plugin : Formulaire de confirmation de départ* URI du plugin : https://www.monsiteinternet.com* Description : Ce plugin affiche un avertissement aux utilisateurs lorsqu’ils oublient de cliquer sur le bouton d’envoi d’un formulaire de commentaire.* Version : 1.0.0* Auteur : Votre nom ou votre entreprise* URI de l’auteur : https://www.monsiteinternet.com* Licence : GPL-2.0+* URI de la licence : https://www.gnu.org/licenses/gpl-2.0.txt*/
function wpb_confirm_leaving_js() {
wp_enqueue_script(‘Confirm Leaving Form’, plugins_url(‘js/confirm-leaving.js’, __FILE__ ), array(‘jquery’), ‘1.0.0’, true ) ;}add_action(‘wp_enqueue_scripts’, ‘wpb_confirm_leaving_js’) ; [/ht_message]
Sauvegardez ce fichier sous le nom « confirm-leaving.php » dans votre dossier.
Lorsque vous enregistrez un fichier PHP dans des applications telles que le Bloc-notes, n’oubliez pas de changer le « Type de fichier » en « Tous les fichiers ». Formulaire site. Sinon, vous créerez un document texte et non un fichier PHP : Question site. Cela entraînera l’échec du plugin lorsque vous tenterez de l’ajouter à WordPress.
Création du JavaScript pour le plugin de confirmation
Nous avons maintenant besoin de JavaScript pour contrôler la confirmation des formulaires incomplets dans WordPress. Question site de rencontre. Sans cela, le fichier PHP ci-dessus est inutile.
Créez un nouveau dossier à l’intérieur du dossier ci-dessus et appelez-le « js : Questionnaire site. »
Créez un nouveau document texte et collez-y ce code :[ht_message mstyle=« info » title=« » show_icon=« » id=« » class=« » style=« » ]jQuery(document).ready(function($) {
$(document).ready(function() {needToConfirm = false ;window.onbeforeunload = askConfirm ;}) ;
function askConfirm() {if (needToConfirm) {// Mettez votre message personnalisé icireturn « Vous partez si vite ? Vos données seront perdues si vous continuez » ;}}
$(« #commentform »).change(function() {needToConfirm = true ;}) ;
})[/ht_message]
Ce code particulier se concentre sur la section des commentaires de votre site. Ce segment est situé dans le code en tant que « #commentform » : (Questionnaire site de rencontre). Pour ajouter d’autres formulaires à ce code, vous aurez besoin de l’ID de chaque formulaire et de les placer dans le codage JavaScript : (Questionnaire site internet). Je reviendrai sur ce point dans un instant.
Enregistrez ce fichier dans le dossier « js » que vous avez créé sous le nom de « confirm-leaving.js ».
Ajouter le formulaire de confirmation de départ à WordPress
Nous avons maintenant notre petit plugin prêt à aider WordPress à confirmer la navigation à partir de formulaires (Questionnaire site web). Il ne reste plus qu’à l’ajouter au site et à l’activer.
Pour le télécharger sur votre site, vous devrez utiliser une application FTP comme FileZilla. Quiz site. Celle-ci connecte directement votre ordinateur à votre site et vous donne accès à toutes ses ressources.
Téléchargez le dossier confirm-leaving-form dans le répertoire « /wp-content/plugins/ » de votre site web.
Allez dans la section plugins de WordPress sur votre site web.
Trouvez votre nouveau plugin et cliquez sur le lien « Activer ».
Désormais, les utilisateurs recevront un message lorsqu’ils ne soumettront pas de données à partir du formulaire de commentaire.
Ajout d’autres ID de formulaire à JavaScript
La section des commentaires n’est probablement pas le seul formulaire que vous utiliserez sur votre site web : (Site formulaire en ligne). Pourquoi ne pas en ajouter d’autres ? Et si vous avez des formulaires de contact que les internautes doivent remplir avant de quitter votre site ?
Pour cela, vous aurez besoin de l’identifiant de chaque formulaire que vous souhaitez ajouter : Site formulaire visa france. Pour ce tutoriel, j’utilise une page très basique utilisant le formulaire de contact de WPForms.
Allez sur la page de votre formulaire et « inspectez » l’élément. Vous pouvez le faire de plusieurs façons. Comme j’utilise un PC, j’ai simplement fait un clic droit sur la zone du formulaire et j’ai cliqué sur inspecter. Les utilisateurs de MAC utiliseront Commande+Clic.
Recherchez l’identifiant du formulaire dans le code. Il commence par »
Comme vous pouvez le voir sur l’image, mon ID est « wpforms-form-1835 ». Cela provient de la partie ID= du code. Survey sites. Cherchez dans une zone comme celle-ci pour trouver l’ID de votre formulaire.
Saisissez l’identifiant de votre formulaire dans le code JavaScript. Pour ce faire, utilisez un « # » suivi de l’ID. Par exemple, le segment de JavaScript que j’utiliserais ressemble à ceci :[ht_message mstyle=« info » title=« » show_icon=« » id=« » class=« » style=« » ]$(« #commentform,#wpforms-form-1835 »).change(function() {[/ht_message]Cela indique à WordPress de lancer la fenêtre contextuelle à la fois pour la section des commentaires et pour le formulaire de contact. Veillez à séparer chaque formulaire par une virgule.
Faciliter la tâche des visiteurs
Les confirmations de formulaires incomplets dans WordPress aident les gens à se rappeler de soumettre des données ou à éviter de les perdre en cliquant accidentellement sur quelque chose d’incorrect. C’est l’une de ces améliorations mineures que les visiteurs apprécient et qu’ils considèrent souvent comme allant de soi. Offrez à vos visiteurs la meilleure expérience possible et aidez-les à garder leur attention sur les formulaires qu’ils commencent à remplir.
Combien de fois utilisez-vous du code réel pour apporter des modifications à votre site web WordPress ? Combien de formulaires les visiteurs peuvent-ils remplir ?
