Shortcodes And Page Builders
Embedding the Form Anywhere
The Yaxii Smart Form can be placed on any page, post, or template — not just WooCommerce product pages. Three integration methods are available, and all three share the same rendering engine, so the form always looks and behaves identically regardless of how it is embedded.
The Shortcode
Paste into any post, page, or widget area that supports shortcodes.
Without parameters, the shortcode auto-detects the product when placed on a WooCommerce product page. On any other page type, pass the product ID explicitly.
Parameters
| Parameter | Accepted Values | Default |
|---|---|---|
| id | Product ID, or a comma-separated list for bundles | Auto-detect |
| layout | auto · 1col · 2col · multi | auto |
| theme | inherit · light · dark | inherit |
| primary_color | Any hex color, e.g. #e11d48 | Theme default |
| button_text | Any text string | Plugin setting |
| show_progress | yes · no | Plugin setting |
| enable_cart_buttons | yes · no | Plugin setting |
| validation | on_submit · live · on_blur | on_submit |
| class | Any CSS class name | None |
Common Examples
Single product on a regular page:
Two-column layout with a custom button label:
Multi-product bundle (comma-separated IDs):
Dark theme with a custom accent color and live validation:
Elementor Widget
If Elementor is active, a Yaxii Smart Form widget appears in the Yaxii section of the Elementor block library.
Content Tab
- Form Mode — Choose Auto (Current Product) to let the widget detect the product from the page context. Choose Manual Product Selection to pick a specific product from the dropdown.
- Product — The product selector appears only when Form Mode is set to Manual.
- Theme Builder Support — Enable this when placing the widget inside an Elementor Theme Builder template for WooCommerce single-product pages.
Style Tab
- Form Background — Override the form container background color.
- Padding — Control inner spacing with responsive values (px, em, or %).
Editor Placeholder
In the Elementor editor canvas, the widget shows a placeholder card displaying the selected product name inside a blue dashed border — the full form only renders on the published, live page. This prevents script conflicts inside the admin editor.
[Screenshot: Elementor editor canvas showing the Yaxii widget placeholder card with product name and a blue dashed border; the Content tab panel is visible on the right with Form Mode set to Auto]
Gutenberg Block
A Yaxii Smart Form block is available in the Yaxii category of the Gutenberg block inserter. Search for “Yaxii” to find it.
Block Sidebar Settings
- Product ID — The WooCommerce product to render. Leave blank on a WooCommerce product page for auto-detection.
- Layout — Controls column count (auto, 1-column, or 2-column).
- Primary Color — Hex color override for the form accent.
- Show Progress Bar — Toggle the step-completion progress indicator.
- Enable Cart Buttons — Toggle the add-to-cart button set.
- Validation — Choose when fields are validated: on_submit, live (real-time), or on_blur (on field exit).
The block also supports the standard Gutenberg alignment controls (Wide and Full width), anchor IDs, and custom CSS classes from the block toolbar.