Fodo Docs
Forms

Builder Overview

Understanding the Fodo Forms drag-and-drop builder

Form Builder Overview

The Fodo Forms builder is a visual drag-and-drop interface for creating forms. No coding required.

Interface layout

The builder is divided into three main areas:

Contains all available field types organized by category:

  • Basic Fields: Text, Email, Textarea, Number, Select, Radio, Checkbox
  • Layout: Hidden, HTML, Divider
  • Pro Fields: File Upload, Date, Time, Phone, Signature

Drag fields from here onto the canvas to add them to your form.

Center - form canvas

This is where your form takes shape. Fields appear here as you add them:

  • Drag to reorder: Click and drag fields to rearrange them
  • Click to select: Click any field to edit its settings
  • Delete: Click the trash icon or press Delete/Backspace

Right panel - settings

Context-sensitive settings panel with two tabs:

  • Field Settings: Appears when a field is selected. Configure label, placeholder, validation, etc.
  • Form Settings: Global form settings like notifications, success message, and styling.

Working with the builder

Adding fields

  1. Find the field type in the left sidebar
  2. Drag it onto the canvas
  3. Drop it where you want it to appear

Or double-click a field type to add it to the end of your form.

Selecting fields

Click any field on the canvas to select it. The selected field shows:

  • A blue border indicating selection
  • Field settings in the right panel
  • Drag handle for repositioning

Reordering fields

Drag any field up or down on the canvas to change its position. A blue line indicates where the field will be placed when you release.

Deleting fields

With a field selected:

  • Click the trash icon in the field settings
  • Or press the Delete or Backspace key

Deleting a field is permanent within the current session. Save your form to preserve the current state.

Duplicating fields

Click the duplicate icon in the field settings to create a copy of the selected field. The duplicate appears directly below the original.

Keyboard shortcuts

ShortcutAction
Delete / BackspaceDelete selected field
Ctrl/Cmd + SSave form
EscapeDeselect current field
TabMove to next field
Shift + TabMove to previous field

Saving your form

Click the Save button in the top right corner. The form is saved to your WordPress database and the shortcode is displayed.

Forms auto-save periodically, but always manually save before leaving the page.

Form status

Forms can have two statuses:

  • Published: Form is live and can receive submissions
  • Draft: Form exists but won't accept submissions

Change status in Form Settings or from the forms list.

Next steps