Field Types & Input Elements
30+ field types for every data collection scenario — from simple text inputs to dynamic grids, digital signatures, and drag-and-drop file uploads
MageMe WebForms provides the most comprehensive set of form field types available for Magento 2. Every field is built natively into the Magento framework — no external dependencies, no iframe embeds, no third-party JavaScript libraries that slow down your store.
Each field type supports inline validation, conditional visibility, custom CSS classes, tooltips, and responsive layout. Fields work identically across Luma, Breeze, and Hyvä themes.
Basic Text Input Fields
Core building blocks of any form. These fields handle the most common data entry scenarios — from names and emails to rich text and hidden tracking parameters.
Text Field
The standard single-line input for names, subjects, and short answers. Supports placeholder text, character limits, and all built-in validation rules. This is the most frequently used field type in any form.
Email Field
Dedicated email input with automatic format validation. The browser renders it with an email-optimized keyboard on mobile devices. Submitted values are validated both client-side and server-side to ensure proper email format.
Number Field
Numeric-only input with optional min, max, and step constraints. Mobile devices display a numeric keypad. Ideal for quantities, ages, and any integer or decimal data entry.
URL Field
Text input that validates the entered value as a properly formatted URL including protocol. Useful for collecting website addresses, portfolio links, and social media profiles.
Password Field
Masked input for sensitive data entry with optional confirmation field pairing. When used in a registration form, WebForms can validate password strength and match between two password fields automatically.
Auto-Complete Field
Text field with type-ahead suggestions from a configurable list. As the user types, matching options appear in a dropdown. Speeds up input and reduces errors for fields with known value sets like cities or company names.
Textarea
Multi-line plain text input for comments, messages, and detailed descriptions. Configurable initial row count and maximum character limit. Automatically expands as the user types or can be set to a fixed height.
WYSIWYG Rich Text Editor
Inline rich text editor that lets users format their input with bold, italic, lists, links, and headings. Outputs clean, sanitized HTML. Useful for content submission forms, support tickets with formatting, and CMS-like input fields.
HTML Content Block
Inserts a static block of HTML between form fields without collecting input. Use it for section headings, instructional text, embedded media, or visual dividers that guide users through the form flow.
Hidden Fields
Non-visible fields that pass predefined or dynamic values on submission. Commonly used for campaign tracking parameters (UTM tags), referral sources, form version identifiers, and any metadata that should be captured without user interaction.
Selection & Choice Fields
Let users choose from predefined options. From simple dropdowns to visual image swatches, these fields cover single-choice, multi-choice, and contact routing scenarios.
Select / Dropdown
Standard dropdown for selecting one option from a list. Supports static options with custom values, option groups, and required validation. Options can carry hidden values different from displayed labels — useful for internal IDs or email routing.
Radio Button
Single-choice selection displayed as a group of visible buttons. Unlike dropdowns, all options are immediately visible, making comparison easier. Best suited for 2-7 options where visibility matters, such as plan selection or priority levels.
Checkbox
Single or grouped checkboxes for boolean and multi-choice input. Each option is independently toggled. A single checkbox works as a yes/no toggle (terms acceptance, opt-in); grouped checkboxes let users select multiple items from a set.
Multiselect
Allows selecting multiple values from a list simultaneously using Ctrl/Cmd+click. Takes less vertical space than checkbox groups when the option list is long. Ideal for category assignments, tag selection, and multi-preference forms.
Select Contact
Dropdown that maps each option to a specific recipient email address. When the user selects a department, the form submission routes to the corresponding team automatically. Perfect for "Contact Us" forms that serve multiple departments.
Image Swatches
Selection field that replaces text options with clickable image thumbnails. Users pick by clicking the image that matches their preference. Commonly used for color selection, material choice, and style picking on product customization forms.
Swatch Contrast Color
Automatically calculates a contrasting label color for each swatch to ensure readability over any background. Dark swatches get light text; light swatches get dark text. No manual color assignment needed — the algorithm handles it.
Date & Time Fields
Structured date and time collection with calendar popups, time selectors, and specialized birthday input with age validation.
Date Picker
Calendar popup for selecting a date. Supports configurable min/max date constraints, disabled dates, and multiple display formats. The calendar respects the store locale for day/month ordering and localized month names.
Time Picker
Inline time selector for hour and minute input with AM/PM or 24-hour format support. Can be paired with a Date Picker on the same form for full datetime collection. Useful for appointment scheduling and delivery time selection.
Date of Birth Field
Specialized date input optimized for birthdate entry with separate day/month/year selectors. Supports minimum and maximum age validation — for example, requiring the user to be at least 18 years old. Commonly used in registration and verification forms.
Advanced Input Fields
Specialized inputs that go beyond standard text and choice fields. Visual color pickers, international phone inputs, star ratings, image galleries, and newsletter integration.
Color Picker
Visual color selector that returns a hex or RGB value. Displays a full color spectrum with brightness and saturation controls. Useful for custom product options, design preference forms, and brand color collection.
Phone Number Field
International phone input with a country code selector dropdown showing flag icons. Automatic number formatting adapts to the selected country pattern. Client-side validation checks that the number matches the expected format for the chosen country.
Star Rating
Clickable star icons for rating-scale input. Configurable star count (3, 5, or 10) with support for half-star increments. The rating value is stored as a numeric score, making it easy to calculate averages and sort by rating in submission lists.
Subscription Checkbox
Opt-in checkbox that subscribes the submitter to the Magento newsletter on form submission. Integrates directly with the native Magento subscriber system — no additional modules required. Pre-checked or unchecked by default based on configuration.
Gallery / Image Picker
Opens a popup image catalog for users to browse and select from predefined images. The catalog supports search and category filtering. Ideal for letting customers choose a style, pattern, or template from a visual library rather than a text list.
File Upload Features
A complete file upload system with drag-and-drop, image processing, security controls, and storage management. Handles everything from single document attachments to multi-file galleries with automatic resizing.
Dropzone File Upload (Drag & Drop)
Modern drag-and-drop upload area powered by the Dropzone library. Users can drag files from their desktop or click to browse. Provides immediate visual feedback with thumbnails, file names, and upload progress. Falls back gracefully on older browsers.
Multiple File Upload
Allows users to attach several files in a single upload field. Configurable maximum file count per submission prevents abuse. Files are uploaded in parallel for faster processing. Each file is individually validated against type and size rules.
Image Upload
Dedicated upload field for image files with inline thumbnail preview. Automatically restricts accepted formats to common image types (JPG, PNG, GIF, WebP). The preview lets users verify they selected the correct image before submitting.
Automatic Image Resizing
Resizes uploaded images to configured dimensions server-side immediately after upload. Set maximum width and height — images are scaled proportionally. Reduces storage consumption and prevents users from uploading unnecessarily large photos.
Separate File Cleanup Management
Manages retention and deletion of uploaded files independently from submission records. You can delete old files while keeping submission data, or vice versa. Useful for GDPR compliance where file data has different retention requirements than form metadata.
File Type Restrictions
Define an allowlist of accepted file extensions per upload field. Prevents unsupported or potentially dangerous file types from being submitted. Configure allowed extensions like pdf, docx, jpg per field — submissions with other types are rejected with a clear error message.
File Size Limitations
Set maximum file size per upload field. Oversized files are rejected before upload completes, saving bandwidth and server resources. The limit is displayed to users so they know the constraint before selecting a file.
Upload Progress Bar
Visual progress indicator shows upload completion percentage in real time. Gives users confidence that large file uploads are progressing. Prevents duplicate submissions from users who think the form is stuck.
Admin Access to Uploaded Files
Uploaded files are accessible directly from the submission detail view in the Magento admin panel. View, download, or delete individual files without SSH access. Thumbnails are generated for image files for quick visual review.
Attach Files to Email Notifications
Optionally includes uploaded files as attachments in submission notification emails. Both admin and customer confirmation emails can carry file attachments. Configurable per notification rule — attach to admin alerts but not customer confirmations, or vice versa.
Secure File Storage
Uploaded files are stored outside the web root or behind access control to prevent unauthorized direct URL access. File paths use randomized hashes rather than predictable names. Only authenticated admin users and the original submitter can access uploaded files.
Independent File Retention Periods
Set how long uploaded files are kept before automatic deletion, independent from submission data retention. Configure 30-day file retention while keeping submission records indefinitely, or any combination. Automated cleanup runs via Magento cron.
Dynamic Grid Capabilities
Multi-row tabular input for structured repeating data. Users add and remove rows dynamically, making it ideal for order forms, line-item lists, attendee registrations, and any scenario where the number of entries varies per submission.
Dynamic Grid
Multi-row tabular input where users add and remove rows dynamically. Designed for structured repeating data like order lines, attendee lists, or product specifications. Configurable minimum and maximum row counts with customizable column types.
Mobile-First Grid Design
On small screens the tabular grid automatically transforms into stacked labeled fields per row. Each column becomes a labeled block, maintaining usability without horizontal scrolling. The responsive transformation is automatic — no separate mobile configuration needed.
Text Columns
Plain text input columns within a Dynamic Grid. Each row captures free-form text in that column. Supports the same validation rules as standalone text fields — required, min/max length, regex patterns.
Radio Columns
Single-choice radio button columns within the grid. Each row has its own independent selection from the column's option list. Useful for per-row status selection, priority assignment, or yes/no choices.
Checkbox Columns
Boolean checkbox columns for each grid row. Toggle on or off per row. Used for flags, confirmations, or opt-in/opt-out choices that apply to each individual line item.
Select / Dropdown Columns
Dropdown selection columns in the grid. Each row independently selects from the same option list. Ideal for category assignment, size selection, or status fields in multi-row forms.
Quantity Columns
Numeric quantity input columns with increment/decrement controls per row. Supports min, max, and step constraints. Suitable for order grids, inventory forms, and any itemized list where quantities need to be specified per line.
Add / Remove Row Functionality
Users can dynamically add new rows or remove existing ones with a single click. Minimum and maximum row counts are configurable to prevent empty submissions or abuse. New rows inherit the column configuration and validation rules of the grid.
Tabular Data Input
Presents repeating structured data in a familiar spreadsheet-like table format. Combines all grid column types into a cohesive multi-field row experience. The table header row shows column names, and each data row is independently editable.
Frequently Asked Questions
WebForms includes 30+ distinct field types covering text inputs, selection fields, date/time pickers, file uploads, star ratings, digital signatures, Google Maps, dynamic grids, and more. Each field type has its own set of configuration options for validation, appearance, and behavior.
Yes. WebForms includes a full-featured file upload system with drag-and-drop (Dropzone), multiple file support, image preview, automatic resizing, file type restrictions, size limits, and secure storage. Uploaded files can be attached to email notifications and managed from the admin panel.
Yes. The Digital Signature field captures handwritten signatures via mouse or touch input on a canvas element. Signatures are saved as PNG images and attached to the submission. This is available in WebForms Suite and works on both desktop and mobile devices.
The Dynamic Grid is a multi-row tabular input where users can add and remove rows on the fly. Each column can be a text field, dropdown, radio button, checkbox, or quantity input. It's designed for order forms, attendee lists, and any scenario with repeating structured data. The grid automatically transforms into a mobile-friendly stacked layout on small screens.
Yes. WebForms offers Image Swatch fields that replace text-based option lists with clickable image thumbnails. Users select by clicking the image. The swatches automatically calculate contrasting label colors for readability. This is ideal for color selection, material choice, and style picking on product customization forms.
WebForms Lite covers every common form field: text, email, number, URL, password, auto-complete, textarea, HTML content blocks, hidden fields, select/dropdown, radio button, checkbox, multiselect, date picker, date of birth, phone number with country codes, subscription checkbox, and file upload with the Dropzone drag-and-drop uploader (file type and size restrictions, upload progress, admin access, secure storage). WebForms Suite adds WYSIWYG rich text, image swatches with contrast color, select-contact email routing, time picker, color picker, star rating, gallery picker, multiple file upload, image upload with automatic resizing, separate file cleanup management, file attachments in email notifications, independent file retention periods, digital signatures, Google Maps, and the full Dynamic Grid section (text/radio/checkbox/dropdown/quantity columns with add/remove rows).
The Phone Number field displays a country code selector with flag icons. When a user selects their country, the input mask and validation pattern automatically adapt to that country's phone number format. The field validates the entered number against the expected format before submission.
Yes. For logged-in customers, WebForms can automatically pre-populate text fields, email fields, and other inputs with data from the customer account — name, email, phone, and address. Fields can also be pre-filled via URL parameters for campaign tracking and personalized form links.
Build Forms with 30+ Field Types
From simple contact forms to complex multi-step workflows with file uploads, signatures, and dynamic grids