Vous souhaitez ajouter une image à un formulaire WordPress ? L’ajout de graphiques à un formulaire peut aider à ajouter votre image de marque et à rendre le formulaire plus intéressant.
Dans ce tutoriel, nous verrons le processus d’ajout d’une image à un formulaire. Vers la fin, nous expliquerons également comment utiliser des images au lieu de questions dans votre formulaire.
Comment ajouter une image à un formulaire
WPForms est le générateur de formulaires le plus simple pour WordPress. Il vous permet d’ajouter facilement des images n’importe où sur vos formulaires.
Par exemple, vous pourriez :
Il existe plusieurs façons d’ajouter des images aux formulaires dans WordPress. Regardons d’abord la méthode la plus simple : ajouter une image à un formulaire en utilisant HTML.
Comment ajouter une image à vos formulaires WordPress
Voici des instructions écrites si vous préférez :
Regardons le processus d’ajout d’une image à un formulaire avec du HTML de base. C’est vraiment facile et rapide avec le générateur de glisser-déposer WPForms.
Voici les étapes que nous suivrons :
- Installer le plugin WPForms
- Téléchargez votre image sur WordPress
- Ajoutez votre image à votre formulaire WordPress
- Publiez votre formulaire
Si vous souhaitez ajouter des images aux questions à choix multiples, nous vous aiderons à la fin de l’article.
Étape 1 : Installez le plugin WPForms
Tout d’abord, vous devez installer et activer le plugin WPForms. Voici un guide étape par étape sur la façon d’installer un plugin WordPress si vous avez besoin d’aide.
Vous avez maintenant 2 options :
- Si vous avez déjà un formulaire auquel vous souhaitez ajouter une image, vous pouvez continuer et passer à l’étape suivante.
- Si vous n’avez pas encore de formulaires dans WPForms, c’est le moment idéal pour en créer un. Vous pouvez créer un formulaire de contact simple en moins de 5 minutes.
Une fois que vous avez fini de créer votre formulaire, revenez à ce tutoriel.
Étape 2 : téléchargez votre image sur WordPress
Le moyen le plus simple d’ajouter une image à WordPress est de la télécharger dans la médiathèque. De cette façon, il sera très facile de le retrouver lorsque vous aurez besoin de copier le lien.
Pour commencer, ouvrez votre tableau de bord WordPress. Puis clique Moyens de communication Sur le côté gauche.
Allez-y maintenant et cliquez sur le Ajouter un nouveau bouton.
Faites glisser votre fichier image dans la boîte ou cliquez sur Sélectionnez les fichiers si vous préférez localiser l’image sur votre ordinateur.
Une fois votre image téléchargée, allez-y et cliquez dessus pour voir les détails. Cliquez sur le bouton intitulé Copier le lien pour copier l’URL de l’image dans votre presse-papiers.
Vous avez maintenant l’URL de l’image dans votre presse-papiers prête à être collée dans votre formulaire.
Restez dans le tableau de bord WordPress pour la partie suivante.
Étape 3 : ajoutez votre image à votre formulaire WordPress
Ensuite, nous allons ouvrir le formulaire auquel nous voulons ajouter l’image.
Dans la barre de navigation à gauche du panneau, cliquez sur WPForms. Puis clique Éditer sous le formulaire que vous avez créé à l’étape 1.
Lorsque le générateur de formulaire s’ouvre, faites glisser un champ HTML du panneau de gauche vers le panneau de droite et déposez-le à l’endroit où vous souhaitez que l’image apparaisse :
Cliquez maintenant une fois sur le champ pour ouvrir les paramètres sur le côté gauche.
Avez-vous remarqué le Code champ à gauche ? Écrivez simplement le code HTML pour intégrer votre image ici.
Vous pouvez copier cet exemple. Mais rappelez-vous : après src =, vous voudrez coller l’URL de l’image que vous avez téléchargée à la dernière étape :
Cliquez maintenant Économiser en haut de votre formulaire.
Fini! Il ne nous reste plus qu’à publier le formulaire.
Étape 4 : Publiez votre formulaire
WPForms vous permet d’ajouter rapidement vos formulaires n’importe où sur votre site Web, notamment :
Dans cet exemple, nous allons le faire de la manière la plus simple. Utilisons le Intégrer pour créer automatiquement une page pour le formulaire.
Allez-y, cliquez Intégrer maintenant.
Ensuite, cliquons Créer une nouvelle page.
Et enfin, saisissez un nom pour votre page et cliquez sur Allons-y.
WPForms créera automatiquement une nouvelle page et y intégrera votre formulaire. Vous verrez également l’image dans l’aperçu ici.
Cliquez publier pour que le formulaire soit actif sur votre site Web.
Et c’est ça! Votre formulaire est en ligne.
Voici à quoi ressemble notre image sur notre formulaire fini.
Vous pouvez éditer le formulaire et modifier le code HTML si vous devez redimensionner l’image. Vous pouvez également ajouter des classes CSS pour styliser votre image si vous le souhaitez.
Comment ajouter des images aux champs de formulaire
Avant de sortir, examinons rapidement une autre fonctionnalité intéressante de WPForms. Vous pouvez ajouter des images comme réponses aux questions à choix multiples afin que vos visiteurs puissent cliquer dessus pour prendre une décision.
L’utilisation d’images dans les questions est parfaite pour les formulaires de commande simples, voyons donc rapidement comment procéder.
Dans ce formulaire de commande de t-shirt, nous avons un champ à choix multiples avec 3 options. Vérifions le Utiliser les options d’image case à cocher ci-dessous.
Nous pouvons maintenant ajouter une image pour chaque option dans notre champ à choix multiples. Vous devrez cliquer sur le Télécharger une image texte pour télécharger chaque image.
Et voici à quoi ressemble le formulaire dans le générateur de formulaire après avoir fait ceci :
Excellent! Lorsque vous avez terminé, cliquez sur le bleu publier et jetez un oeil à votre formulaire. Lorsque vous cliquez sur une image pour la sélectionner, vous verrez une coche verte au centre :
L’utilisation des options d’image est un excellent moyen de rendre les sondages et les sondages plus intéressants, ou de montrer à vos visiteurs différents designs ou couleurs sur un bon de commande.
Étape suivante : styliser vos formulaires WordPress
Excellent! Vous connaissez maintenant le moyen facile d’ajouter une image à un formulaire WordPress. WPForms permet également à vos visiteurs de télécharger facilement leurs propres images sur WordPress, alors assurez-vous de vérifier ci-dessous.
Vous cherchez d’autres façons de concevoir et de styliser vos formulaires ? Consultez cet article sur les magnifiques modèles de formulaires de contact que vous pouvez voler. L’article contient de nombreux exemples CSS que vous pouvez copier et coller dans WordPress Customizer pour concevoir vos formulaires.
Prêt à créer votre formulaire ? Commencez dès aujourd’hui avec le plugin de création de formulaire WordPress le plus simple. WPForms Pro comprend plus de 100 modèles de formulaires 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 guides et tutoriels WordPress gratuits.
