Adding Fields

Fields are the building blocks of your form. This guide covers how to add, organize, and manage fields effectively.

Field categories

Basic fields (free)

Layout elements (free)

Pro fields

Adding a field

Method 1: Drag and drop

1. Locate the field type in the left sidebar
2. Click and hold on the field
3. Drag it onto the form canvas
4. Release where you want the field to appear

A blue insertion line shows where the field will be placed.

Method 2: Double-Click

Double-click any field type in the sidebar to add it to the end of your form. Useful for quickly adding multiple fields.

Method 3: Duplicate existing

If you need multiple similar fields:

1. Select an existing field
2. Click the Duplicate icon
3. Modify the copy as needed

This preserves all settings from the original field.

Organizing fields

Reorder by dragging

Click and drag any field on the canvas to move it. The form updates in real-time.

Logical grouping

Consider grouping related fields together:

Personal Information
├── Name (text)
├── Email (email)
└── Phone (phone)

Message
├── Subject (text)
└── Message (textarea)

Preferences
├── Contact method (radio)
└── Newsletter opt-in (checkbox)

Use Divider fields to create visual separation between groups.

Form flow

Order fields from simple to complex:

1. Start with easy fields (name, email)
2. Place optional fields after required ones
3. End with the submission action

This reduces form abandonment.

Common patterns

Contact form

1. Name (text, required)
2. Email (email, required)
3. Subject (text, optional)
4. Message (textarea, required)

Newsletter signup

1. Email (email, required)
2. First Name (text, optional)
3. Interests (checkbox, optional)

Support request

1. Name (text, required)
2. Email (email, required)
3. Order Number (text, optional)
4. Issue Type (select, required)
5. Description (textarea, required)
6. Screenshot (file upload, optional) [Pro]

Appointment booking

1. Name (text, required)
2. Email (email, required)
3. Phone (phone, required) [Pro]
4. Preferred Date (date, required) [Pro]
5. Preferred Time (time, required) [Pro]
6. Notes (textarea, optional)

Tips

• Use placeholder text to show example input
• Mark optional fields clearly (or only mark required ones)
• Group related fields visually
• Consider mobile users, test on small screens