Résumé IA
Souhaitez-vous ajouter des options d'images à vos formulaires ? WPForms facilite l'ajout d'images à vos champs à choix multiples, cases à cocher, éléments multiples et éléments de cases à cocher afin que vos utilisateurs puissent voir l'option ou l'élément que vous avez listé.
Ce tutoriel vous montrera comment ajouter des choix d'images à des champs existants ou nouveaux dans WPForms.
Configuration des choix d'images
Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.
Une fois le générateur de formulaires ouvert, vous pourrez ajouter des choix d'images à n'importe lequel des types de champs suivants :
- Choix multiples
- Cases à cocher
- Plusieurs articles
- Éléments de cases à cocher
De plus, vous pouvez ajouter des images aux champs nouveaux et existants de ces types de champs.
Pour notre exemple, nous voulons afficher des images pour les options d'articles dans un formulaire de commande. Pour ce faire, nous allons d'abord ajouter un champ Articles multiples à notre formulaire.
Maintenant que nous avons ajouté notre champ, la prochaine étape consiste à modifier l'étiquette du champ et à ajouter du texte pour les options disponibles. Comme nous utilisons un champ Articles multiples, nous devons également ajouter des prix pour chaque article.
Une fois cette configuration de base prête, nous sélectionnerons l’option Utiliser les choix d’images.
Dès que cette option est activée, un bouton Télécharger une image sera ajouté à chaque option. De plus, une image d'espace réservé s'affichera pour chaque option dans la zone de prévisualisation.
Ajout d'images
Pour ajouter une image à une option, cliquez sur le bouton Télécharger une image.
Cela ouvrira la médiathèque WordPress. À partir de là, vous pouvez sélectionner un fichier qui a déjà été ajouté à votre site ou télécharger une nouvelle image. Une fois que vous avez choisi l'image que vous souhaitez utiliser, cliquez sur le bouton Utiliser l'image.
Pour cet exemple, nous avons déjà modifié toutes les images pour qu'elles aient une taille de 150 par 150 pixels. Cela aidera nos options d'images à paraître plus uniformes et professionnelles.
Voici comment nos choix d'images apparaîtront à nos utilisateurs :
Personnalisation des options d'images
WPForms inclut également plusieurs options intégrées pour personnaliser vos choix d'images. Pour afficher ces options, ouvrez l'onglet Avancé dans les options de champ.
En plus des autres options de personnalisation disponibles pour le champ que vous utilisez, deux options sont ajoutées lorsque l'option Utiliser des choix d'images est sélectionnée : Style de choix d'image et Disposition des choix.
Style de choix d'image
Trois options sont disponibles pour le style des choix d'images : Moderne, Classique et Aucune.
Nous allons passer en revue chacune de ces options ci-dessous :
Style Moderne
L'option Moderne affichera les options sélectionnées dans une boîte ombrée, et ajoutera également une coche verte et blanche au centre de l'option sélectionnée.
Style Classique
L'option Classique ajoutera simplement une bordure épaisse gris foncé autour des options sélectionnées.
Aucun
Si vous préférez ne pas ajouter de style spécial, sélectionnez l'option Aucune. Cette option affichera des cases à cocher ou des boutons radio normaux à côté du texte de chaque option.
Disposition des choix
Pour tout champ où les choix d'images sont autorisés, vous aurez plusieurs options de disposition. Cela déterminera le nombre de colonnes utilisées pour afficher les choix dans ce champ.
Les options de Disposition des choix incluent Une colonne, Deux colonnes, Trois colonnes et En ligne.
Par défaut, l'option En ligne sera sélectionnée lorsque l'option Ajouter des choix d'images est activée. Cela placera automatiquement autant de choix que possible dans chaque ligne.
C'est tout ! Vous pouvez maintenant ajouter des images à n'importe quel champ Choix multiples, Cases à cocher, Articles multiples et Articles de case à cocher dans vos formulaires. Si vous avez utilisé un champ Articles multiples et que vous prévoyez d'accepter des paiements, n'oubliez pas de configurer une intégration avec Stripe, PayPal, Authorize.Net, ou Square.
Ensuite, souhaitez-vous tester vos formulaires avant de les ajouter à votre site ? Assurez-vous de consulter notre liste de contrôle avant le lancement pour tous nos conseils et recommandations avant de lancer un formulaire.