Résumé IA
Vous êtes-vous déjà demandé si vous pouviez permettre aux utilisateurs de sélectionner une image dans votre formulaire WordPress au lieu de simplement du texte ?
Soyons réalistes. Nous sommes tous naturellement attirés par les éléments interactifs et visuels. Un formulaire ne contenant que du texte est fonctionnellement correct, mais un formulaire avec des images sélectionnables se traduit par une expérience utilisateur BIEN meilleure.
Et vous savez quoi ? Ajouter des images aux boutons radio dans un formulaire WordPress est en fait assez facile à faire, comme je vais vous le montrer dans cet article.
Comment ajouter une image à côté des boutons radio dans les formulaires WordPress
WPForms rend très simple l'ajout d'images ou d'icônes à vos boutons radio à choix multiples ou à vos champs de cases à cocher. Voici les étapes que vous devrez suivre :
Si vous préférez des instructions écrites, continuez à lire ci-dessous.
Étape 1 : Créer un formulaire WordPress simple
La première chose à faire est d'installer et d'activer le plugin WPForms. Pour plus de détails, consultez ce guide étape par étape sur comment installer un plugin dans WordPress.
Après avoir installé WPForms avec succès sur votre site, vous pouvez commencer à créer votre formulaire en ouvrant votre tableau de bord WordPress et en naviguant vers WPForms » Ajouter un nouveau.
Après cela, vous pouvez commencer par donner un nom à votre formulaire, puis choisir un modèle. Pour cet exemple, j'utiliserai le modèle de formulaire de contact simple, qui est l'un des plus de 2 100 modèles de formulaires WordPress disponibles.
Dès que vous sélectionnez un modèle, il se chargera dans le constructeur de formulaires.
Vous pouvez également consulter notre tutoriel sur comment créer un formulaire de contact simple à titre d'exemple pour commencer.
Étape 2 : Personnaliser votre formulaire WordPress
Le modèle de formulaire de contact simple est livré avec les champs de formulaire par défaut suivants :
- Nom
- Commentaire ou message
Dans notre exemple, nous ajouterons un champ de formulaire Choix multiples à notre formulaire de contact simple et modifierons l'étiquette et les choix pour demander pourquoi l'utilisateur nous contacte.
Sous la fonctionnalité Limites et restrictions de saisie, activez l'option Activer la limite totale de saisies.
Ensuite, cliquez sur le champ pour apporter des modifications. Vous pouvez également cliquer sur un champ de formulaire et le faire glisser pour réorganiser l'ordre des champs dans votre formulaire de contact.
Vous pouvez ajouter des images à côté des champs de formulaire Choix multiples et Éléments multiples, qui sont des boutons radio, ainsi que des champs de formulaire Cases à cocher et Éléments de case à cocher.
Il est maintenant temps d'ajouter les images à côté de chaque bouton radio.
Étape 3 : Ajouter des images aux boutons radio
Pour ajouter une image aux boutons radio de votre formulaire, ouvrez les options de champ pour votre champ de choix multiples, puis activez le commutateur Utiliser les choix d'images.
Après avoir activé les choix d'images, vous pouvez télécharger une image pour chaque choix de votre champ.
Pour ajouter une image, cliquez sur le bouton Télécharger une image. Cela ouvrira votre médiathèque WordPress afin que vous puissiez télécharger une nouvelle image sur WordPress ou en choisir une parmi celles qui existent déjà.
Ajouter des icônes aux choix de boutons radio
Selon votre formulaire, il peut être plus judicieux d'utiliser des icônes que des images. Vous pouvez facilement activer cette option de la même manière que vous l'avez fait pour les images en sélectionnant Utiliser des icônes dans le panneau Options du champ.
WPForms utilise une vaste bibliothèque d'icônes prêtes à l'emploi, vous n'avez donc pas besoin de les télécharger. Vous pouvez simplement sélectionner l'icône dont vous avez besoin parmi les options disponibles.
Pour plus de détails, consultez notre guide sur l'utilisation des icônes dans WPForms.
Étape 4 : Personnaliser vos choix d'images
WPForms simplifie la personnalisation de vos choix d'images grâce aux options de personnalisation intégrées. Tout d'abord, choisissez votre Style de choix d'image préféré.
Le style Moderne affiche les images sélectionnées dans une boîte ombrée et ajoute une coche verte au centre. Le style Classique affiche les images sélectionnées avec une bordure grise épaisse.
L'option Aucune n'ajoutera aucun style spécial ; à la place, vous verrez des boutons radio traditionnels à côté de chaque image que les visiteurs du site pourront choisir. Vous pourrez ensuite voir plus d'options en cliquant sur l'onglet Avancé.
Important, assurez-vous de sélectionner votre Disposition des choix préférée. Vous pouvez choisir parmi 1, 2 ou 3 colonnes.
Vous avez également la possibilité de choisir En ligne, ce qui place autant d'options que possible dans chaque ligne avant d'en ajouter une autre. En ligne est la Disposition des choix par défaut pour tous les formulaires WordPress affichant des choix d'images.
Vous pouvez également sélectionner l'option Aléatoire des choix si vous souhaitez randomiser l'ordre des choix d'images à chaque fois qu'un nouvel utilisateur visite votre site web.
Étape 5 : Activer le rapport d'enquête
Si vous souhaitez savoir combien de personnes choisissent chaque image que vous proposez, vous pouvez activer le reporting d'enquête pour vos formulaires en installant et activant le module complémentaire Enquêtes et Sondages.
Pour ce faire, allez dans WPForms » Modules complémentaires et trouvez celui intitulé Module complémentaire Enquêtes et Sondages. Cliquez sur Installer le module complémentaire puis sur Activer.
WPForms vous permet de collecter les résultats d'enquête pour les champs de formulaire suivants :
- Texte sur une seule ligne
- Texte de paragraphe
- Liste déroulante
- Cases à cocher
- Choix multiples
- Évaluation
- Échelle de Likert
- Net Promoter Score (NPS)
Pour activer le reporting d'enquête pour tous les champs compatibles d'un formulaire, allez dans Paramètres » Enquêtes et Sondages dans le constructeur de formulaire et sélectionnez l'option Activer le reporting d'enquête.
Si vous souhaitez uniquement collecter des données pour un champ particulier, ouvrez son panneau Options du champ et cliquez sur l'onglet Avancé. Ensuite, activez Activer le reporting d'enquête.
Une fois que les gens commenceront à remplir votre formulaire, avec des images à côté des boutons radio, vous pourrez générer des rapports d'enquête dans le tableau de bord WordPress pour voir les résultats.
Pour générer un rapport d'enquête, allez dans WPForms » Toutes les formes et survolez votre formulaire pour afficher les options. Cliquez ensuite sur Résultats de l'enquête.
Avec WPForms, vos données sont désormais générées automatiquement en de superbes rapports faciles à comprendre pour le cerveau humain.
De plus, WPForms vous permet également de choisir entre les styles Moderne et Classique pour les choix de champs radio, qui affichent les images dans des styles légèrement différents.
J'ai rassemblé quelques questions courantes que notre équipe a reçues récemment concernant les champs radio et les images. Lisez-les si vous avez d'autres questions sur ce sujet.
Pourquoi devrais-je ajouter des images à côté des boutons radio dans les formulaires WordPress ?
Les images servent d'excellents aides visuels dans les formulaires WordPress ; elles sont beaucoup plus facilement remarquables et attirent immédiatement le regard du visiteur.
En conséquence, les formulaires qui comportent des éléments visuels sont plus faciles à remplir car il faut moins de temps pour les lire et les comprendre, ce qui entraîne un engagement utilisateur plus élevé et une meilleure expérience globale.
Ai-je besoin d'une expérience en codage pour ajouter des images à mon formulaire ?
Si vous utilisez un plugin convivial comme WPForms, vous n'avez pas besoin d'une seule ligne de code pour ajouter des images à vos formulaires.
Ajouter des images à votre formulaire avec WPForms, c'est comme télécharger des images dans votre médiathèque WordPress. Tout le monde peut le faire !
L'ajout d'images ralentira-t-il mon site web ?
Bien que l'ajout d'images affecte la vitesse de chargement des pages, cela dépend beaucoup de votre site web particulier. Si vous faites attention à la quantité d'images que vous ajoutez et si vous vous assurez qu'elles sont toutes optimisées, il n'y aura aucun impact négatif sur la vitesse de votre page.
Puis-je personnaliser l'apparence des boutons radio et des images ?
Oui, vous pouvez personnaliser l'apparence des boutons radio et des images dans WPForms. Par exemple, vous pouvez choisir parmi différents agencements de champs tels que des dispositions en ligne, à 1 colonne, à 2 colonnes et à 3 colonnes.
De plus, WPForms vous permet également de choisir entre les styles moderne et classique pour les choix de champs radio, qui affichent les images dans des styles légèrement différents.
Les images à côté des boutons radio affectent-elles l'accessibilité ?
Les images accompagnant les boutons radio peuvent affecter l'accessibilité si vous ignorez certaines considérations comme le contraste des couleurs entre votre arrière-plan et les images.
Je recommande d'ajouter des textes alternatifs descriptifs à vos images et d'effectuer une vérification visuelle de base pour vous assurer que les images sont immédiatement visibles avec un contraste élevé.
S'il vous faut un effort pour voir l'image clairement, c'est un signe que vous avez besoin de couleurs plus contrastées pour assurer une accessibilité idéale.
Ensuite, Gagnez plus d'argent en ligne
Et voilà ! Vous savez maintenant comment ajouter une image à côté des boutons radio dans les formulaires WordPress.
Si vous souhaitez gagner de l'argent en ligne, vous pouvez consulter notre tutoriel sur comment créer un formulaire de commande simple dans WordPress et ajouter des images à côté de chaque article que vous avez à vendre.
Créez votre formulaire WordPress maintenant
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
l'image radio ne s'affiche pas dans les champs de paiement... elle fonctionne bien dans les « champs standard » mais pas dans les champs de paiement.
une idée pourquoi ??
Bonjour Raju,
Désolé pour cela ! Oui, cela est actuellement empêché intentionnellement en raison de la manière dont nos intégrations de paiement gèrent ces étiquettes (le HTML causera des problèmes lorsque ces données seront envoyées à Stripe ou PayPal). C'est à l'étude par notre équipe, et nos développeurs travaillent sur une solution. Je n'ai pas de date d'échéance, mais nous espérons y remédier bientôt !
Au cas où cela vous aiderait, des images peuvent toujours être ajoutées à chaque option d'élément avec un peu de CSS personnalisé. Cela nécessite un style CSS spécifique au formulaire, mais si vous souhaitez contacter notre équipe de support, nous pouvons vous aider à y parvenir 🙂
Est-ce que « Choix d'images pour WPForms » est une fonctionnalité de base du formulaire ?
Mon site contient plusieurs galeries d'images immuables pour un utilisateur. Il y a entre 5 et 30 images sur un formulaire et 50 formulaires (galeries). Je veux que l'utilisateur sélectionne une image sur un formulaire puis passe au formulaire suivant ; sélectionne une image et ainsi de suite. Chaque sélection d'image correspond à un paragraphe de texte que je souhaite fournir à l'utilisateur dans un rapport. Cela peut-il être fait avec WPForms ? Avec seulement des ajouts de code mineurs ?
Bonjour Richard,
Je m'excuse, mais je ne suis pas sûr de bien comprendre ce que vous cherchez à faire. Quand vous aurez un moment, veuillez contacter notre support avec quelques détails supplémentaires ?
Merci ! :)
C'est une excellente fonctionnalité, cependant les styles moderne et classique sont très mal conçus. En classique, le cadre gris est très difficile à voir et en moderne, la coche est sur l'image et souvent difficile à voir, elle affiche une icône de coche noire sur de nombreux téléphones, ce qui la rend encore plus difficile à voir et la mise en gras du texte déplace parfois les champs lorsqu'ils sont sur mobile…
Gardez-le simple et faites un cadre coloré en gras qui ne change pas la largeur des champs.
Salut Martin – Merci pour vos commentaires et suggestions ! Je les ai notés dans notre suivi afin que l'équipe de développement puisse les prendre en compte lors de l'élaboration de notre feuille de route pour les futures mises à jour. En attendant, si vous le souhaitez, vous pouvez contacter notre équipe de support pour obtenir de l'aide et ils pourront vous aider avec du code CSS personnalisé pour que cela ressemble à ce que vous désirez.
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support. Sinon, nous offrons un support gratuit limité dans le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Bonjour,
J'ai utilisé le choix d'images avec des cases à cocher. Cela fonctionne bien en mode bureau et tablette, mais pas sur mobile. Toute la section des cases à cocher avec toutes les images et cases à cocher disparaît à partir du point d'arrêt 600px vers le bas. J'ai du CSS personnalisé, j'ai pensé que c'était peut-être mon CSS qui causait les problèmes et je l'ai supprimé, mais sans succès.
J'utilise la version gratuite de WPFrom.
Une idée ?
Bonjour Daniel,
Dans ce cas, je vous recommande d'utiliser la classe CSS pour mobile comme indiqué dans ce guide
J'espère que cela vous aide ! 🙂