Drag and Drop Editor Overview

The WittyForm editor is a visual, drag-and-drop interface for building forms without writing any code. This guide walks you through every part of the editor so you can build forms quickly and confidently.

Editor Layout

The editor is divided into three main areas:

• Left panel (Field panel): Contains all available field types you can add to your form.
• Center (Canvas): The main workspace where your form takes shape. This is where you arrange, reorder, and preview your fields.
• Right panel (Settings panel): Displays configuration options for the currently selected field or for the form itself.

A toolbar at the top of the editor provides quick access to actions like preview, publish, undo, redo, and form settings.

The Field Panel

The left panel lists every field type available in WittyForm, organized into categories like Basic, Selection, Advanced, and Special. To add a field to your form:

• Click on any field type to append it to the bottom of your form.
• Drag a field type from the panel and drop it at a specific position on the canvas.

You can collapse or expand categories in the field panel to keep things tidy while you work.

The Canvas

The canvas is the central workspace where you build and arrange your form. Each field appears as a card that you can interact with:

• Click a field to select it and open its settings in the right panel.
• Drag a field up or down to reorder it within the form.
• Hover over a field to reveal quick action buttons: duplicate, delete, and a drag handle.

The canvas shows a real-time representation of your form. As you make changes to settings, you see the updates instantly on the canvas.

The Settings Panel

When you select a field on the canvas, the right panel shows all configurable options for that field. The available settings vary by field type, but common options include:

• Label: The question or prompt displayed to respondents.
• Placeholder: Hint text shown inside the input.
• Description: Helper text displayed below the label.
• Required: Whether the field must be filled before submission.
• Validation: Rules like min/max length, patterns, or allowed values.
• Conditional logic: Show or hide the field based on other answers.

When no field is selected, the right panel shows form-level settings including the form title, description, theme, and submission behavior.

Preview Mode

Click the Preview button in the toolbar to see your form exactly as respondents will see it. Preview mode lets you:

• Fill in fields and test validation rules.
• Test conditional logic to make sure the right fields appear.
• Navigate between pages on multi-page forms.
• Check the responsive layout on different screen sizes.

Click Exit Preview to return to the editor.

Mobile Preview

Many respondents will fill out your form on a phone or tablet. Click the mobile icon in the preview toolbar to switch to a mobile preview that simulates how your form looks on smaller screens. This helps you catch layout issues before publishing.

Undo and Redo

Made a mistake? Use the Undo and Redo buttons in the toolbar, or use keyboard shortcuts:

• Ctrl+Z (or Cmd+Z on Mac): Undo the last action.
• Ctrl+Shift+Z (or Cmd+Shift+Z on Mac): Redo the last undone action.

WittyForm tracks your full editing history for the current session, so you can undo multiple steps in sequence.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

• Ctrl+S / Cmd+S: Save the form.
• Ctrl+Z / Cmd+Z: Undo.
• Ctrl+Shift+Z / Cmd+Shift+Z: Redo.
• Ctrl+D / Cmd+D: Duplicate the selected field.
• Delete / Backspace: Delete the selected field.
• Escape: Deselect the current field.
• Ctrl+P / Cmd+P: Toggle preview mode.

Auto-Save

WittyForm automatically saves your work as you edit. You will see a small "Saved" indicator in the toolbar after each change. There is no need to manually save, but you can still use Ctrl+S if you want to trigger an immediate save.