Résumé IA
La plupart des formulaires WordPress sont en texte brut, ce qui convient parfaitement à un formulaire de contact de base. Mais une petite touche visuelle peut faire une grande différence, qu'il s'agisse de votre logo en haut, d'une photo de produit ou de choix de réponses basés sur des images, plus faciles à parcourir que des options en texte brut.
Ajouter une image à un formulaire WordPress est plus facile que vous ne le pensez, et vous n'aurez pas besoin d'écrire de code. Je vais vous guider tout au long du processus, de l'installation du plugin à l'insertion de votre image et à la publication du formulaire finalisé.
Créez votre formulaire d'image WordPress maintenant ! 🙂
Comment ajouter une image à WordPress
Le processus d'ajout d'images à WordPress varie en fonction de l'endroit où vous insérez une image. Dans ce tutoriel, nous vous montrerons certains des scénarios les plus courants pour télécharger des images dans WordPress.
Étape 1 : Installer le plugin WPForms Pro
WPForms est le plugin de formulaire le plus convivial pour les débutants sur WordPress, avec plus de 2 100 modèles de formulaires et un constructeur par glisser-déposer, vous pouvez donc commencer à partir d'un modèle prêt à l'emploi au lieu d'une page vierge.
Ce que j'aime le plus chez WPForms pour cela, c'est le champ Contenu. Il vous offre un petit éditeur visuel directement dans le constructeur de formulaires, vous pouvez donc télécharger une image, ajouter un titre ou insérer un logo sans quitter la page ni toucher au HTML.
Le champ Contenu est une fonctionnalité payante, vous aurez donc besoin d'une licence WPForms Pro pour l'utiliser, ce qui débloque également la bibliothèque complète de modèles ainsi que les paiements, les sondages et les autres modules complémentaires dont vous aurez probablement besoin à mesure que vos formulaires se développent.
Pour commencer, procurez-vous la licence WPForms Pro. Une fois que vous l'avez achetée, installez et activez le plugin sur votre site. Si vous n'avez jamais ajouté de plugin auparavant, notre guide sur l'installation de WPForms vous guidera.
Passez à WPForms Pro maintenant !
Étape 2 : Créez votre formulaire
Avec WPForms actif, il est temps de construire le formulaire qui contiendra votre image. Depuis votre tableau de bord WordPress, allez dans WPForms » Ajouter un nouveau pour ouvrir le constructeur de formulaires.
Sur l'écran de configuration, donnez un nom à votre formulaire et choisissez un modèle pour commencer. J'utiliserai le modèle Formulaire de contact simple, alors survolez-le et cliquez sur Utiliser le modèle.
Le modèle se charge dans le constructeur avec tous les champs standard déjà en place, prêts à être personnalisés.
Étape 3 : Insérez une image dans votre formulaire
Pour ajouter votre image, vous utiliserez le champ Contenu, qui vous permet de placer des images, des titres et du texte formaté n'importe où dans votre formulaire. Si vous souhaitez un aperçu complet de ce qu'il peut faire, la documentation du champ Contenu le couvre.
Trouvez le champ Contenu dans le panneau de gauche et faites-le glisser sur votre formulaire. J'ajoute un logo en haut, donc je vais déposer le champ au-dessus des autres champs.
Cliquez sur le champ que vous venez d'ajouter pour ouvrir ses Options de champ à gauche, où vous trouverez un petit éditeur visuel pour ajouter du contenu.
Juste au-dessus de l'éditeur, cliquez sur le bouton Ajouter un média.
Ensuite, cliquez sur Sélectionner des fichiers pour télécharger une image depuis votre ordinateur, ou choisissez-en une qui se trouve déjà dans votre médiathèque.
Une fois votre image téléchargée, vous pouvez remplir les détails tels que le texte alternatif et le titre. Lorsque vous êtes prêt, cliquez sur Insérer dans le formulaire en bas.
L'image est ajoutée au champ, bien qu'elle ne s'affiche pas immédiatement dans l'aperçu du formulaire. Cliquez sur le bouton Mettre à jour l'aperçu sous l'éditeur pour la faire apparaître.
Voici à quoi ressemble le formulaire une fois l'image en place et l'aperçu actualisé.
Si vous souhaitez plus de contrôle sur l'apparence de votre contenu, cliquez sur le bouton Développer l'éditeur en bas à droite.
De là, vous pouvez modifier l’alignement, ajouter une liste à puces et formater le texte comme vous le feriez dans une publication.
Quand tout semble correct, cliquez sur Enregistrer en haut à droite du générateur. Ce même champ Contenu est ce que vous utiliseriez pour ajouter une image d’en-tête ou un logo, il couvre donc la plupart des touches visuelles dont un formulaire a besoin.
Étape 4 : Publiez votre formulaire
Une fois votre image en place, la dernière étape consiste à intégrer le formulaire sur votre site. WPForms dispose d’un assistant d’intégration intégré qui s’en charge en quelques clics.
Commencez par cliquer sur le bouton Intégrer en haut du constructeur de formulaire.
Une fenêtre apparaît vous demandant où vous souhaitez placer le formulaire. Je vais cliquer sur Créer une nouvelle page pour le placer sur une nouvelle page.
Donnez un nom à la nouvelle page, puis cliquez sur C’est parti.
WPForms vous place dans l’éditeur WordPress avec votre formulaire déjà intégré. Lorsque vous êtes satisfait, cliquez sur Publier pour le mettre en ligne.
Votre formulaire est maintenant en ligne, avec votre image affichée exactement là où vous l’avez placée.
Plus de façons d'ajouter des images à vos formulaires
Le champ Contenu couvre la plupart des situations, mais WPForms vous offre d’autres moyens de travailler avec des images. Ceux-ci sont facultatifs, alors utilisez celui qui correspond le mieux à ce que vous construisez.
Ajouter des choix d'images aux champs de formulaire
Cela fonctionne avec des champs tels que Choix multiples, Cases à cocher et Articles multiples, et c’est une fonctionnalité gratuite, vous pouvez donc l’essayer même avec WPForms Lite.
Vous pouvez voir la liste complète des champs pris en charge dans le guide des choix d’images. Pour l’activer, ouvrez les Options du champ du champ et activez le bouton Utiliser les choix d’images.
Vous obtiendrez alors un bouton Télécharger une image pour chaque choix. Cliquez dessus pour ajouter une image à cette option.
Répétez cela pour le reste de vos choix, et une simple liste se transforme en un ensemble d’options visuelles que vos visiteurs peuvent sélectionner.
Si vous préférez utiliser des icônes plutôt que vos propres images, activez plutôt le bouton Utiliser les choix d’icônes et choisissez parmi la bibliothèque d’icônes intégrée.
À titre d’exemple spécifique, voici comment ajouter une image à côté des boutons radio dans vos formulaires.
Ajouter des images avec du code HTML
Si vous préférez travailler avec du code, ou si vous souhaitez insérer une image déjà hébergée en ligne, le champ HTML est une autre option. Vous aurez besoin de l’URL de l’image pour celle-ci.
Si votre image n’est pas encore en ligne, téléchargez-la d’abord. Allez dans Média » Ajouter un nouveau fichier média dans votre tableau de bord.
Cliquez sur Sélectionner des fichiers et choisissez l’image sur votre ordinateur.
Une fois le téléchargement terminé, cliquez sur Copier l’URL dans le presse-papiers pour obtenir le lien.
Ouvrez maintenant le formulaire que vous souhaitez modifier, ou créez-en un nouveau. Pour modifier un formulaire existant, allez dans WPForms » Tous les formulaires.
Sélectionnez le formulaire souhaité sur la page Aperçu des formulaires.
Dans le générateur, faites glisser le champ HTML sur votre formulaire.
Cliquez sur le champ pour ouvrir ses Options du champ sur la gauche.
Vous pouvez ajouter une étiquette pour vous aider à identifier le champ plus tard, bien qu'elle ne s'affiche pas sur le front-end. Pour afficher votre image, déposez-la dans une balise image dans la boîte Code. Le format ressemble à <img src="[URL du fichier de votre image]">, avec votre propre URL à la place du placeholder.
Contrairement au champ Contenu, le champ HTML ne sera pas prévisualisé dans le constructeur. Pour vérifier votre travail, cliquez sur le bouton Aperçu en haut pour voir le formulaire entier.
À partir de là, publiez le formulaire de la même manière que je vous l'ai montré précédemment.
FAQ sur l'ajout d'images aux formulaires WordPress
L'ajout d'images à vos formulaires soulève quelques questions courantes. Voici des réponses rapides à celles que j'entends le plus souvent.
Pouvez-vous ajouter une image à un formulaire WordPress gratuitement ?
Oui, en partie. Les choix d'images pour les champs sélectionnables fonctionnent dans le plugin gratuit WPForms Lite. Le champ Contenu, qui est le moyen le plus simple d'ajouter un logo ou une image autonome, est une fonctionnalité payante qui commence avec le plan Basic.
Comment puis-je permettre aux visiteurs de télécharger leurs propres images sur mon formulaire ?
C'est un champ différent appelé Téléchargement de fichiers, qui permet aux gens de joindre des images ou des documents lors de la soumission. Vous pouvez voir comment cela fonctionne sur la page de fonctionnalités des téléchargements de fichiers.
Comment ajouter un logo à mon formulaire ?
Utilisez le champ Contenu en haut de votre formulaire et téléchargez votre logo comme image. Pour un tutoriel axé uniquement sur cela, suivez notre guide sur la façon d'ajouter une image d'en-tête ou un logo à un formulaire WordPress.
Ensuite, laissez les visiteurs soumettre leurs propres images
Maintenant que vous pouvez ajouter des images à vos formulaires, vous voudrez peut-être inverser la tendance et permettre à vos visiteurs de télécharger leurs propres images vers WordPress via un formulaire. C'est tout aussi simple à configurer.
Vous souhaitez continuer à affiner l'apparence de vos formulaires ? Consultez notre guide sur la mise en forme de WPForms à l'aide de l'éditeur de blocs, qui vous montre comment concevoir vos formulaires sans aucun code.
Créez votre formulaire d'image 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.
Bonjour.
Quand je veux mettre une image dans mon formulaire, elle ne s’adapte pas à la taille du formulaire, elle est toujours trop grande.
Comment puis-je la rendre plus « responsive » ?
Merci !
Bonjour Guillaume - Je m’excuse pour ce problème ! Pour rendre les images responsives, vous pourriez ajouter des tailles d’image en % et ajuster la taille, comme
Cependant, afin de nous assurer de répondre à votre question le plus complètement possible, pourriez-vous s’il vous plaît contacter notre équipe de support avec plus de détails sur ce que vous souhaitez faire ?
Merci ! :)
Comment les utilisateurs peuvent-ils télécharger leur image dans le formulaire ? depuis leur ordinateur ou en utilisant une webcam
Bonjour Sohaib – Bonne question ! Vous pouvez d’abord stocker l’image sur le stockage de votre ordinateur (y compris celles capturées avec une webcam), puis suivre les instructions de l’étape 2 en vous référant à cet article.
J'espère que cela vous aide ! 🙂
Comment mes CLIENTS peuvent-ils publier leurs photos sur mon site Web via un formulaire que j’ai créé, par exemple pour vendre une voiture ou un équipement ?
Bonjour Carl ! Le moyen le plus simple de permettre à vos clients de créer leurs propres annonces serait via notre module complémentaire Post Submissions, en particulier avec notre éditeur de champ de texte enrichi récemment publié 🙂
Avec ces deux éléments combinés, vos utilisateurs pourront à peu près concevoir leur annonce comme ils le souhaitent, soumettre le formulaire, et elle sera ajoutée directement à votre site (ou en attente de votre approbation).
J'espère que cela vous aidera à clarifier 🙂 Si vous avez d'autres questions à ce sujet, veuillez nous contacter si vous avez un abonnement actif. Si ce n'est pas le cas, n'hésitez pas à nous poser des questions sur nos forums de support.
Comment puis-je changer le logo de recherche du widget de formulaire ?
Nous avons également un tutoriel utile avec des détails sur la façon d'ajouter du code personnalisé comme celui-ci à votre site : https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (pour une option particulièrement facile, je recommande l'option du plugin Code Snippets).
Quand vous aurez un moment, pourriez-vous contacter notre équipe ici si vous avez un abonnement actif.
Si ce n'est pas le cas, n'hésitez pas à nous contacter sur nos forums de support.
Merci !
J'ai ajouté l'image dans mon formulaire en utilisant le HTML, mais elle ne s'affiche pas dans l'e-mail.
J'ai ajouté quelques images dans l'en-tête afin de pouvoir imprimer l'entrée du formulaire avec les logos en haut, mais sans succès.
Salut Aman !
Merci de nous avoir contactés !
La raison pour laquelle nous ne transmettons pas les champs HTML, les champs de division de section ou les descriptions (les deux derniers étant essentiellement des champs HTML) est que ces zones autorisent le HTML complet, ce qui signifie qu'il sera courant qu'elles contiennent des éléments qui casseront les notifications par e-mail ou causeront des problèmes de livraison.
Cependant, nous avons un filtre qui vous permettra d'inclure des champs non-input dans vos e-mails. Voici notre tutoriel avec tous les détails, ainsi que le code dont vous auriez besoin : https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Nous avons également un tutoriel utile avec des détails sur la façon d'ajouter du code personnalisé comme celui-ci à votre site : https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (pour une option particulièrement facile, je recommande l'option du plugin Code Snippets).
Ou si vous préférez éviter le PHP, vous pourriez envisager de modifier le corps de vos notifications pour inclure le texte dont vous avez besoin. Vous pourriez le faire en construisant le contenu de la notification d'une manière plus personnalisée en utilisant du texte normal, du HTML et des balises intelligentes.
Cette option offre probablement le plus de contrôle, car vous pouvez choisir exactement quels détails vous souhaitez inclure dans votre notification.
Je m'excuse si ce n'est pas tout à fait ce que vous recherchiez, mais j'espère que l'une de ces idées pourrait fonctionner pour vous. Pourriez-vous s'il vous plaît me faire savoir si vous avez d'autres questions ?
Merci !
Un utilisateur peut-il utiliser l'appareil photo de son appareil pour prendre une photo et la télécharger en une seule étape, par opposition à prendre d'abord une photo, la stocker sur son ordinateur, puis télécharger la photo. Idéalement, j'aimerais que l'utilisateur télécharge une photo depuis une bibliothèque s'il a une photo existante, mais s'il préfère, il peut simplement prendre une photo depuis l'appareil photo et la télécharger. Existe-t-il un moyen de faire cela dans WPForms ?
Salut Anil ! Le champ de téléchargement de fichiers, lorsqu'il est accédé par un appareil mobile, peut offrir aux utilisateurs la possibilité de télécharger une image directement depuis leur appareil photo. Cependant, cela dépend si cet appareil mobile a été configuré pour permettre au navigateur d'accéder à son appareil photo. Si ce n'est pas le cas, l'option ne sera pas disponible.
J'espère que cela vous aidera à clarifier 🙂 Si vous avez d'autres questions à ce sujet, veuillez nous contacter si vous avez un abonnement actif. Si ce n'est pas le cas, n'hésitez pas à nous poser des questions sur nos forums de support.
Bonjour,
WP-Forms gère-t-il les données d'inscription de l'utilisateur de la même manière que WooCommerce ? Si un utilisateur finalise un achat dans ma boutique e-commerce et crée un compte, ses données sont-elles dupliquées, une fois dans WooCommerce, une fois dans l'enregistrement WP Forms ?
Salut Ann, notre module complémentaire d'inscription utilisateur ne fournit pas d'interface pour gérer ou modifier les utilisateurs existants et se concentre uniquement sur le processus de création de compte. Cependant, nous ne prenons en charge aucune intégration avec WooCommerce.
Cela dit, afin de nous assurer de répondre à votre question aussi complètement que possible et d'éviter toute confusion, pourriez-vous s'il vous plaît contacter notre équipe ?
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.
WPForms prend-il en charge les médias gib ? Ou l'intégration d'un shortcode d'un plugin de visualisation 3D ?
Salut Melissa – Nous serions heureux de vous aider ! Quand vous aurez un moment, contactez-nous via le support afin que nous puissions vous aider.
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 limité et gratuit sur le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Comment ajouter une image sur le bouton de soumission wpforms dans WordPress ?
Jusqu'à présent, vous n'avez montré que comment ajouter des icônes. Mais j'ai une image personnalisée que j'aimerais ajouter.
Salut Aser – Pour ajouter une image au bouton de soumission, vous pouvez envisager d'utiliser le CSS suivant :
.wpforms-submit-container .wpforms-submit { background-image: url('image_url'); background-size: cover; padding-left: 40px; }Et si cela peut vous aider, voici un tutoriel détaillé sur la façon d'ajouter du CSS personnalisé comme celui-ci à votre site.
Mon code ressemble à ceci :
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
Cependant, l'URL n'est pas prise en compte, ce qui signifie que l'image ne s'affiche pas. Je ne suis pas sûr si vous comprenez ce que je veux, mais je veux qu'une image .png soit visible à gauche du texte « Soumettre » dans le bouton de soumission.
J'ai trouvé ce code de votre tutoriel qui affiche des icônes Fantastique et il fait presque ce que je veux, mais je ne peux pas ajouter d'URL à mon image de choix.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode pour l'icône, assurez-vous de conserver les guillemets et la barre oblique */ margin-right: 10px !important; /* Distance entre l'icône et le texte du bouton */ }
Salut Aser – Nous serions heureux de vous aider ! Quand vous aurez un moment, contactez-nous via le support afin que nous puissions vous aider.
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 limité et gratuit sur le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Comment aligner une image à gauche d'un formulaire ?
Salut JM – Si vous souhaitez afficher une image à gauche et les champs à droite, vous pouvez envisager d'utiliser le champ de mise en page.
Bonjour, j'ai une question pour savoir si je peux acheter votre module pour créer le formulaire dont j'ai besoin. La première ligne contient 6 boutons radio au-dessus desquels se trouve une image (donc 6 images) mais qui ne sont pas des « étiquettes ». Lorsque vous cliquez sur une image, une fenêtre contextuelle s'ouvre affichant l'image plus grande et un texte explicatif. Est-il possible de faire cela avec WP-Forms ? Merci d'avance.
Salut Françoise – Nous serions heureux de vous aider ! Quand vous aurez un moment, veuillez soumettre une demande de support afin que nous puissions vous aider.