{"id":741,"date":"2026-05-17T05:54:02","date_gmt":"2026-05-17T04:54:02","guid":{"rendered":"https:\/\/yaxii.dev\/?yaxii_doc=placing-the-form"},"modified":"2026-05-19T16:36:11","modified_gmt":"2026-05-19T15:36:11","slug":"placing-the-form","status":"publish","type":"yaxii_doc","link":"https:\/\/yaxii.dev\/fr\/docs\/yaxii-smart-form\/placing-the-form\/","title":{"rendered":"Placement du formulaire"},"content":{"rendered":"<h2>Le probl\u00e8me que ce guide r\u00e9sout<\/h2>\n<p>Par d\u00e9faut, le formulaire Yaxii Smart Form s&rsquo;affiche automatiquement sur les fiches produit WooCommerce. Mais si vous voulez l&rsquo;int\u00e9grer sur une page de destination, une page de bundle, ou tout autre contenu personnalis\u00e9, vous avez besoin d&rsquo;une m\u00e9thode d&rsquo;int\u00e9gration manuelle. Ce guide couvre les trois fa\u00e7ons de placer le formulaire o\u00f9 vous en avez besoin.<\/p>\n<h2>M\u00e9thode 1 \u2014 Placement automatique sur les fiches produit<\/h2>\n<p>Le formulaire s&rsquo;affiche automatiquement sur toutes vos fiches produit WooCommerce d\u00e8s que le plugin est actif. Aucune action n&rsquo;est requise.<\/p>\n<p>Pour activer ou d\u00e9sactiver ce comportement global, allez dans <b>Yaxii Smart Form > Param\u00e8tres du formulaire<\/b>, ouvrez l&rsquo;onglet <b>Comportement<\/b>, et basculez l&rsquo;option <b>Formulaire global activ\u00e9<\/b>.<\/p>\n<p>[Screenshot: Onglet \u00ab\u00a0Comportement\u00a0\u00bb avec l&rsquo;interrupteur \u00ab\u00a0Formulaire global activ\u00e9\u00a0\u00bb en position ON]<\/p>\n<h2>M\u00e9thode 2 \u2014 Shortcode sur n&rsquo;importe quelle page<\/h2>\n<p>Pour afficher le formulaire en dehors d&rsquo;une fiche produit WooCommerce (page de destination, article de blog, widget de texte), utilisez le shortcode universel :<\/p>\n<p><div class=\"not-prose my-4 inline-flex items-center rounded-md border border-[hsl(var(--docs-block-border))] bg-[hsl(var(--docs-block-bg))] overflow-hidden max-w-full leading-none\"><span class=\"flex items-center self-stretch px-3 py-2 text-[12px] leading-none uppercase tracking-wide text-muted-foreground border-r rtl:border-r-0 rtl:border-l border-[hsl(var(--docs-block-border))]\">\u00bbShortcode<\/span><code class=\"flex items-center px-3 py-2 text-[13px] leading-none font-mono text-[hsl(var(--docs-strong))] truncate\" dir=\"ltr\">\u00bb[yaxii_smart_form<\/code><button type=\"button\" class=\"flex items-center px-3 py-2 border-l rtl:border-l-0 rtl:border-r border-[hsl(var(--docs-block-border))] text-muted-foreground hover:text-foreground hover:bg-accent transition-colors\" data-yaxii-copy data-yaxii-copy-value=\"\u00bb[yaxii_smart_form\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-3.5 h-3.5\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><span class=\"sr-only\" data-yaxii-copy-label data-copy-text=\"Copy\" data-copied-text=\"Copied\">Copy<\/span><\/button><\/div>\u00a0\u00bb]<\/p>\n<div class=\"not-prose\"><ol class=\"list-none marker:content-none [&_li::marker]:content-none [&_li::before]:hidden [&_li::before]:content-none my-5 space-y-4 relative border-l rtl:border-l-0 rtl:border-r border-[hsl(var(--docs-block-border))] p-0 pl-6 rtl:pl-0 rtl:pr-6 ml-3 rtl:ml-0 rtl:mr-3\"><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">1<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Copier le shortcode<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Copiez le shortcode ci-dessus.<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">2<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Coller dans votre contenu<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Ouvrez la page ou l&rsquo;article WordPress sur lequel vous souhaitez afficher le formulaire. Dans l&rsquo;\u00e9diteur, ajoutez un <b>bloc Shortcode<\/b> (cherchez \u00ab\u00a0Shortcode\u00a0\u00bb dans la biblioth\u00e8que de blocs Gutenberg), collez le shortcode, et publiez ou mettez \u00e0 jour la page.<\/p>\n<p>[Screenshot: \u00c9diteur Gutenberg avec un bloc Shortcode contenant \u00ab\u00a0[yaxii_smart_form]\u00a0\u00bb ins\u00e9r\u00e9 entre deux blocs de texte]<\/div><\/li><\/ol><\/div>\n<aside class=\"rounded-lg border p-4 my-5 bg-[hsl(var(--callout-warning-bg))] border-[hsl(var(--callout-warning-border))] text-[hsl(var(--callout-warning-fg))]\" role=\"note\"><div class=\"flex items-start gap-3\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4 mt-0.5 flex-shrink-0 text-[hsl(var(--callout-warning-icon))]\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"\/><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><\/svg><div class=\"flex flex-col gap-1 flex-1 min-w-0\"><div class=\"text-[13px] font-semibold m-0 leading-none\">Shortcode hors d&#039;une fiche produit WooCommerce<\/div><div class=\"text-[14px] leading-6 [&_p]:m-0 [&_p]:leading-6 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\">Lorsque vous utilisez le shortcode sur une page personnalis\u00e9e, le formulaire doit savoir quel produit il repr\u00e9sente. Assurez-vous de pr\u00e9ciser l&rsquo;identifiant du produit dans les attributs du shortcode, sinon le formulaire ne saura pas quoi afficher. Consultez la documentation de l&rsquo;int\u00e9gration pour la syntaxe compl\u00e8te des attributs.<\/div><\/div><\/div><\/aside>\n<h2>M\u00e9thode 3 \u2014 Bloc Gutenberg d\u00e9di\u00e9<\/h2>\n<p>Si vous construisez vos pages avec l&rsquo;\u00e9diteur de blocs WordPress, un bloc d\u00e9di\u00e9 <b>Yaxii Smart Form<\/b> est disponible directement dans la biblioth\u00e8que de blocs.<\/p>\n<div class=\"not-prose\"><ol class=\"list-none marker:content-none [&_li::marker]:content-none [&_li::before]:hidden [&_li::before]:content-none my-5 space-y-4 relative border-l rtl:border-l-0 rtl:border-r border-[hsl(var(--docs-block-border))] p-0 pl-6 rtl:pl-0 rtl:pr-6 ml-3 rtl:ml-0 rtl:mr-3\"><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">1<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Ajouter le bloc<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Dans l&rsquo;\u00e9diteur Gutenberg, cliquez sur le bouton <b>+<\/b> pour ajouter un nouveau bloc. Recherchez \u00ab\u00a0Yaxii\u00a0\u00bb dans la barre de recherche. Cliquez sur le bloc <b>Yaxii Smart Form<\/b> pour l&rsquo;ins\u00e9rer.<\/p>\n<p>[Screenshot: Biblioth\u00e8que de blocs Gutenberg avec \u00ab\u00a0Yaxii\u00a0\u00bb saisi dans la recherche et le bloc \u00ab\u00a0Yaxii Smart Form\u00a0\u00bb apparu dans les r\u00e9sultats]<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">2<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Configurer le bloc<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Une fois le bloc ins\u00e9r\u00e9, un panneau de configuration appara\u00eet dans la barre lat\u00e9rale droite de l&rsquo;\u00e9diteur. Vous pouvez y d\u00e9finir l&rsquo;identifiant du produit cible et d&rsquo;autres options d&rsquo;int\u00e9gration.<\/p>\n<p>[Screenshot: Panneau lat\u00e9ral de configuration du bloc \u00ab\u00a0Yaxii Smart Form\u00a0\u00bb avec le champ \u00ab\u00a0ID du produit\u00a0\u00bb visible]<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">3<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Publier ou mettre \u00e0 jour<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Cliquez sur <b>Publier<\/b> ou <b>Mettre \u00e0 jour<\/b> pour enregistrer la page avec le formulaire int\u00e9gr\u00e9.<\/div><\/li><\/ol><\/div>\n<h2>Comparer les trois m\u00e9thodes<\/h2>\n<div class=\"not-prose\"><div class=\"my-5 overflow-x-auto rounded-lg border border-[hsl(var(--docs-block-border))]\"><table class=\"w-full border-collapse m-0 text-[14px]\"><thead class=\"bg-[hsl(var(--docs-block-bg))]\"><tr><th class=\"text-start font-semibold text-[hsl(var(--docs-strong))] px-4 py-2.5 border-b border-[hsl(var(--docs-block-border))]\">M\u00e9thode<\/th><th class=\"text-start font-semibold text-[hsl(var(--docs-strong))] px-4 py-2.5 border-b border-[hsl(var(--docs-block-border))]\">Id\u00e9ale pour<\/th><th class=\"text-start font-semibold text-[hsl(var(--docs-strong))] px-4 py-2.5 border-b border-[hsl(var(--docs-block-border))]\">Action requise<\/th><\/tr><\/thead><tbody><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Automatique<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Toutes les fiches produit WooCommerce standard<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Aucune \u2014 fonctionne d\u00e8s l&rsquo;activation<\/td><\/tr><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Shortcode<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Pages personnalis\u00e9es, landing pages, widgets<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Copier-coller le shortcode dans un bloc Shortcode<\/td><\/tr><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Bloc Gutenberg<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Pages construites avec l&rsquo;\u00e9diteur de blocs<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Ins\u00e9rer le bloc depuis la biblioth\u00e8que Gutenberg<\/td><\/tr><\/tbody><\/table><\/div><\/div>\n<h2>Et ensuite ?<\/h2>\n<p>Votre formulaire est d\u00e9sormais personnalis\u00e9 et plac\u00e9 exactement l\u00e0 o\u00f9 vous en avez besoin. Explorez les autres piliers de la documentation pour aller plus loin.<\/p>\n<p>\u2192 Lire : <a href=\"https:\/\/yaxii.dev\/fr\/docs\/article\/logistics-shipping\/\">Configurer l&rsquo;exp\u00e9dition et les 58 wilayas<\/a> \u2192 Lire : <a href=\"https:\/\/yaxii.dev\/fr\/docs\/article\/security-anti-fraud\/\">Prot\u00e9ger votre boutique contre les fausses commandes<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le probl\u00e8me que ce guide r\u00e9sout Par d\u00e9faut, le formulaire Yaxii Smart Form s&rsquo;affiche automatiquement sur les fiches produit WooCommerce. Mais si vous voulez l&rsquo;int\u00e9grer sur une page de destination, une page de bundle, ou tout autre contenu personnalis\u00e9, vous avez besoin d&rsquo;une m\u00e9thode d&rsquo;int\u00e9gration manuelle. Ce guide couvre les trois fa\u00e7ons de placer le [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":2,"template":"","yaxii_doc_category":[161],"class_list":["post-741","yaxii_doc","type-yaxii_doc","status-publish","hentry","yaxii_doc_category-personnalisation-du-formulaire"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc"}],"about":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/types\/yaxii_doc"}],"version-history":[{"count":0,"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc\/741\/revisions"}],"wp:attachment":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"yaxii_doc_category","embeddable":true,"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc_category?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}