Forms Mode
Forms mode lets you add a contact or quote request form to your configurator. Users fill out the form with their details, and the submission includes their full configuration, calculated price, and a 3D screenshot.
Form Field Types
There are 11 field types available. Drag to reorder fields in the form editor.
| Field Type | Description | Key Settings |
|---|---|---|
| Name | A name input. Can be a single full-name field or split into first + last name. | Required, placeholder, split mode. |
| Email address with built-in format validation. | Required, placeholder, confirmation email toggle. | |
| Text Input | Single-line free text for company name, order reference, etc. | Required, placeholder, min/max length. |
| Telephone | Phone number input with international format support. | Required, placeholder, country code prefix. |
| Dropdown | Select from predefined options (e.g., "How did you hear about us?", "Budget range"). | Required, option list, placeholder. |
| Country / State / City | Cascading location selector — country first, then state, then city. | Required, show/hide each level. |
| Acceptance (Checkbox) | A single checkbox for terms, privacy policy, or marketing consent. | Required (must be checked), label with link support. |
| Submit Button | The form submission button. Customise the label and style. | Button label, loading text, success text. |
| Add to Cart | An "Add to Cart" button for e-commerce integrations. Sends the configuration to the cart. | Button label, integration target (WooCommerce, Shopify, etc.). |
| Header / Title | A non-interactive heading for grouping form sections. | Heading text, size (H2, H3, H4). |
| Confirmation | A confirmation / success message displayed after form submission. | Success heading, success message, redirect URL (optional). |
Setting Up a Form: Step by Step
- 1Go to Project Settings > Display tab and enable "Show Form". Set the form button label (e.g., "Request Quote", "Get Pricing", "Contact Us").
- 2Switch to Forms mode in the editor.
- 3Click "Add Field" and choose a field type from the list.
- 4For each field, configure: label, placeholder, required/optional, and any type-specific settings.
- 5Drag fields to reorder them in the form.
- 6Add a "Header / Title" field to group related sections (e.g., "Contact Details", "Shipping Address").
- 7Add an "Acceptance" checkbox with a link to your terms/privacy page.
- 8Configure the "Confirmation" field — this is the success message users see after submission.
- 9Add either a "Submit" button or an "Add to Cart" button (for e-commerce integrations).
Custom CSS Presets
Each form field supports a Custom CSS preset. This lets you override the default field styling without editing global CSS. Use it for branding adjustments like border radius, font size, or padding.
Form Preview & Validation
Use the Form Preview to test your form without leaving the editor. The preview runs full validation diagnostics — it highlights required fields, checks email format, and verifies that all submission requirements are met. Fix any validation warnings before publishing.
What Users See
When "Show Form" is enabled, a button (e.g., "Request Quote") appears in the configurator. Clicking it opens the form. After submission, the form data, the current configuration state, a 3D screenshot, and the calculated price (if pricing is enabled) are all captured and sent as a Request.