Résumé IA
Voulez-vous ajouter une image à votre site WordPress ?
Les images sont un élément essentiel de tout contenu en ligne. Elles améliorent l'attrait visuel de votre site web et rendent votre contenu plus lisible.
Dans ce tutoriel, je vais vous guider à travers le processus d'ajout d'une image à différentes parties de votre site WordPress.
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.
Voici des instructions écrites si vous préférez lire en même temps.
Créez votre formulaire d'image WordPress maintenant
Scénario n°1 : Ajouter une image à un article WordPress
Si vous créez un nouvel article ou une nouvelle page dans WordPress, il y a de fortes chances que vous deviez ajouter quelques images pour que votre contenu se démarque.
Pour ajouter une image à votre article, vous devrez d'abord accéder à l'éditeur d'articles WordPress en naviguant vers Articles » Tous les articles depuis le menu d'administration.
Cela vous mènera immédiatement à l'éditeur Gutenberg de WordPress. Une fois dans l'éditeur, cliquez simplement sur le bouton '+' pour ouvrir la liste des blocs disponibles, puis sélectionnez le bloc Image.
Lorsque le bloc Image est inséré dans la zone de contenu, vous verrez les options pour télécharger une nouvelle image depuis votre ordinateur, sélectionner une image déjà téléchargée depuis la médiathèque, ou insérer une image depuis une URL.
Si vous ajoutez une nouvelle image qui n'existe pas encore dans la médiathèque, cliquez sur le bouton Télécharger.
Ensuite, sélectionnez l'image que vous souhaitez télécharger depuis votre ordinateur et elle devrait apparaître immédiatement dans votre article.
C'est aussi simple que ça d'ajouter une image à un article de blog WordPress !
Le processus d'insertion d'images dans les pages est similaire. Vous devrez simplement suivre le même processus après avoir cliqué sur l'option de menu Ajouter une nouvelle page depuis la barre latérale d'administration de votre WordPress.
Scénario n°2 : Ajouter une image à un formulaire WordPress
Si vous souhaitez ajouter une image à un formulaire WordPress, vous devrez d'abord installer un plugin de formulaire avec une fonctionnalité de téléchargement d'images facile.
WPForms est l'un des rares plugins de formulaire pour WordPress qui permettent d'insérer très facilement une image n'importe où dans votre formulaire.
Installer WPForms
Si vous n'avez pas encore WPForms installé sur votre site, nous vous recommandons d'obtenir la licence WPForms Pro.
Pour obtenir de l'aide sur l'installation du plugin, vous pouvez consulter notre guide d'installation de WPForms.
Une fois que vous avez installé le plugin, passez à l'étape suivante où nous vous montrons comment créer un formulaire.
Créer un nouveau formulaire
Sur votre tableau de bord WordPress, allez dans WPForms » Ajouter nouveau.
La fenêtre de configuration du formulaire s'ouvrira dans quelques secondes. Ici, vous pouvez nommer votre formulaire et choisir parmi un modèle prédéfini pour commencer rapidement.
Nous utiliserons le formulaire de contact simple pour ce tutoriel en plaçant le curseur sur celui-ci et en cliquant sur Utiliser le modèle.
Le modèle de formulaire se chargera maintenant sur votre écran avec tous les champs nécessaires déjà ajoutés.
Nous pouvons personnaliser ce formulaire pour ajouter une image assez facilement, comme montré dans l'étape suivante.
Insérer une image dans votre formulaire WordPress
Pour insérer une image, vous devrez ajouter le champ Contenu à votre formulaire. Faites simplement glisser et déposez le champ Contenu du volet de gauche vers la droite.
Nous allons ajouter un logo en haut du formulaire, nous placerons donc le champ Contenu en haut.
Après avoir ajouté le champ, cliquez dessus pour ouvrir ses Options de champ dans le volet de gauche, ce qui vous permet d'utiliser l'éditeur visuel pour insérer du contenu.
Ensuite, vous devrez cliquer sur le bouton Ajouter un média juste au-dessus de l'éditeur visuel.
Maintenant, cliquez sur le bouton Sélectionner des fichiers.
Vous pouvez maintenant sélectionner n'importe quel fichier image à télécharger et à insérer dans votre formulaire. Une fois téléchargé, vous pouvez entrer des détails comme le texte alternatif et le titre. Ensuite, cliquez sur le bouton Insérer dans le formulaire en bas.
Cela insérera l'image dans votre formulaire. L'image n'apparaîtra pas immédiatement dans le formulaire, même si vous pouvez la voir dans l'éditeur à gauche.
Vous devrez simplement appuyer sur le bouton Mettre à jour l'aperçu sous l'éditeur visuel pour voir l'image dans le formulaire.
Voici à quoi cela devrait ressembler après avoir ajouté l'image à l'aide du champ Contenu et mis à jour l'aperçu.
Vous pouvez également accéder à des options de mise en forme supplémentaires en cliquant sur le bouton Développer l'éditeur en bas à droite de l'éditeur.
Par exemple, vous pouvez ajuster l'alignement de votre contenu, ajouter une liste à puces pour le texte, et plus encore.
Excellent ! Maintenant que vous avez ajouté une image à votre formulaire, appuyez sur le bouton Enregistrer en haut à droite du constructeur de formulaire.
Tout ce qui reste maintenant est de publier ce formulaire sur votre site afin que vos visiteurs puissent y accéder.
Publier votre formulaire en ligne
WPForms est livré avec un assistant d'intégration facile qui rend la publication un processus rapide et simple.
Commencez par cliquer sur le bouton Intégrer en haut du constructeur de formulaire.
Vous verrez alors apparaître une fenêtre modale vous demandant où vous souhaitez intégrer votre formulaire. Nous sélectionnerons Créer une nouvelle page pour intégrer un formulaire dans une nouvelle page.
Après cela, entrez un nom pour votre page et cliquez sur C'est parti.
L'assistant vous mènera à l'éditeur WordPress, où vous trouverez votre formulaire intégré.
Lorsque vous êtes prêt, appuyez sur le bouton Publier en haut à droite pour mettre votre formulaire en ligne.
Et voilà ! Vous avez maintenant créé avec succès un formulaire avec une image ajoutée.
Il y a beaucoup plus de choses que vous pouvez faire avec WPForms en ce qui concerne l'ajout de graphiques. Nous allons vous montrer quelques astuces bonus ensuite.
Bonus : Autres façons d'utiliser des images dans les formulaires WordPress
La flexibilité de WPForms rend beaucoup de choses intéressantes possibles en ce qui concerne l'ajout de médias à vos formulaires.
Nous vous montrerons quelques astuces qui peuvent vous aider à améliorer l'apparence de vos formulaires, ainsi que des méthodes alternatives pour insérer des images.
Ajouter des images à des champs sélectionnés
Dans l'exemple ci-dessus, nous vous avons montré comment insérer une image comme élément de contenu dans votre formulaire.
Mais saviez-vous que vous pouvez également utiliser des images pour accompagner des éléments sélectionnables dans des champs tels que les cases à cocher et les éléments multiples ?
Pour utiliser des images pour les options dans un champ Éléments multiples, vous pouvez cliquer sur le bouton bascule Utiliser les choix d'images dans ses Options de champ.
Après avoir activé les Choix d'images, vous pourrez télécharger des images pour chaque choix de votre champ. Cliquez sur le bouton Télécharger une image pour ajouter facilement n'importe quelle image.
Vous pouvez répéter cela pour chaque choix afin de transformer un formulaire simple en quelque chose de plus attrayant visuellement.
En fait, vous n'êtes pas seulement limité au téléchargement d'images personnalisées pour les choix. WPForms vous donne également accès à une immense bibliothèque d'icônes préchargées que vous pouvez ajouter à vos choix.
Pour utiliser des icônes pour vos choix, cliquez sur le bouton bascule Utiliser les choix d'icônes.
Essayez. C'est facile à faire et vos visiteurs apprécieront davantage de remplir vos formulaires lorsqu'il y aura des éléments visuels pour attirer leur attention !
Ajouter des images avec du code HTML
Plus tôt, nous vous avons montré comment insérer rapidement une image dans votre formulaire WordPress en utilisant le champ Contenu.
Cependant, si vous préférez travailler directement avec le code HTML, vous pouvez également insérer des images en utilisant une méthode plus complexe techniquement.
Pour que cela fonctionne, il est nécessaire que l'image que vous souhaitez ajouter à votre formulaire soit déjà téléchargée dans votre médiathèque et que son URL vous soit connue.
Sinon, vous pouvez en télécharger une et récupérer l'URL maintenant. Depuis votre tableau de bord WordPress, cliquez sur Média » Ajouter un nouveau média.
Cela ouvrira la zone de téléchargement de la médiathèque. Cliquez sur le bouton Sélectionner des fichiers pour continuer.
Maintenant, choisissez le fichier que vous souhaitez télécharger depuis votre ordinateur. Lorsque le fichier aura fini de se télécharger, vous pourrez voir son URL.
Cliquez sur le bouton Copier l'URL dans le presse-papiers pour obtenir le lien.
Maintenant, ouvrez un formulaire existant auquel vous souhaitez ajouter l'image ou créez-en un nouveau comme nous l'avons montré plus tôt dans ce tutoriel.
Vous pouvez modifier un formulaire existant en allant dans WPForms » Tous les formulaires.
Sélectionnez maintenant le formulaire dans lequel vous souhaitez insérer votre image sur la page Aperçu des formulaires.
Dans le constructeur de formulaire, faites glisser et déposez le champ HTML dans la zone de droite où se trouve votre formulaire.
Après avoir fait cela, cliquez sur le champ HTML que vous venez de placer dans votre formulaire pour ouvrir ses Options de champ sur la gauche.
Vous pouvez utiliser l'option Libellé pour donner un nom au champ HTML afin de pouvoir l'identifier plus facilement dans le formulaire, mais cela ne sera pas visible sur le frontend.
Enfin, l'image que vous souhaitez insérer devra être ajoutée dans une balise img dans la boîte Code. Vous pouvez utiliser ce format pour ajouter votre image : <img src="[insérez l'URL du fichier de votre image]">
Notez que, contrairement au champ Contenu, le champ HTML ne peut pas charger le code pour mettre à jour l’aperçu dans le générateur de formulaires. Mais vous pouvez utiliser le bouton Aperçu en haut pour voir un aperçu de votre formulaire complet.
Ceci est utile pour vérifier si le code HTML que vous avez saisi fonctionne correctement.
Vous pouvez ensuite publier le formulaire en suivant les mêmes étapes que celles que nous avons soulignées ci-dessus.
Et voilà ! Vous êtes maintenant prêt à ajouter une image à votre site WordPress, que ce soit pour un article ou un formulaire.
Créez votre formulaire d'image WordPress maintenant
Ensuite, accepter les images soumises par les utilisateurs
WPForms permet également à vos visiteurs de télécharger leurs propres images sur WordPress, alors n’hésitez pas à consulter cette fonctionnalité.
Vous cherchez d’autres moyens de concevoir et de styliser vos formulaires ? Consultez cet article sur la stylisation de WPForms avec l’éditeur de blocs. Ce guide vous montrera comment concevoir votre formulaire comme un pro en utilisant des contrôles simples et sans aucun code !
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 été utile, suivez-nous sur Facebook et X 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.