Voulez-vous 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 parfaites pour ajouter des informations supplémentaires sur un champ sans l'encombrer.
Dans cet article, nous allons vous montrer comment ajouter des infobulles dans WordPress.
Dans cet article
- Qu'est-ce qu'une infobulle dans WordPress ?
- Installer une infobulle WordPress sans plugin
- Étape 1. Créer un formulaire WordPress
- Étape 2. Installer le plugin Shortcodes Ultimate
- Étape 3 : Obtenir le shortcode de l'infobulle
- Étape 4 : Ajouter votre infobulle à votre formulaire
- Étape 5 : Personnalisation de l'infobulle
- Étape 5 : Transformez votre info-bulle en icône (facultatif)
- Réflexions finales
Créez votre formulaire WordPress maintenant
Qu'est-ce qu'une infobulle dans WordPress ?
Les infobulles sont des conseils, des termes de glossaire ou des messages qui s'affichent lorsque votre visiteur survole ou touche (sur les appareils mobiles) un élément de votre site web WordPress. Dans vos formulaires WordPress, les infobulles 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 formulaire. Contrairement à une description de champ classique, les infobulles sont cachées par défaut. Elles n'apparaissent que lorsque l'utilisateur souhaite obtenir plus de détails sur un certain champ en survolant la description du champ.
L'ajout d'une infobulle est une excellente idée si vous souhaitez fournir plus de détails sur un certain champ sans créer de distractions inutiles sur votre formulaire.
Maintenant que vous savez ce qu'est une infobulle, lisez la suite pour savoir comment l'ajouter à votre site.
Installer une infobulle WordPress sans plugin
Oui, il est possible d'installer une infobulle WordPress sans plugin. Cependant, si vous ne souhaitez pas utiliser un plugin d'infobulle pour ajouter facilement une infobulle à 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 gagner du temps et de l'argent en utilisant un plugin de bulles 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 et extrêmement utile vous donnera plus de 50 shortcodes à utiliser pour ajouter facilement diverses fonctions à votre site, y compris le shortcode tooltip. Nous allons maintenant vous montrer comment ajouter ce plugin WordPress de bulles d'aide.
Comment ajouter des infobulles dans WordPress
Jetons un coup d'œil au guide étape par étape sur la façon d'ajouter des infobulles dans WordPress.
Étape 1. Créer un formulaire WordPress
La première chose à faire est d'installer et d'activer WPForms sur votre site. Si vous avez besoin d'aide, consultez ce guide sur l 'installation d'un plugin WordPress.
Ensuite, vous devrez créer un formulaire simple dans WordPress.
Bravo pour la création de votre formulaire. Nous y reviendrons dans une étape ultérieure.
Étape 2. Installer 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 un nouveau, recherchez Shortcodes Ultimate et cliquez sur Installer maintenant.
Une fois le plugin activé, vous pouvez commencer à l'utiliser.
Étape 3 : Obtenir le shortcode de l'infobulle
Trouvez le plugin Shortcodes Ultimate sur le côté gauche de votre tableau de bord WordPress et cliquez sur Available shortcodes . Faites défiler la page et sélectionnez le bouton Tooltip.
Sur la page suivante, mettez en évidence et copiez le shortcode :
Étape 4 : Ajouter votre infobulle à votre formulaire
Maintenant que vous avez votre shortcode tooltip, il est temps de l'ajouter à votre formulaire de contact simple.
Retournez dans votre formulaire en cliquant sur WPForms " All Forms et sélectionnez Edit sous le formulaire où vous souhaitez ajouter votre infobulle.
Une fois que vous êtes sur le formulaire, cliquez sur le champ auquel vous souhaitez ajouter votre info-bulle et collez votre shortcode d'info-bulle dans le champ de description.
Une fois que vous aurez enregistré votre formulaire et que vous l'aurez visualisé à partir du frontend, il affichera désormais l'infobulle :
Étape 5 : Personnalisation de l'infobulle
Vous pouvez également modifier le code pour afficher votre propre texte. Voici un exemple avec les modifications apportées en gras :
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="C'est la zone de contenu qui sera affichée dans la bulle d'aide lorsque l'utilisateur la survolera !" behavior="hover" close="no" class=""]C'est le texte qui sera toujours affiché et qui affichera le contenu de la bulled'aide lorsque l'utilisateur la survolera![/su_tooltip]
Vous pouvez également modifier un certain nombre d'options dans les paramètres de votre infobulle, que vous pouvez trouver en faisant défiler jusqu'au bas de la page Shortcodes " Available shortcodes ", comme par exemple :
- Style + Couleurs
- Position
- Taille
- Comportement
- Et plus encore
L'étape suivante est facultative, mais elle vous permettra de personnaliser davantage votre info-bulle et de rendre vos formulaires encore plus propres et exempts de toute distraction.
Étape 5 : Transformez votre info-bulle en icône (facultatif)
À moins que vous n'indiquiez spécifiquement et n'invitiez les gens à survoler votre info-bulle dans votre code court d'info-bulle, vos visiteurs ne se rendront peut-être même pas compte qu'il y a un contenu supplémentaire qui attend d'être affiché dans cette info-bulle ! Un bon moyen de s'assurer que vos lecteurs survolent l'infobulle est d'en faire une icône au lieu d'utiliser simplement du texte.
Par exemple, de nombreuses personnes ajoutent une icône d'information "i" et lorsque l'utilisateur survole cette icône, l'infobulle s'affiche. C'est pas mal comme ça ?
Pour ce faire, il faut d'abord télécharger et activer le plugin gratuit Better Font Awesome. Si vous avez sauté directement à cette partie de l'article, voici un lien pour savoir 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 info-bulle.
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 !
Retournez dans la zone de description du champ de votre formulaire qui contient votre info-bulle et remplacez simplement le texte affiché dans votre shortcode d'info-bulle par ce shortcode :
[icon name="info"]
La zone de texte que vous devez remplacer par le shortcode ci-dessus est mise en évidence ci-dessous :
Voici à quoi doit ressembler le code une fois que vous avez ajouté le shortcode de l'icône :
Vous pouvez également copier et coller le shortcode ci-dessous dans votre boîte de description et l'adapter à votre convenance.
[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.
Bon travail ! Maintenant, si vous souhaitez aller encore plus loin et placer l'icône de l'infobulle au-dessus du champ à côté de l'étiquette, consultez notre tutoriel approfondi sur l'ajout d'icônes dans les formulaires WordPress.
Réflexions finales
Voilà, c'est fait ! Vous savez maintenant comment ajouter des infobulles dans WordPress.
Si vous voulez changer l'apparence des boutons de vos formulaires, lisez comment personnaliser le style des boutons avec CSS. Ou si vous préférez, consultez notre guide sur la façon de styliser WPForms avec CSS Hero (aucun codage requis).
Qu'est-ce que vous attendez ? Commencez dès aujourd'hui à utiliser le meilleur plugin de formulaires WordPress.
Si vous avez aimé cet article, suivez-nous sur Facebook et Twitter pour d'autres tutoriels gratuits sur WordPress.
Est-il possible d'ajouter plusieurs infobulles avec des messages différents ?
Merci de votre compréhension.
Bonjour à tous !
Bien sûr, vous pouvez créer différentes infobulles pour différents champs, mais un champ ne peut avoir qu'une seule infobulle, car une fois qu'il est survolé, une seule infobulle peut être affichée pour lui.
J'espère que cela a du sens.
Je vous souhaite une bonne lecture 🙂 .
Comment ajouter une infobulle à une icône ou à une image sur Wordpress ?
Bonjour Joshu !
Vous pouvez simplement couvrir une image ou une icône HTML avec le shortcode Tooltip en suivant les instructions fournies dans ce tutoriel.
J'espère que cela vous aidera.
Je vous souhaite une bonne journée 🙂 .
Bonjour, merci pour l'astuce.
Je pense que le formulaire serait plus soigné si l'icône de l'infobulle était placée à côté de l'étiquette du champ plutôt qu'en bas de chaque champ, comme vous l'avez fait dans la section des paramètres du formulaire avec l'icône de l'infobulle en forme de point d'interrogation. Si vous l'avez fait de cette façon, je suppose que vous êtes également d'accord pour dire que c'est mieux. Comment pouvons-nous obtenir un effet similaire ?
Bonjour Chris !
Vous pouvez essayer de mettre le shortcode Tooltip dans le champ Label. Je ne l'ai pas testé personnellement, mais vous pouvez essayer.
J'espère que cela vous aidera !
Je vous souhaite une bonne journée de travail 🙂 .
Cela fonctionne, mais tout le code et la description de l'infobulle apparaissent dans votre courrier électronique et peuvent être difficiles à lire.
Bonjour Gareth.
Dans ce cas, vous pouvez essayer d'utiliser les Smart Tags des champs dans les paramètres de notification au lieu de {all_fields}.
Et si cela peut vous aider, nous avons un excellent tutoriel sur la façon d'utiliser les Smart Tags dans l'email de notification.
Lorsque vous utilisez des étiquettes intelligentes, l'étiquette du champ n'est pas automatiquement ajoutée, mais seulement sa valeur, vous devrez donc ajouter les étiquettes manuellement.
J'espère que cela vous aidera.
Je vous souhaite une bonne journée 🙂 .
Bonjour, je souhaite ajouter une icône d'infobulle après l'étiquette mais lorsque je mets le [tooltip shortcode] sur cette section, il la reconnaît comme du texte brut. y a-t-il une solution ?
Hey Sina - Actuellement, le champ de l'étiquette ne prend pas en charge le shortcode, seul le champ de la description le prend en charge. Si vous avez besoin d'un code court dans le champ de l'étiquette, notre équipe d'assistance pourrait vous aider avec un code personnalisé. Si vous êtes un utilisateur de licence payante, vous pouvez créer un ticket d'assistance ici.
Je vous souhaite une bonne journée 🙂 .
Bonjour...
Est-ce que je peux l'utiliser pour les titres de colonnes dans woocommerce ?
Merci de votre réponse.
Hey Octavio - Je m'excuse, mais nous ne supportons aucune intégration avec WooCommerce, principalement parce qu'ils sont fortement intégrés avec leurs propres systèmes de formulaires.
Si vous avez besoin que les formulaires fonctionnent avec WooCommerce, je vous suggère de contacter directement l'équipe de Woo pour être sûr de trouver une option qui s'intègre correctement avec leur système.
Merci 🙂 .
Bonjour,
J'essaie d'ajouter les infobulles à mon site mais cela ne fonctionne pas. Le shortcodes ultimate n'a pas de shortcodes disponibles à moins que je ne cherche dans leur documentation. Est-ce que c'est la cause ?
Bonjour - Puis-je changer la couleur et la taille de l'info-bulle de l'icône ? De quel code ai-je besoin 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 aidera 🙂 .
Comment puis-je faire apparaître une info-bulle si l'utilisateur n'a pas rempli un champ. Je sais que ce message existe déjà, mais il est assez petit et beaucoup de gens sont désorientés lorsqu'ils remplissent le formulaire. L'idéal serait de le faire clignoter d'une manière ou d'une autre.
Hey Myur - Bien que nous n'ayons pas actuellement l'option 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; /* Please change the values as per your preference */
}
Si cela peut vous aider, vous pouvez consulter notre document ici pour ajouter des CSS personnalisés.
Vous pouvez également afficher un message obligatoire dans l'espace réservé au champ, comme le montre cette capture d'écran.