Visual Form Builder
A powerful drag-and-drop form designer with 25 field types across 5 categories, multi-locale support, conditional logic, field validation, responsive width controls, form settings, template gallery, live preview, and embed code generation. Build complex forms without writing any code.
No-Code Form Design Studio
The Form Builder is a full-featured visual designer powered by dnd-kit for drag-and-drop interactions. The interface is divided into three panels: the Field Palette (left) containing all available field types organized by category, the Canvas (center) where you arrange and configure your form fields, and the Properties Panel (right) for editing the selected field's details including labels, validation, conditional logic, and width settings. All content supports multi-locale translations — configure every label, placeholder, and error message in both English and Turkish (or any configured locale).
Field Types (25 Total)
📝 Input Fields (11 types)
| Field Type | Icon | Description | Validation Options |
|---|---|---|---|
| Text | Type | Single-line text input | minLength, maxLength, pattern (regex) |
| Textarea | AlignLeft | Multi-line text area | minLength, maxLength |
| Rich Text | FileText | WYSIWYG rich text editor | minLength, maxLength |
| Email address input with format validation | pattern (auto email regex) | ||
| Phone | Phone | Phone number input | pattern |
| Number | Hash | Numeric input | min, max |
| Currency | DollarSign | Monetary amount input | min, max |
| URL | Link | Web address input with URL validation | pattern |
| Date | Calendar | Date picker | min date, max date |
| Time | Clock | Time picker | min time, max time |
| DateTime | CalendarClock | Combined date and time picker | min, max |
☑️ Selection Fields (4 types)
| Field Type | Icon | Description | Has Options |
|---|---|---|---|
| Select | ChevronDown | Single-select dropdown | ✅ Yes — configurable option list with multi-locale labels |
| Multi-Select | ListChecks | Multi-select dropdown | ✅ Yes |
| Checkbox | CheckSquare | Checkbox group | ✅ Yes |
| Radio | CircleDot | Radio button group | ✅ Yes |
📎 Media Fields (2 types)
| Field Type | Icon | Description | Validation Options |
|---|---|---|---|
| File Upload | Paperclip | General file attachment | fileTypes, maxFileSize, maxFiles |
| Image Upload | Image | Image-specific upload with preview | fileTypes, maxFileSize, maxFiles |
🔧 Advanced Fields (4 types)
| Field Type | Icon | Description |
|---|---|---|
| Rating | Star | Star rating selector (1–5) |
| Signature | PenLine | Digital signature pad for e-signatures |
| Address | MapPin | Structured address fields (street, city, state, zip, country) |
| Hidden | EyeOff | Invisible field for tracking (e.g., UTM params, referral source) |
📐 Layout Elements (4 types)
| Type | Icon | Description |
|---|---|---|
| Heading | Heading | Section title for organizing form sections |
| Paragraph | AlignJustify | Informational text block (instructions, disclaimers) |
| Divider | Minus | Visual horizontal separator line |
| Layout Image | ImageIcon | Decorative image element within the form |
🖱️ Drag-and-Drop Canvas
Drag field types from the Field Palette on the left directly onto the Canvas. Fields can be reordered by dragging within the canvas. Each field shows its label, type icon, and a quick preview of its configuration. Select any field to open its Properties Panel on the right for detailed editing.
📏 Responsive Width Control
Each field supports four width options: Full (100%), Two-Thirds (66%), Half (50%), and Third (33%). This enables flexible multi-column layouts — for example, place "First Name" and "Last Name" side by side at half width, followed by a full-width "Email" field.
🔀 Conditional Logic
Make fields show or hide dynamically based on other field values. Each field supports a Conditional Logic configuration with: Action (Show or Hide), Logic Type (All conditions or Any condition), and multiple Rules. Each rule references another field's key and applies an operator: equals, notEquals, contains, notContains, greaterThan, lessThan, isEmpty, isNotEmpty.
🌐 Multi-Locale Translations
Every text element in the form supports multiple languages. For each field, configure Label, Placeholder, Description, and Error Message in every configured locale. The form automatically displays the correct language based on the user's locale setting. Option values for select/checkbox/radio fields also support per-locale labels.
📋 Form Templates
Start from scratch or use the Template Selector to begin with a pre-built template. Templates provide common form structures (contact form, survey, registration, etc.) with fields already configured. You can customize any template after selection.
⚙️ Form Settings
The Settings Panel controls form-level behavior: Require Authentication (users must log in), Allow Anonymous submissions, Enable CAPTCHA for bot protection, Submit Limit (max submissions per user), Redirect URL (post-submit navigation), Closed Message (displayed when form is closed), and Notification Emails (receive alerts for new submissions).
Form Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
| Require Auth | Toggle | Off | When enabled, only logged-in users can submit the form |
| Allow Anonymous | Toggle | On | Allow submissions without user identification |
| CAPTCHA | Toggle | Off | Add CAPTCHA verification to prevent automated submissions |
| Submit Limit | Number | — | Maximum number of submissions allowed per user |
| Redirect URL | URL | — | URL to redirect users after successful submission |
| Closed Message | Text | — | Message displayed when the form is in "Closed" status |
| Notify Emails | Email List | [] | Email addresses that receive a notification for each new submission |
Step-by-Step: Building a Contact Form
- Create a new form from the forms list page.
- Open the form builder at
/admin/forms/{id}/builder. - Add Heading: Drag a "Heading" layout element and set the label to "Contact Us".
- Add Name Fields: Drag two "Text" fields. Set them both to "Half" width. Label them "First Name" and "Last Name". Mark both as required.
- Add Email: Drag an "Email" field at full width. Mark as required.
- Add Phone: Drag a "Phone" field at half width (optional).
- Add Subject: Drag a "Select" field. Add options: "General Inquiry", "Sales", "Support", "Partnership".
- Add Conditional Field: Drag a "Text" field labeled "Company Name". Set conditional logic: Show when "Subject" equals "Partnership".
- Add Message: Drag a "Textarea" field at full width. Set minLength to 20 characters.
- Configure Settings: Enable CAPTCHA, set notification email to support@company.com.
- Add Translations: Switch to Turkish locale tab and add TR labels for every field.
- Preview: Click the preview button to test the form experience.
- Save & Embed: Save the form, then generate the embed code for your website.
Enterprise Use Case: Multi-Step Event Registration
A global tech conference needs a registration form supporting 3 languages (EN, TR, DE). The marketing team opens the Form Builder. They start with the "Event Registration" template, then customize: add a Heading for each section ("Attendee Info", "Session Preferences", "Dietary Requirements"), use conditional logic so "Dietary Details" only appears when "Special Dietary Needs" checkbox is checked, add an Address field for badge shipping, include a Signature field for the terms acceptance, and set a Hidden field with the UTM campaign code. Each text element is translated into all 3 languages. The form is set to Require Authentication so they can track which registered users signed up, with a Submit Limit of 1 to prevent duplicates. The Redirect URL points to the confirmation page. Upon launch, the form collects 2,400 registrations across all three languages — with conditional logic ensuring the form adapts to each attendee's unique needs.
Comments
Leave a comment