{"id":85977,"date":"2021-12-10T04:23:22","date_gmt":"2021-12-10T04:23:22","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/"},"modified":"2021-12-10T04:23:22","modified_gmt":"2021-12-10T04:23:22","slug":"comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/","title":{"rendered":"Comment ajouter une image \u00e0 c\u00f4t\u00e9 des boutons d&#8217;option dans les formulaires WordPress"},"content":{"rendered":"<p>Vous \u00eates-vous d\u00e9j\u00e0 demand\u00e9 si vous pouviez permettre aux utilisateurs de s\u00e9lectionner une image dans votre formulaire WordPress au lieu d&#8217;un simple texte ?  Avec WPForms, vous pouvez facilement ajouter une image \u00e0 c\u00f4t\u00e9 des boutons d&#8217;option sur les formulaires WordPress, afin que les utilisateurs puissent s\u00e9lectionner rapidement la bonne option qu&#8217;ils souhaitent.<\/p>\n<p>Dans cet article, nous allons vous montrer comment ajouter une image \u00e0 c\u00f4t\u00e9 des boutons d&#8217;option dans les formulaires WordPress.<\/p>\n<p>Si vous pr\u00e9f\u00e9rez des instructions \u00e9crites, continuez \u00e0 lire ci-dessous.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_1_creez_un_formulaire_WordPress_simple\"><\/span>\u00c9tape 1 : cr\u00e9ez un formulaire WordPress simple<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La premi\u00e8re chose que vous devrez faire est d&#8217;installer et d&#8217;activer le plugin WPForms.  Pour plus de d\u00e9tails, consultez ce guide \u00e9tape par \u00e9tape sur la fa\u00e7on d&#8217;installer un plugin dans WordPress.<\/p>\n<p>Ensuite, vous devrez cr\u00e9er un formulaire.  Pour obtenir de l&#8217;aide sur cette \u00e9tape, consultez notre tutoriel sur la cr\u00e9ation d&#8217;un formulaire de contact simple comme exemple pour commencer.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-218831\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635123039_919_%C2%A1NUEVO-Como-crear-una-pagina-de-destino-en-WordPress-Easy.png\" alt=\"Formulaire de contact simplifi\u00e9\" width=\"562\" height=\"372\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_2_personnalisez_votre_formulaire_WordPress\"><\/span>\u00c9tape 2 : personnalisez votre formulaire WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le formulaire de contact simple est livr\u00e9 avec les champs de formulaire par d\u00e9faut suivants\u00a0:<\/p>\n<ul>\n<li>nom<\/li>\n<li>Courrier \u00e9lectronique<\/li>\n<li>Commentaire ou message<\/li>\n<\/ul>\n<p>Vous pouvez ajouter des champs suppl\u00e9mentaires \u00e0 votre formulaire en les faisant glisser du panneau de gauche vers le panneau de droite.<\/p>\n<p>Cliquez ensuite sur le champ pour apporter des modifications.  Vous pouvez \u00e9galement cliquer et faire glisser un champ de formulaire pour r\u00e9organiser la commande sur votre formulaire de contact.<\/p>\n<p>Vous pouvez ajouter des images \u00e0 c\u00f4t\u00e9 du <strong>Choix multiple<\/strong> Oui <strong>Divers \u00e9l\u00e9ments<\/strong> champs de formulaire, qui sont des boutons radio, ainsi que <strong>Cases \u00e0 cocher<\/strong> champ de formulaire.<\/p>\n<p>La diff\u00e9rence entre un bouton radio et une case \u00e0 cocher est que les boutons radio permettent uniquement aux visiteurs du site de s\u00e9lectionner une option, tandis que les visiteurs du site peuvent choisir plusieurs options dans une liste de cases \u00e0 cocher.<\/p>\n<p>Dans notre exemple, nous allons ajouter un <strong>Choix multiple<\/strong> champ de formulaire \u00e0 notre formulaire de contact simple et modifiez l&#8217;\u00e9tiquette et les options.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253691\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Champ de formulaire \u00e0 choix multiples\" width=\"562\" height=\"245\"><\/p>\n<p>Il est maintenant temps d&#8217;ajouter les images \u00e0 c\u00f4t\u00e9 de chaque bouton d&#8217;option.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_3_ajouter_une_image_aux_boutons_doption\"><\/span>\u00c9tape 3 : ajouter une image aux boutons d&#8217;option<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour ajouter une image aux boutons radio de votre formulaire, commencez par cliquer sur le <strong>Utiliser les options d&#8217;image<\/strong> case \u00e0 cocher dans l&#8217;\u00e9diteur de formulaire.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253690\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901625_87_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Case \u00e0 cocher des options d'image\" width=\"562\" height=\"311\"><\/p>\n<p>Lorsque vous cliquez sur cette case, vous verrez un <strong>T\u00e9l\u00e9charger une image<\/strong> Un bouton appara\u00eet pour chaque case d&#8217;option de votre formulaire.<\/p>\n<p>Il y aura \u00e9galement un <strong>Marqueur de position<\/strong> dans le volet de pr\u00e9visualisation o\u00f9 chaque image sera affich\u00e9e une fois charg\u00e9e.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253695\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901625_284_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"T\u00e9l\u00e9charger une image\" width=\"562\" height=\"304\"><\/p>\n<p>Pour ajouter une image, cliquez sur le <strong>T\u00e9l\u00e9charger une image<\/strong> bouton.  Cela ouvrira votre m\u00e9diath\u00e8que WordPress afin que vous puissiez choisir l&#8217;image que vous souhaitez afficher.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253696\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_268_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Utiliser l'image\" width=\"562\" height=\"485\"><\/p>\n<p><strong>Noter:<\/strong> Les images ne seront pas recadr\u00e9es ou redimensionn\u00e9es lorsque vous les ajouterez \u00e0 votre formulaire.  Pour de meilleurs r\u00e9sultats, nous recommandons que toutes les options d&#8217;image soient de la m\u00eame taille et de 250 \u00d7 250 pixels ou moins.<\/p>\n<p>Voici \u00e0 quoi ressembleront nos options d&#8217;image\u00a0:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253689\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_323_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Aper\u00e7u de l'option d'image\" width=\"562\" height=\"234\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_4_personnalisez_vos_options_dimage\"><\/span>\u00c9tape 4 : personnalisez vos options d&#8217;image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WPForms facilite la personnalisation de vos options d&#8217;image gr\u00e2ce aux options de personnalisation int\u00e9gr\u00e9es.<\/p>\n<p>Pour voir ces options, cliquez sur <strong>Options avanc\u00e9es<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253697\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_318_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Options avanc\u00e9es\" width=\"562\" height=\"207\"><\/p>\n<p>Deux options de personnalisation sont ajout\u00e9es \u00e0 la section Options avanc\u00e9es lorsque vous activez les options d&#8217;image dans vos formulaires WordPress :<\/p>\n<ol>\n<li><strong>Style de choix d&#8217;image\u00a0:<\/strong> choisissez parmi Moderne, Classique ou Aucun.  Moderne affiche les images s\u00e9lectionn\u00e9es dans une zone ombr\u00e9e et ajoute une coche verte au centre.  Classique affiche les images s\u00e9lectionn\u00e9es avec une bordure grise \u00e9paisse.  L&#8217;option Aucun n&#8217;ajoutera aucun style sp\u00e9cial ;  \u00e0 la place, vous verrez des boutons radio traditionnels \u00e0 c\u00f4t\u00e9 de chaque image parmi lesquels les visiteurs du site pourront choisir.<\/li>\n<li><strong>    Conception au choix :<\/strong> choisissez le nombre de colonnes utilis\u00e9es pour afficher vos options d&#8217;image.  Vous pouvez choisir parmi une, deux ou trois colonnes.  Vous avez \u00e9galement la possibilit\u00e9 de choisir Inline, qui place autant d&#8217;options que possible dans chaque ligne avant d&#8217;en ajouter une autre.  Inline est la mise en page par d\u00e9faut de choix pour tous les formulaires WordPress qui affichent des options d&#8217;image.<\/li>\n<\/ol>\n<p>Vous pouvez \u00e9galement s\u00e9lectionner le <strong>Choix al\u00e9atoires<\/strong> case \u00e0 cocher si vous souhaitez randomiser l&#8217;ordre des options d&#8217;image chaque fois qu&#8217;un nouvel utilisateur visite votre site Web.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253698\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_14_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Choix al\u00e9atoires\" width=\"562\" height=\"232\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_5_Activer_les_rapports_denquete\"><\/span>\u00c9tape\u00a05\u00a0: Activer les rapports d&#8217;enqu\u00eate<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si vous souhaitez voir combien de personnes choisissent chaque option d&#8217;image que vous proposez, vous pouvez activer les rapports d&#8217;enqu\u00eate pour vos formulaires en installant et en activant le plug-in Surveys and Polls.<\/p>\n<p>Pour ce faire, rendez-vous sur <strong>WPForms<\/strong> \u00bb <strong>Ajouter<\/strong> et retrouvez l&#8217;\u00e9tiquetage <strong>Plugin Sondages et Sondages<\/strong>.<\/p>\n<p>Cliquer <strong>Installer le plugin<\/strong> et apr\u00e8s <strong>Activer<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-182845\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/How-to-Create-an-Effective-Patient-Satisfaction-Survey.png\" alt=\"Plugin Sondages et Sondages\" width=\"562\" height=\"211\"><\/p>\n<p>WPForms vous permet de collecter les r\u00e9sultats de l&#8217;enqu\u00eate pour les champs de formulaire suivants\u00a0:<\/p>\n<p>Pour activer les rapports d&#8217;enqu\u00eate pour <strong>tous les formulaires sur votre site<\/strong>, aller \u00e0 <strong>R\u00e9glages<\/strong> \u00bb <strong>Enqu\u00eates et sondages<\/strong> et s\u00e9lectionnez le <strong>Activer les rapports d&#8217;enqu\u00eate<\/strong> caisse.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253692\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_486_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Rapports d'enqu\u00eate sur le site\" width=\"562\" height=\"322\"><\/p>\n<p>Si vous souhaitez uniquement collecter des donn\u00e9es sur ce formulaire en particulier, allez dans l&#8217;\u00e9diteur de formulaire, faites d\u00e9filer jusqu&#8217;\u00e0 la <strong>R\u00e9glages avanc\u00e9s<\/strong> rubrique et cliquez sur <strong>Activer les rapports d&#8217;enqu\u00eate<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253688\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901626_556_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Activer les rapports d'enqu\u00eate\" width=\"562\" height=\"135\"><\/p>\n<p>Une fois que les gens commencent \u00e0 remplir votre formulaire, avec des images \u00e0 c\u00f4t\u00e9 des boutons radio, vous pouvez g\u00e9n\u00e9rer des rapports d&#8217;enqu\u00eate dans votre tableau de bord WordPress pour voir les r\u00e9sultats.<\/p>\n<p>Pour g\u00e9n\u00e9rer un rapport d&#8217;enqu\u00eate, acc\u00e9dez \u00e0 <strong>WPForms<\/strong> \u00bb <strong>Tous les chemins<\/strong> et survolez votre formulaire pour afficher les options.  Puis clique <strong>R\u00e9sultats du test<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253694\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901627_580_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"R\u00e9sultats du test\" width=\"562\" height=\"141\"><\/p>\n<p>Une fois que vous aurez cliqu\u00e9 dessus, vous verrez les r\u00e9sultats de votre formulaire :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-253693\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/11\/1635901627_182_Como-agregar-una-imagen-junto-a-los-botones-de-opcion.png\" alt=\"Graphique des r\u00e9sultats de l'enqu\u00eate\" width=\"562\" height=\"507\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"En_conclusion\"><\/span>En conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Et voila!  Vous savez maintenant comment ajouter une image \u00e0 c\u00f4t\u00e9 des boutons d&#8217;option dans les formulaires WordPress.<\/p>\n<p>Si vous souhaitez gagner de l&#8217;argent en ligne, vous pouvez consulter notre tutoriel sur la fa\u00e7on de cr\u00e9er un formulaire de commande simple dans WordPress et d&#8217;ajouter des images \u00e0 c\u00f4t\u00e9 de chaque article que vous avez \u00e0 vendre.<\/p>\n<p>Alors qu&#8217;est-ce que tu attends?  Commencez d\u00e8s aujourd&#8217;hui avec le plugin de formulaires WordPress le plus puissant.<\/p>\n<p>Et n&#8217;oubliez pas, si vous aimez cet article, suivez-nous sur Facebook Oui Twitter.<\/p>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#Etape_1_creez_un_formulaire_WordPress_simple\" >\u00c9tape 1 : cr\u00e9ez un formulaire WordPress simple<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#Etape_2_personnalisez_votre_formulaire_WordPress\" >\u00c9tape 2 : personnalisez votre formulaire WordPress<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#Etape_3_ajouter_une_image_aux_boutons_doption\" >\u00c9tape 3 : ajouter une image aux boutons d&#8217;option<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#Etape_4_personnalisez_vos_options_dimage\" >\u00c9tape 4 : personnalisez vos options d&#8217;image<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#Etape_5_Activer_les_rapports_denquete\" >\u00c9tape\u00a05\u00a0: Activer les rapports d&#8217;enqu\u00eate<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-image-a-cote-des-boutons-doption-dans-les-formulaires-wordpress\/#En_conclusion\" >En conclusion<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>Vous \u00eates-vous d\u00e9j\u00e0 demand\u00e9 si vous pouviez permettre aux utilisateurs de s\u00e9lectionner une image dans votre formulaire WordPress au lieu d&#8217;un simple texte ? Avec WPForms, vous pouvez facilement ajouter une image \u00e0 c\u00f4t\u00e9 des boutons d&#8217;option sur les formulaires WordPress, afin que les utilisateurs puissent s\u00e9lectionner rapidement la bonne option qu&#8217;ils souhaitent. Dans cet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":85978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-85977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/85977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=85977"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/85977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/85978"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=85977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=85977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=85977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}