Design & Customization
Custom CSS, auto-save, preview before submission, URL pre-population, and JavaScript hooks — full control over how your Magento 2 forms look and behave
WebForms gives you complete control over form appearance and user experience. Apply custom CSS to any field, configure button labels and positions, and add tooltips and descriptions — all from the admin panel without touching theme files.
Advanced features like auto-save, preview before submission, and URL parameter pre-population reduce abandonment and improve data quality. Custom JavaScript hooks let you integrate analytics, third-party services, and custom logic at key form lifecycle points.
Visual Appearance
Control how your forms look with custom CSS, per-field layout adjustments, and button styling. Forms automatically inherit your theme styles while giving you full override control.
Custom CSS Styling
Add custom CSS classes and inline styles directly to any form or individual field from the admin panel. Target specific elements without modifying theme files. Use it to match brand colors, adjust spacing, or create entirely custom form designs within Magento.
Theme Integration
Forms automatically inherit the active Magento theme styles — fonts, colors, input styling, and button appearance match the rest of your store. Works with Luma, Hyvä, Breeze, and custom themes without configuration. No extra CSS is needed for a consistent look.
Field-Specific Layout Customization
Adjust width, alignment, and position individually for each field in the form. Move fields into multi-column arrangements, set custom widths per breakpoint, and control whether a field starts on a new row. Gives precise layout control without writing CSS.
Custom Button Configuration
Configure the submit and reset button appearance, position, and behavior per form. Choose to show or hide the reset button, set button alignment (left, center, right), and control whether the submit button appears at the top or bottom of the form.
Custom Button Text
Change submit and reset button labels to any text you need — “Send Request”, “Get Quote”, “Submit Application”. Set button text per form to match each form's specific purpose and call-to-action.
User Experience Enhancements
Features that reduce friction, prevent data loss, and make forms faster to complete. From auto-save and preview to smart pre-population and contextual help, every enhancement targets a specific pain point in form completion.
Auto-Save Feature
Automatically saves form progress to the browser so users can leave and return without losing data. Works with multi-step forms — partially completed steps are preserved. Particularly valuable for long application forms, multi-page surveys, and complex B2B quote requests where users need time to gather information.
Preview Before Submission
Adds a review step that displays all entered values before the user finalizes their submission. Users see a formatted summary of every field they filled out and can go back to make changes. Reduces errors and support requests by letting customers verify their data before it is submitted.
Post-Submission Redirect to URL
Redirects the user to a custom URL immediately after a successful form submission. Use it to send customers to a thank-you page, a specific product page, an external payment gateway, or any custom landing page. The redirect URL is configurable per form from the admin panel.
Pre-filled Fields for Logged-in Customers
Automatically populates name, email, phone, and other account fields from the logged-in customer profile. Customers skip re-entering information they have already provided. Reduces form completion time and improves accuracy by pulling verified data from Magento customer accounts.
URL Parameters for Field Pre-Population
Pre-fill any field by passing values as query parameters in the form URL. For example, ?product=Widget&source=campaign fills the product and source fields automatically. Useful for campaign tracking links, email CTAs, and contextual form embedding where you know some values in advance.
Configurable Success Messages
Set a custom success message displayed to the user after a form is submitted. Use HTML formatting for rich messages with links, images, or next-step instructions. Each form has its own independent success message configured from the admin panel.
Custom Error Messages
Define per-field error messages that display when validation fails. Replace generic “This field is required” text with specific guidance like “Please enter a valid 10-digit phone number”. Helps users fix errors faster by telling them exactly what is expected.
Tooltips for Fields
Add hover or click tooltips to any field to provide contextual hints without cluttering the form layout. Tooltips appear as small info icons next to the field label. Useful for explaining unfamiliar terms, providing input format examples, or clarifying what data is expected.
Rich Description Text for Fields
Add HTML-formatted help text below any field to provide detailed instructions, examples, or contextual information. Supports links, bold text, lists, and other HTML elements. Rendered directly beneath the field input, always visible to the user.
Form Scripting
Execute custom JavaScript at key form lifecycle points. Add tracking pixels, trigger analytics events, manipulate field values, integrate with third-party services, or implement custom validation logic beyond what the built-in rules provide.
Custom JavaScript on Form Load
Execute custom JavaScript code automatically when the form renders on the page. Use it to initialize third-party widgets, set up analytics tracking, pre-populate fields from external sources, or apply custom formatting. The code runs after the form DOM is fully rendered and all WebForms event handlers are attached.
Custom JavaScript on Form Submit
Trigger custom JavaScript before or after the form submission event fires. Common uses: fire Google Analytics conversion events, send data to a marketing pixel, perform custom client-side validation, or transform field values before they are submitted. Access all form field values programmatically at submission time.
Design Features: Lite vs Suite
Lite already includes full CSS customization, theme integration, and customer pre-fill. Suite adds JavaScript hooks, auto-save, preview, URL pre-population, and post-submit redirect.
Frequently Asked Questions
Yes. WebForms lets you assign custom CSS classes and inline styles to any form or individual field from the admin panel. You can target specific elements for styling without modifying theme files. This works with all Magento 2 themes including Luma, Hyvä, and Breeze.
Auto-save automatically stores form progress in the browser storage as the user fills out fields. If they navigate away or close the tab, their entered data is preserved and restored when they return to the form. It works with both single-page and multi-step forms, preserving partial step completion.
Yes. WebForms supports URL parameter pre-population — pass any field value as a query parameter in the form URL (e.g., ?name=John&email=john@example.com). This is useful for campaign tracking links, email CTAs, and embedding forms with known context values.
Yes. You can enable a review step that shows a formatted summary of all entered values before the user submits. This is especially useful for multi-step forms, application forms, and any form where users need to verify their data before it is submitted.
Yes. WebForms Suite provides two JavaScript hooks: one that fires when the form renders on the page, and one that fires on form submission. Use them to initialize third-party widgets, fire analytics events, perform custom validation, or manipulate field values. Both hooks are available in WebForms Suite.
In the form settings you can change the submit and reset button labels to any text. You can also configure button position (left, center, right) and visibility (show or hide the reset button) independently per form from the admin panel.
WebForms Lite includes custom CSS styling, theme integration, field layout customization, button configuration, custom button text, success/error messages, tooltips, rich description text for fields, and customer pre-fill for logged-in users. WebForms Suite adds auto-save, preview before submission, post-submission redirect, URL parameter pre-population, and custom JavaScript hooks (on-load and on-submit).
Design Forms Your Way
Custom CSS, auto-save, preview, and JavaScript hooks — make your Magento 2 forms look and behave exactly as you need