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.
Last updated: 04/14/2026, 10:12 AM
<div class="features-wrapper">
<h2>No-Code Form Design Studio</h2>
<p>The Form Builder is a full-featured visual designer powered by <strong>dnd-kit</strong> for drag-and-drop interactions. The interface is divided into three panels: the <strong>Field Palette</strong> (left) containing all available field types organized by category, the <strong>Canvas</strong> (center) where you arrange and configure your form fields, and the <strong>Properties Panel</strong> (right) for editing the selected field's details including labels, validation, conditional logic, and width settings. All content supports <strong>multi-locale translations</strong> — configure every label, placeholder, and error message in both English and Turkish (or any configured locale).</p>
<h2>Field Types (25 Total)</h2>
<h3>📝 Input Fields (11 types)</h3>
<table>
<thead>
<tr><th>Field Type</th><th>Icon</th><th>Description</th><th>Validation Options</th></tr>
</thead>
<tbody>
<tr><td><strong>Text</strong></td><td>Type</td><td>Single-line text input</td><td>minLength, maxLength, pattern (regex)</td></tr>
<tr><td><strong>Textarea</strong></td><td>AlignLeft</td><td>Multi-line text area</td><td>minLength, maxLength</td></tr>
<tr><td><strong>Rich Text</strong></td><td>FileText</td><td>WYSIWYG rich text editor</td><td>minLength, maxLength</td></tr>
<tr><td><strong>Email</strong></td><td>Mail</td><td>Email address input with format validation</td><td>pattern (auto email regex)</td></tr>
<tr><td><strong>Phone</strong></td><td>Phone</td><td>Phone number input</td><td>pattern</td></tr>
<tr><td><strong>Number</strong></td><td>Hash</td><td>Numeric input</td><td>min, max</td></tr>
<tr><td><strong>Currency</strong></td><td>DollarSign</td><td>Monetary amount input</td><td>min, max</td></tr>
<tr><td><strong>URL</strong></td><td>Link</td><td>Web address input with URL validation</td><td>pattern</td></tr>
<tr><td><strong>Date</strong></td><td>Calendar</td><td>Date picker</td><td>min date, max date</td></tr>
<tr><td><strong>Time</strong></td><td>Clock</td><td>Time picker</td><td>min time, max time</td></tr>
<tr><td><strong>DateTime</strong></td><td>CalendarClock</td><td>Combined date and time picker</td><td>min, max</td></tr>
</tbody>
</table>
<h3>☑️ Selection Fields (4 types)</h3>
<table>
<thead>
<tr><th>Field Type</th><th>Icon</th><th>Description</th><th>Has Options</th></tr>
</thead>
<tbody>
<tr><td><strong>Select</strong></td><td>ChevronDown</td><td>Single-select dropdown</td><td>✅ Yes — configurable option list with multi-locale labels</td></tr>
<tr><td><strong>Multi-Select</strong></td><td>ListChecks</td><td>Multi-select dropdown</td><td>✅ Yes</td></tr>
<tr><td><strong>Checkbox</strong></td><td>CheckSquare</td><td>Checkbox group</td><td>✅ Yes</td></tr>
<tr><td><strong>Radio</strong></td><td>CircleDot</td><td>Radio button group</td><td>✅ Yes</td></tr>
</tbody>
</table>
<h3>📎 Media Fields (2 types)</h3>
<table>
<thead>
<tr><th>Field Type</th><th>Icon</th><th>Description</th><th>Validation Options</th></tr>
</thead>
<tbody>
<tr><td><strong>File Upload</strong></td><td>Paperclip</td><td>General file attachment</td><td>fileTypes, maxFileSize, maxFiles</td></tr>
<tr><td><strong>Image Upload</strong></td><td>Image</td><td>Image-specific upload with preview</td><td>fileTypes, maxFileSize, maxFiles</td></tr>
</tbody>
</table>
<h3>🔧 Advanced Fields (4 types)</h3>
<table>
<thead>
<tr><th>Field Type</th><th>Icon</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><strong>Rating</strong></td><td>Star</td><td>Star rating selector (1–5)</td></tr>
<tr><td><strong>Signature</strong></td><td>PenLine</td><td>Digital signature pad for e-signatures</td></tr>
<tr><td><strong>Address</strong></td><td>MapPin</td><td>Structured address fields (street, city, state, zip, country)</td></tr>
<tr><td><strong>Hidden</strong></td><td>EyeOff</td><td>Invisible field for tracking (e.g., UTM params, referral source)</td></tr>
</tbody>
</table>
<h3>📐 Layout Elements (4 types)</h3>
<table>
<thead>
<tr><th>Type</th><th>Icon</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><strong>Heading</strong></td><td>Heading</td><td>Section title for organizing form sections</td></tr>
<tr><td><strong>Paragraph</strong></td><td>AlignJustify</td><td>Informational text block (instructions, disclaimers)</td></tr>
<tr><td><strong>Divider</strong></td><td>Minus</td><td>Visual horizontal separator line</td></tr>
<tr><td><strong>Layout Image</strong></td><td>ImageIcon</td><td>Decorative image element within the form</td></tr>
</tbody>
</table>
<div class="feature-grid">
<div class="feature-card">
<h3>🖱️ Drag-and-Drop Canvas</h3>
<p>Drag field types from the <strong>Field Palette</strong> on the left directly onto the <strong>Canvas</strong>. 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 <strong>Properties Panel</strong> on the right for detailed editing.</p>
</div>
<div class="feature-card">
<h3>📏 Responsive Width Control</h3>
<p>Each field supports four width options: <strong>Full</strong> (100%), <strong>Two-Thirds</strong> (66%), <strong>Half</strong> (50%), and <strong>Third</strong> (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.</p>
</div>
<div class="feature-card">
<h3>🔀 Conditional Logic</h3>
<p>Make fields show or hide dynamically based on other field values. Each field supports a <strong>Conditional Logic</strong> configuration with: Action (<em>Show</em> or <em>Hide</em>), Logic Type (<em>All conditions</em> or <em>Any condition</em>), and multiple Rules. Each rule references another field's key and applies an operator: <code>equals</code>, <code>notEquals</code>, <code>contains</code>, <code>notContains</code>, <code>greaterThan</code>, <code>lessThan</code>, <code>isEmpty</code>, <code>isNotEmpty</code>.</p>
</div>
<div class="feature-card">
<h3>🌐 Multi-Locale Translations</h3>
<p>Every text element in the form supports multiple languages. For each field, configure <strong>Label</strong>, <strong>Placeholder</strong>, <strong>Description</strong>, and <strong>Error Message</strong> 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.</p>
</div>
<div class="feature-card">
<h3>📋 Form Templates</h3>
<p>Start from scratch or use the <strong>Template Selector</strong> 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.</p>
</div>
<div class="feature-card">
<h3>⚙️ Form Settings</h3>
<p>The <strong>Settings Panel</strong> controls form-level behavior: <strong>Require Authentication</strong> (users must log in), <strong>Allow Anonymous</strong> submissions, <strong>Enable CAPTCHA</strong> for bot protection, <strong>Submit Limit</strong> (max submissions per user), <strong>Redirect URL</strong> (post-submit navigation), <strong>Closed Message</strong> (displayed when form is closed), and <strong>Notification Emails</strong> (receive alerts for new submissions).</p>
</div>