Form Building & Types
4 form types, responsive multi-column layouts, and flexible page placement — build one-page, multi-step, popup, and slide-out forms for any Magento 2 page
WebForms provides four distinct form display modes — one-page, multi-step, popup/modal, and slide-out — each supporting all field types, validation, and conditional logic. A self-contained responsive grid system handles multi-column layouts across three screen breakpoints without depending on your theme.
Forms can be placed on any CMS page, product page, or custom location using widgets, directives, or URL rewrites. Every placement method supports AJAX submission and configurable success behavior.
Form Types
Four distinct form display modes cover every use case — from standard inline forms to overlays and persistent edge panels. Each type supports all field types, validation, and conditional logic.
One-Page Forms
Standard single-page form layout where all fields and fieldsets render on one page with a single submit button. The most common form type for contact forms, feedback, and straightforward data collection. Supports all field types, validation rules, and conditional logic within a single scrollable view.
Multi-Step Forms
Splits the form into sequential steps using fieldsets as step boundaries. Each step displays a progress bar and back/next navigation buttons. Reduces form abandonment by presenting fields in manageable sections. Conditional step visibility lets you show or hide entire steps based on previous answers.
Popup / Modal Forms
Opens the form in an overlay modal dialog triggered by a button click or JavaScript event. Users stay on the current page while filling out the form. Submission happens inside the modal without a page reload. Ideal for contact forms, newsletter signups, and forms that should not interrupt the browsing flow.
Slide-Out Forms
A persistent form panel that attaches to the edge of the screen and slides in when triggered. Configurable position (left or right), custom trigger icon, and auto-open delay. Stays accessible on every page without taking up layout space. Common for feedback collection, support requests, and always-available contact access.
Responsive Layout System
A self-contained responsive grid that works independently from your theme. Arrange fields in multi-column layouts that adapt automatically across three screen breakpoints.
Multi-Column Field Layouts
Arrange fields in up to 6 columns per row using fractional width proportions — from 1/6 to 6/6. Each field gets independent width settings for precise control. Fieldsets support up to 4-column configurations. Enables compact, professional layouts that use screen space efficiently while keeping related fields grouped.
Three-Breakpoint Responsive Design
Forms adapt automatically at three defined breakpoints: Small (320px+), Medium (768px+), and Large (1024px+). Column layouts collapse gracefully on smaller screens — mobile users see a single-column stack, tablets see a reduced grid, desktops see the full multi-column layout. Mobile-first CSS ensures forms work on any device.
Per-Screen Width Control
Override automatic responsive behavior with manual width settings per breakpoint. Set different column proportions for small, medium, and large screens independently. Control whether fields start on a new row at each breakpoint. Gives you pixel-perfect form layouts tailored to each device class.
Self-Contained CSS Grid
WebForms uses its own prefixed CSS grid system (wf- classes) that operates independently from the theme grid framework. Forms render correctly even in themes with conflicting CSS frameworks like Bootstrap, Foundation, or custom grids. No theme modifications are needed for proper form layout rendering.
Form Placement & Display
Multiple deployment options for placing forms exactly where you need them — on any CMS page, product page, or custom location. Each method supports AJAX submission and configurable success behavior.
Any-Page Widget Embedding
Place forms on any Magento page using the WebForms widget or a CMS directive. Insert forms into CMS pages, static blocks, and layout XML positions without custom code. The widget handles form loading, AJAX submission, and success messaging automatically.
Product & Catalog Page Embedding
Embed forms directly on product view pages and category listing pages. Forms on product pages automatically capture the product context — name, SKU, and URL — with each submission. Commonly used for product inquiries, custom order requests, quote forms, and product-specific feedback.
Widget Button with Popup
A configurable button widget that opens a form in a popup modal when clicked. Customize button text, CSS classes, popup title, and popup styling from the admin panel. Place the button anywhere in the layout — sidebars, headers, footers, or inline with content.
Custom Form URLs
Assign a custom URL path to any form for direct browser access. WebForms creates Magento URL rewrites automatically, so forms are accessible at clean paths like /contact-us or /request-quote. Shareable via email campaigns, social media, and external links.
Form Type Comparison
Choose the right form type based on your use case, display requirements, and user interaction pattern.
Frequently Asked Questions
WebForms supports four form types: one-page (standard inline), multi-step (sequential steps with progress bar), popup/modal (overlay dialog triggered by button), and slide-out (persistent edge panel). Each type supports all field types, validation rules, conditional logic, and AJAX submission.
Multi-step forms use fieldsets as step boundaries. Each fieldset becomes a separate step with back/next navigation and a progress bar. Steps can be conditionally shown or hidden based on answers in previous steps. Validation runs per step — users cannot advance until the current step passes all validation rules.
Yes. WebForms includes a widget button that opens any form in a popup modal when clicked. You can place the button widget in sidebars, headers, footers, CMS pages, or any layout position using the Magento widget system. The popup handles form rendering and AJAX submission without page reload.
The slide-out form attaches a persistent panel to the left or right edge of the screen. It stays visible across all pages as a small trigger icon. When clicked, the panel slides in to reveal the form. You can configure the trigger icon, position, and auto-open delay from the admin. Submission happens within the panel.
Yes. WebForms can be embedded on product view pages and category listing pages using widgets or layout XML. Forms on product pages automatically capture the product name, SKU, and URL with each submission, so you know which product the customer is asking about.
Yes. WebForms uses a self-contained CSS grid system with its own prefixed classes (wf-) that operates independently from the theme grid framework. Forms render correctly in Luma, Hyvä, Breeze, and custom themes — including themes with conflicting CSS frameworks like Bootstrap or Foundation.
WebForms Lite includes one-page forms, popup/modal forms, basic responsive design across three breakpoints, any-page widget embedding, widget button with popup, custom form URLs, and the self-contained grid system. WebForms Suite adds multi-step forms, slide-out forms, multi-column layouts up to 6 columns, per-screen width control, and product page embedding.
Build Any Form for Magento 2
4 form types, responsive layouts, and flexible placement options — all without writing custom code