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:
Left sidebar - field palette
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
- Find the field type in the left sidebar
- Drag it onto the canvas
- 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
| Shortcut | Action |
|---|---|
Delete / Backspace | Delete selected field |
Ctrl/Cmd + S | Save form |
Escape | Deselect current field |
Tab | Move to next field |
Shift + Tab | Move 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
- Adding Fields - Detailed guide to adding fields
- Field Settings - Configure individual fields
- Form Settings - Global form configuration