Shortcodes et page builders
Intégrer le formulaire n’importe où
Le formulaire Yaxii Smart Form peut être placé sur n’importe quelle page, article ou template — pas uniquement sur les pages produit WooCommerce. Trois méthodes d’intégration sont disponibles, et toutes trois partagent le même moteur de rendu, ce qui garantit un comportement identique quelle que soit la méthode utilisée.
Le shortcode
Collez dans n’importe quel article, page ou zone de widget supportant les shortcodes.
Sans paramètres, le shortcode détecte automatiquement le produit lorsqu’il est placé sur une page produit WooCommerce. Sur tout autre type de page, vous devez indiquer l’ID du produit explicitement.
Paramètres
| Paramètre | Valeurs acceptées | Défaut |
|---|---|---|
| id | ID produit, ou liste séparée par des virgules pour les bundles | Détection auto |
| layout | auto · 1col · 2col · multi | auto |
| theme | inherit · light · dark | inherit |
| primary_color | N’importe quelle couleur hexadécimale, ex. #e11d48 | Défaut du thème |
| button_text | N’importe quelle chaîne de texte | Réglage du plugin |
| show_progress | yes · no | Réglage du plugin |
| enable_cart_buttons | yes · no | Réglage du plugin |
| validation | on_submit · live · on_blur | on_submit |
| class | N’importe quelle classe CSS | Aucun |
Exemples courants
Produit unique sur une page standard :
Disposition deux colonnes avec un libellé de bouton personnalisé :
Bundle multi-produits (IDs séparés par des virgules) :
Thème sombre avec couleur d’accent personnalisée et validation en temps réel :
Widget Elementor
Si Elementor est actif, un widget Yaxii Smart Form apparaît dans la section Yaxii de la bibliothèque de blocs Elementor.
Onglet Contenu
- Mode du formulaire — Choisissez Auto (Produit actuel) pour que le widget détecte le produit depuis le contexte de la page. Choisissez Sélection manuelle du produit pour choisir un produit spécifique dans le menu déroulant.
- Produit — Le sélecteur de produit apparaît uniquement lorsque le Mode du formulaire est réglé sur Manuel.
- Support pour le Theme Builder — Activez cette option lorsque vous placez le widget dans un template Theme Builder d’Elementor pour les pages produit WooCommerce.
Onglet Style
- Arrière-plan du formulaire — Remplacez la couleur de fond du conteneur du formulaire.
- Espacement intérieur — Contrôlez l’espacement interne avec des valeurs adaptatives (px, em ou %).
Comportement dans l’éditeur
Dans l’éditeur Elementor, le widget affiche une carte de prévisualisation avec le nom du produit sélectionné entourée d’une bordure bleue en pointillés — le formulaire complet ne se charge que sur la page publiée en ligne. Cela évite les conflits de scripts dans l’interface d’administration.
[Screenshot: Éditeur Elementor affichant la carte de prévisualisation du widget Yaxii avec le nom du produit et une bordure bleue en pointillés ; le panneau Contenu est visible à droite avec le Mode du formulaire réglé sur Auto]
Bloc Gutenberg
Un bloc Yaxii Smart Form est disponible dans la catégorie Yaxii de l’inserteur de blocs Gutenberg. Recherchez « Yaxii » pour le trouver.
Réglages du bloc (panneau latéral)
- ID du produit — Le produit WooCommerce à afficher. Laissez vide sur une page produit WooCommerce pour la détection automatique.
- Disposition — Contrôle le nombre de colonnes (auto, 1 colonne ou 2 colonnes).
- Couleur principale — Couleur d’accent hexadécimale personnalisée.
- Afficher la barre de progression — Active ou désactive l’indicateur d’avancement.
- Activer les boutons panier — Active ou désactive le jeu de boutons d’ajout au panier.
- Validation — Choisissez le moment de la validation : on_submit, live (temps réel) ou on_blur (à la sortie du champ).
Le bloc supporte également les contrôles d’alignement Gutenberg standard (Large et Pleine largeur), les ancres ID et les classes CSS personnalisées depuis la barre d’outils du bloc.