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, map, etc.
• Layout Components — Pagination, divider, heading, description
• Special Components — File upload, phone verification, OCR

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