Résumé IA
Vous souhaitez ajouter des infobulles à votre formulaire ? Les infobulles sont de petites boîtes qui apparaissent lorsque vous survolez une zone de votre site WordPress, et elles sont idéales pour ajouter des informations supplémentaires sur un champ sans surcharger l'espace.
Dans cet article, nous vous montrerons comment ajouter des infobulles dans WordPress.
Dans cet article
- Qu'est-ce qu'une bulle d'aide dans WordPress ?
- Installer une bulle d'aide WordPress sans plugin
- Étape 1. Créez un formulaire WordPress
- Étape 2. Installez le plugin Shortcodes Ultimate
- Étape 3 : Obtenez votre shortcode de bulle d'aide
- Étape 4 : Ajoutez votre bulle d'aide à votre formulaire
- Étape 5 : Personnalisez votre bulle d'aide
- Étape 5 : Transformez votre bulle d'aide en icône (facultatif)
- Réflexions finales
Créez votre formulaire WordPress maintenant
Qu'est-ce qu'une bulle d'aide dans WordPress ?
Les bulles d'aide sont des indices, des termes de glossaire ou des messages qui apparaissent lorsque votre visiteur survole ou touche (sur les appareils mobiles) un élément de votre site Web WordPress. Et dans vos formulaires WordPress, les bulles d'aide peuvent être utilisées pour ajouter des informations supplémentaires sur un champ particulier.
Par exemple, regardez la capture d'écran ci-dessous.
WPForms vous permet d'ajouter facilement une description pour chaque champ dans le constructeur de formulaires. Contrairement à une description de champ typique, les bulles d'aide sont masquées par défaut. Elles n'apparaissent que lorsque votre utilisateur souhaite en savoir plus sur un champ donné en survolant la description du champ.
Ajouter une bulle d'aide est une excellente idée si vous souhaitez fournir plus de détails sur un champ particulier sans créer de distractions inutiles sur votre formulaire.
Maintenant que vous savez ce qu'est une bulle d'aide, continuez à lire pour découvrir comment les ajouter à votre site.
Installer une bulle d'aide WordPress sans plugin
Oui, il est possible d'installer une bulle d'aide WordPress sans plugin. Cependant, si vous ne souhaitez pas utiliser de plugin de bulle d'aide pour ajouter facilement une bulle d'aide à votre site WordPress, vous devrez être un utilisateur avancé et utiliser html ou jquery (ou engager un développeur pour le faire à votre place).
Heureusement, vous pouvez vous épargner du temps et de l'argent en utilisant un plugin de bulle d'aide. Pour les utilisateurs de WPForms, nous recommandons le plugin gratuit Shortcodes Ultimate.
Shortcodes Ultimate est facile à utiliser et fonctionne parfaitement avec les thèmes WordPress les plus populaires et les meilleurs.
Ce plugin WordPress gratuit, incroyablement utile, vous donnera plus de 50 shortcodes à utiliser pour ajouter facilement diverses fonctions à votre site, y compris le shortcode de bulle d'aide. Ensuite, nous vous montrerons exactement comment ajouter ce plugin de bulles d'aide WordPress.
Comment ajouter des bulles d'aide dans WordPress
Examinons le guide étape par étape sur la façon d'ajouter des bulles d'aide dans WordPress.
Étape 1. Créez un formulaire WordPress
La première chose à faire est d'installer et activer WPForms sur votre site. Si vous avez besoin d'aide, consultez ce guide sur comment installer un plugin WordPress.
Ensuite, vous devrez créer un formulaire simple dans WordPress.
Excellent travail de création de votre formulaire. Nous y reviendrons dans une étape ultérieure.
Étape 2. Installez le plugin Shortcodes Ultimate
Ensuite, cliquez ici pour aller sur WordPress et télécharger le plugin gratuit Shortcodes Ultimate.
Ou si vous êtes déjà dans votre tableau de bord WordPress, cliquez sur Plugins » Ajouter, recherchez Shortcodes Ultimate, et cliquez sur Installer maintenant.
Une fois le plugin activé, vous êtes prêt à commencer à l'utiliser.
Étape 3 : Obtenez votre shortcode de bulle d'aide
Maintenant, trouvez le plugin Shortcodes Ultimate sur le côté gauche de votre tableau de bord WordPress et cliquez sur Shortcodes disponibles. Faites défiler cette page et sélectionnez le bouton Tooltip.
Sur la page suivante, sélectionnez et copiez le shortcode :
Étape 4 : Ajoutez votre bulle d'aide à votre formulaire
Maintenant que vous avez votre shortcode d'infobulle, il est temps de l'ajouter à votre formulaire de contact simple.
Retournez à votre formulaire en cliquant sur WPForms » Tous les formulaires, puis sélectionnez Modifier sous le formulaire auquel vous souhaitez ajouter votre infobulle.
Une fois sur le formulaire, cliquez sur le champ auquel vous souhaitez ajouter votre infobulle et collez votre shortcode d'infobulle dans la zone de description.
Une fois que vous avez enregistré votre formulaire et que vous l'affichez sur le frontend, l'infobulle s'affichera désormais :
Étape 5 : Personnalisez votre bulle d'aide
Vous pouvez également modifier le code pour afficher votre propre texte. Voici un exemple avec les modifications en gras :
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
Vous pouvez également modifier un grand nombre d'options différentes dans les paramètres de votre infobulle, que vous trouverez en faisant défiler jusqu'en bas de la page Shortcodes » Shortcodes disponibles, comme :
- Style + Couleurs
- Position
- Taille
- Comportement
- Et plus encore
L'étape suivante est facultative mais rendra votre infobulle encore plus personnalisée et gardera vos formulaires encore plus propres et sans distractions.
Étape 5 : Transformez votre bulle d'aide en icône (facultatif)
À moins que vous n'indiquiez spécifiquement et n'invitiez les gens à survoler votre infobulle dans votre shortcode d'infobulle, vos visiteurs ne réaliseront peut-être même pas qu'il y a du contenu supplémentaire en attente d'être affiché dans cette infobulle ! Un excellent moyen de vous assurer que vos lecteurs survolent l'infobulle est d'en faire une icône au lieu d'utiliser simplement du texte.
Par exemple, beaucoup de gens ajoutent une icône d'information « i » et ensuite, lorsque l'utilisateur survole cette icône, l'infobulle s'affiche. N'est-ce pas génial ?
Pour ce faire, téléchargez et activez d'abord le plugin gratuit Better Font Awesome. Si vous avez sauté directement à cette partie de l'article, voici un lien vers comment installer un plugin WordPress si vous en avez besoin.
Une fois le plugin activé, vous aurez accès à des milliers d'icônes gratuites que vous pourrez utiliser n'importe où sur votre site WordPress avec un simple shortcode. Maintenant, ajoutons le shortcode de l'icône Info à notre infobulle.
Nous sommes sur le point de mettre le shortcode d'un plugin à l'intérieur du shortcode d'un autre plugin. Mais ne vous inquiétez pas, ils fonctionneront tous les deux toujours !
Retournez à la zone de description du champ de votre formulaire qui contient votre infobulle et remplacez simplement le texte affiché dans votre shortcode d'infobulle par ce shortcode :
[icon name="info"]
La zone de texte que vous devriez remplacer par le shortcode ci-dessus est mise en surbrillance ci-dessous :
Et voici à quoi devrait ressembler le code une fois que vous avez ajouté le shortcode de l'icône :
Alternativement, vous pouvez simplement copier et coller le shortcode ci-dessous dans votre zone de description et l'adapter à vos besoins.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]
Ensuite, enregistrez votre formulaire et vérifiez-le sur le frontend pour voir votre icône d'infobulle.
Excellent travail ! Maintenant, si vous souhaitez aller encore plus loin et placer l'icône d'infobulle au-dessus du champ à côté de l'étiquette, consultez notre tutoriel approfondi sur la façon d'ajouter des icônes aux formulaires WordPress.
Réflexions finales
C'est tout ! Vous savez maintenant comment ajouter des infobulles dans WordPress.
Si vous souhaitez modifier l'apparence des boutons de vos formulaires, lisez comment personnaliser les styles de boutons avec CSS. Ou si vous préférez, consultez notre guide sur comment styliser WPForms avec CSS Hero (sans codage).
Qu'attendez-vous ? Commencez dès aujourd'hui avec le meilleur plugin de formulaires WordPress.
Si cet article vous plaît, suivez-nous sur Facebook et Twitter pour plus de tutoriels WordPress gratuits.
Est-il possible d'ajouter plusieurs infobulles avec des messages différents ?
Merci
Bonjour !
Bien sûr, vous pouvez créer différentes infobulles pour différents champs, cependant, un champ ne peut avoir qu'une seule infobulle car une fois que vous la survolerez, une seule infobulle pourra s'afficher pour celui-ci.
J'espère que cela a du sens.
Passez une bonne journée 🙂
Comment ajouter une infobulle à une icône ou une image sur Wordpress ?
Bonjour Joshu !
Vous pouvez simplement envelopper une balise HTML d'image ou d'icône avec le shortcode d'infobulle conformément aux instructions fournies dans ce tutoriel.
J'espère que cela vous aidera.
Passez une bonne journée 🙂
Bonjour, merci pour l'astuce.
Je pense que le formulaire serait plus net si l'icône d'infobulle était positionnée à côté de l'étiquette du champ au lieu d'en bas de chaque champ, comme vous l'avez fait dans votre section de paramètres de formulaire avec l'infobulle de l'icône point d'interrogation. Si vous l'avez fait de cette façon, je suppose que vous êtes également d'accord que c'est mieux. Comment y parvenons-nous ?
Bonjour Chris !
Vous pouvez essayer de placer le shortcode d'infobulle dans le champ Étiquette. Je ne l'ai pas testé personnellement, mais vous pouvez essayer.
J'espère que cela vous aidera !
Passez une bonne journée 🙂
Cela fonctionne, mais ensuite tout le code et la description de l'infobulle apparaissent dans votre e-mail et peuvent être difficiles à lire
Bonjour Gareth.
Dans ce cas, vous pouvez essayer d'utiliser les balises intelligentes des champs dans les paramètres de notification au lieu de celle {tous_les_champs}.
Et si cela peut vous aider, nous avons un excellent tutoriel sur la façon d'utiliser les balises intelligentes dans l'e-mail de notification.
Lorsque vous utilisez des balises intelligentes, elles n'ajouteront pas automatiquement l'étiquette du champ, mais seulement sa valeur, vous devrez donc ajouter les étiquettes manuellement.
J'espère que cela vous aidera.
Passez une bonne journée 🙂
Bonjour, je veux ajouter une icône d'infobulle après l'étiquette, mais quand je mets le [shortcode d'infobulle] dans cette section, il le reconnaît juste comme du texte brut. Y a-t-il une solution de contournement ?
Salut Sina – Actuellement, le champ d'étiquette ne prend pas en charge les shortcodes, seul le champ de description prend en charge les shortcodes. Si vous en avez besoin dans le champ d'étiquette, notre équipe de support pourrait vous aider avec du code personnalisé. Si vous êtes un utilisateur de licence payante, vous pouvez créer un ticket de support ici.
Passez une bonne journée 🙂
Bonjour…
Puis-je utiliser cela pour les titres de colonnes dans WooCommerce ?
Merci.
Salut Octavio – Je m'excuse, mais nous ne prenons en charge aucune intégration avec WooCommerce, principalement parce qu'ils sont fortement intégrés à leurs propres systèmes de formulaires.
Si vous avez besoin que les formulaires fonctionnent dans WooCommerce, je vous suggère de contacter directement l'équipe Woo pour vous assurer de trouver une option qui s'intègre correctement à leur système.
Merci 🙂
Bonjour,
J'essaie d'ajouter les infobulles à mon site mais ça ne fonctionne pas. Shortcodes Ultimate n'a pas de shortcodes disponibles à moins que je ne cherche dans leur documentation. Est-ce que cela pourrait être la cause ?
Bonjour – Puis-je changer la couleur et la taille de l'icône de l'infobulle ? Quel code me faudrait-il pour cela ?
Bonjour Emma,
Bonne question ! Veuillez vous référer à ce guide de Shortcode Ultimate pour formater le texte.
J'espère que cela vous aide ! 🙂
Comment puis-je faire en sorte qu'une infobulle s'affiche si l'utilisateur n'a pas rempli un champ. Je sais qu'il existe déjà ce message, mais il est assez petit et beaucoup de gens sont confus lorsqu'ils remplissent le formulaire. Idéalement, j'aimerais qu'il clignote d'une manière ou d'une autre.
Salut Myur – Bien que nous n'ayons pas actuellement la possibilité d'afficher le message dans l'infobulle, si vous préférez, vous pouvez augmenter la taille de la police du message de validation en utilisant le CSS suivant :
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* Veuillez changer les valeurs selon votre préférence */ }Au cas où cela vous aiderait, vous pouvez consulter notre documentation ici pour ajouter du CSS personnalisé.
Vous pouvez également afficher un message obligatoire dans le placeholder du champ, comme montré dans cette capture d'écran.