Vous êtes-vous déjà demandé si vous pouviez permettre aux utilisateurs de sélectionner une image dans votre formulaire WordPress au lieu d’un simple texte ? Avec WPForms, vous pouvez facilement ajouter une image à côté des boutons d’option sur les formulaires WordPress, afin que les utilisateurs puissent sélectionner rapidement la bonne option qu’ils souhaitent.
Dans cet article, nous allons vous montrer comment ajouter une image à côté des boutons d’option dans les formulaires WordPress.
Si vous préférez des instructions écrites, continuez à lire ci-dessous.
Étape 1 : créez un formulaire WordPress simple
La première chose que vous devrez faire est d’installer et d’activer le plugin WPForms. Pour plus de détails, consultez ce guide étape par étape sur la façon d’installer un plugin dans WordPress.
Ensuite, vous devrez créer un formulaire. Pour obtenir de l’aide sur cette étape, consultez notre tutoriel sur la création d’un formulaire de contact simple comme exemple pour commencer.
Étape 2 : personnalisez votre formulaire WordPress
Le formulaire de contact simple est livré avec les champs de formulaire par défaut suivants :
- nom
- Courrier électronique
- Commentaire ou message
Vous pouvez ajouter des champs supplémentaires à votre formulaire en les faisant glisser du panneau de gauche vers le panneau de droite.
Cliquez ensuite sur le champ pour apporter des modifications. Vous pouvez également cliquer et faire glisser un champ de formulaire pour réorganiser la commande sur votre formulaire de contact.
Vous pouvez ajouter des images à côté du Choix multiple Oui Divers éléments champs de formulaire, qui sont des boutons radio, ainsi que Cases à cocher champ de formulaire.
La différence entre un bouton radio et une case à cocher est que les boutons radio permettent uniquement aux visiteurs du site de sélectionner une option, tandis que les visiteurs du site peuvent choisir plusieurs options dans une liste de cases à cocher.
Dans notre exemple, nous allons ajouter un Choix multiple champ de formulaire à notre formulaire de contact simple et modifiez l’étiquette et les options.
Il est maintenant temps d’ajouter les images à côté de chaque bouton d’option.
Étape 3 : ajouter une image aux boutons d’option
Pour ajouter une image aux boutons radio de votre formulaire, commencez par cliquer sur le Utiliser les options d’image case à cocher dans l’éditeur de formulaire.
Lorsque vous cliquez sur cette case, vous verrez un Télécharger une image Un bouton apparaît pour chaque case d’option de votre formulaire.
Il y aura également un Marqueur de position dans le volet de prévisualisation où chaque image sera affichée une fois chargée.
Pour ajouter une image, cliquez sur le Télécharger une image bouton. Cela ouvrira votre médiathèque WordPress afin que vous puissiez choisir l’image que vous souhaitez afficher.
Noter: Les images ne seront pas recadrées ou redimensionnées lorsque vous les ajouterez à votre formulaire. Pour de meilleurs résultats, nous recommandons que toutes les options d’image soient de la même taille et de 250 × 250 pixels ou moins.
Voici à quoi ressembleront nos options d’image :
Étape 4 : personnalisez vos options d’image
WPForms facilite la personnalisation de vos options d’image grâce aux options de personnalisation intégrées.
Pour voir ces options, cliquez sur Options avancées.
Deux options de personnalisation sont ajoutées à la section Options avancées lorsque vous activez les options d’image dans vos formulaires WordPress :
- Style de choix d’image : choisissez parmi Moderne, Classique ou Aucun. Moderne affiche les images sélectionnées dans une zone ombrée et ajoute une coche verte au centre. Classique affiche les images sélectionnées avec une bordure grise épaisse. L’option Aucun n’ajoutera aucun style spécial ; à la place, vous verrez des boutons radio traditionnels à côté de chaque image parmi lesquels les visiteurs du site pourront choisir.
- Conception au choix : choisissez le nombre de colonnes utilisées pour afficher vos options d’image. Vous pouvez choisir parmi une, deux ou trois colonnes. Vous avez également la possibilité de choisir Inline, qui place autant d’options que possible dans chaque ligne avant d’en ajouter une autre. Inline est la mise en page par défaut de choix pour tous les formulaires WordPress qui affichent des options d’image.
Vous pouvez également sélectionner le Choix aléatoires case à cocher si vous souhaitez randomiser l’ordre des options d’image chaque fois qu’un nouvel utilisateur visite votre site Web.
Étape 5 : Activer les rapports d’enquête
Si vous souhaitez voir combien de personnes choisissent chaque option d’image que vous proposez, vous pouvez activer les rapports d’enquête pour vos formulaires en installant et en activant le plug-in Surveys and Polls.
Pour ce faire, rendez-vous sur WPForms » Ajouter et retrouvez l’étiquetage Plugin Sondages et Sondages.
Cliquer Installer le plugin et après Activer.
WPForms vous permet de collecter les résultats de l’enquête pour les champs de formulaire suivants :
Pour activer les rapports d’enquête pour tous les formulaires sur votre site, aller à Réglages » Enquêtes et sondages et sélectionnez le Activer les rapports d’enquête caisse.
Si vous souhaitez uniquement collecter des données sur ce formulaire en particulier, allez dans l’éditeur de formulaire, faites défiler jusqu’à la Réglages avancés rubrique et cliquez sur Activer les rapports d’enquête.
Une fois que les gens commencent à remplir votre formulaire, avec des images à côté des boutons radio, vous pouvez générer des rapports d’enquête dans votre tableau de bord WordPress pour voir les résultats.
Pour générer un rapport d’enquête, accédez à WPForms » Tous les chemins et survolez votre formulaire pour afficher les options. Puis clique Résultats du test.
Une fois que vous aurez cliqué dessus, vous verrez les résultats de votre formulaire :
En conclusion
Et voila! Vous savez maintenant comment ajouter une image à côté des boutons d’option dans les formulaires WordPress.
Si vous souhaitez gagner de l’argent en ligne, vous pouvez consulter notre tutoriel sur la façon de créer un formulaire de commande simple dans WordPress et d’ajouter des images à côté de chaque article que vous avez à vendre.
Alors qu’est-ce que tu attends? Commencez dès aujourd’hui avec le plugin de formulaires WordPress le plus puissant.
Et n’oubliez pas, si vous aimez cet article, suivez-nous sur Facebook Oui Twitter.
