Form Editor

Editor Overview

The Mobyform visual editor uses drag-and-drop design, letting you build professional forms without writing code.

Editor Layout

The editor interface has three main areas:

Left Panel - Field List

The left panel shows all available field components, grouped by category:

• Basic Fields - Text input, number, radio, checkbox, etc.
• Advanced Fields - Matrix, rating, signature, scan, verification, etc.
• Layout Components - Pagination, divider, heading, description
• Special Components - File upload, image upload, privacy consent, reCAPTCHA

Drag fields from the left panel onto the canvas to add them.

Center Area - Form Canvas

The canvas is a WYSIWYG editing area:

• Drag fields to reorder them
• Click a field to select and edit it
• Multi-column layout support
• Real-time form preview

Right Panel - Property Configuration

When a field is selected, the right panel shows its settings:

• Basic Properties - Label, placeholder, default value
• Validation Rules - Required, format, length limits
• Appearance - Column width, label position
• Advanced Options - Conditional logic, formulas

Core Operations

Adding Fields

• Drag to Add - Drag from the left panel to a specific position
• Click to Add - Click a field to append it to the end
• Duplicate - Select a field and click the "Copy" button

Sorting and Layout

• Drag to Sort - Drag fields up or down to reorder
• Multi-Column Layout - Adjust field column span for side-by-side layout
• Grid Gutter - Set column gap spacing

Editing Fields

1. Click a field on the canvas to select it
2. Modify properties in the right panel
3. Changes reflect on the canvas in real time

Deleting Fields

• Select a field and click the "Delete" button
• Deleted fields go to the recycle bin for recovery

Keyboard Shortcuts

Form Configuration

Basic Settings

• Form Title - Set the form name
• Form Description - Add a description
• Form Size - Small / Default / Large
• Label Position - Top / Left / Right
• Label Width - Custom label width
• Show Numbering - Auto-number fields
• Show Required Asterisk - Mark required fields with *

Button Settings

• Customize submit button text
• Show/hide reset button
• Button alignment (Left / Center / Right)

Theme Tab

Use the Theme tab to control the form's visual experience:

• Design the current form with colors, fonts, input styles, button styles, cover page, logo, footer, watermark, and custom CSS.
• Browse the theme library by All, Mine, or Public themes.
• Search themes by theme name or category.
• Apply a theme after confirming that only visual styling will be replaced.
• Save the current styling as My Theme for reuse on other forms.

Pagination

Use the "Pagination" component to split long forms into multiple pages:

• Independent validation per page
• Previous/Next navigation
• "One question per page" mode available

Preview

The editor offers multiple preview modes:

• Desktop Preview - See the desktop layout
• Mobile Preview - See the mobile layout
• Live Preview - See changes as you edit

Recycle Bin

Accidentally deleted fields can be recovered:

1. Click the "Recycle Bin" icon in the editor toolbar
2. View the list of deleted fields
3. Click "Restore" to add the field back

Next Steps

• Field Types - Learn about each field type
• Conditional Logic - Set up show/hide logic
• Theme Customization - Customize form appearance
• Templates - Create forms from reusable templates