Creating Your First Form

The BttrForm form builder is where your forms come to life. Whether you started from an AI-generated draft or a blank canvas, this guide covers everything you need to know about the builder interface — adding fields, configuring validation, arranging layout, and previewing your work.

The Builder Interface

When you open the form builder, you see three main areas:

• Field Palette (left sidebar) — all available field types organized by category
• Form Canvas (center) — your form as it will appear to respondents
• Settings Panel (right sidebar) — configuration options for the selected field

The toolbar at the top gives you access to form-level settings, preview, undo/redo, and the publish button.

Adding Fields to Your Form

Drag and Drop

The most intuitive way to add fields is to drag them from the field palette directly onto the canvas. A blue indicator shows where the field will be placed when you drop it.

Click to Add

Alternatively, click any field type in the palette and it will be appended to the bottom of your form. You can reorder it afterward by dragging.

AI Field Suggestions

As you build, BttrForm's AI watches the context of your form and suggests relevant fields you might have missed. For example, if you add "First Name" and "Last Name" fields, the AI may suggest adding an "Email" field. These suggestions appear as a subtle prompt below your last field — click to accept or dismiss them.

Configuring Field Properties

Click any field on the canvas to open its settings in the right panel. Every field type shares a common set of properties:

Basic Properties

Field-Specific Properties

Each field type has its own additional settings. For example:

• Text fields have min/max character length and regex pattern validation
• Number fields have min/max value and step increment
• Dropdown and radio fields have option lists with optional default selection
• File upload fields have allowed file types and max file size

See the Field Types guide for a complete reference.

Setting Up Validation

Validation ensures respondents provide data in the format you expect. BttrForm supports several validation layers:

Built-In Validation

Toggle Required on any field to prevent blank submissions. Built-in format validation applies automatically to specialized fields — an email field checks for a valid email format, a URL field validates the URL structure, and a phone field accepts standard phone number patterns.

Custom Validation Rules

For more control, open the Validation tab in the field settings panel:

Field: "Company Website"
Type: URL
Required: Yes
Custom validation:
  - Pattern: ^https://.*
  - Error message: "Please enter a URL starting with https://"

You can define custom regex patterns, character limits, numeric ranges, and custom error messages that display inline when validation fails.

Conditional Validation

Validation rules can be conditional. For example, you might require a phone number only when the respondent selects "Phone" as their preferred contact method. Set this up in the Logic tab of the field settings.

Arranging Your Form Layout

Reordering Fields

Drag any field up or down on the canvas to rearrange the order. A visual indicator shows the new position before you drop.

Field Grouping

Group related fields together using Section blocks. A section acts as a visual container with an optional heading and description. Drag fields into a section to group them, or drag them out to ungroup.

Section: "Contact Information"
  - First Name (text, required)
  - Last Name (text, required)
  - Email (email, required)
  - Phone (phone, optional)

Section: "Feedback"
  - Overall Rating (rating, required)
  - Comments (textarea, optional)

Column Layouts

By default, each field occupies the full width of the form. For shorter fields, you can place them side by side using column layouts. Select two or more fields, then choose "Arrange in columns" from the toolbar. BttrForm supports two-column and three-column layouts.

Conditional Logic

Show or hide fields based on respondent answers using the Logic tab. This keeps your form short and relevant.

Example: Only show the "Dietary Requirements" field when the respondent answers "Yes" to "Will you attend the dinner?"

To set up conditional logic:

1. Select the field you want to show/hide
2. Open the Logic tab in the settings panel
3. Click "Add condition"
4. Choose the trigger field, operator (equals, contains, greater than, etc.), and value
5. Set the action: Show or Hide this field

You can combine multiple conditions with AND/OR operators for complex logic flows.

Previewing Your Form

Click "Preview" in the top toolbar to launch a live preview of your form. The preview is fully interactive — you can fill in fields, trigger conditional logic, and test validation.

Use the device toggle buttons to switch between:

• Desktop (1280px) — default view
• Tablet (768px) — check field layout on medium screens
• Mobile (375px) — verify touch targets and readability

Form-Level Settings

Access form-level settings from the gear icon in the top toolbar:

• Form Name — internal name visible only on your dashboard
• Submit Button Text — customize the label (e.g., "Send Feedback", "Register Now")
• Success Message — the confirmation respondents see after submitting
• Redirect URL — optionally redirect respondents to another page after submission
• Close Date — automatically stop accepting responses after a date
• Response Limit — cap the total number of responses

Saving and Versioning

BttrForm auto-saves your work every few seconds. You will see a "Saved" indicator in the toolbar. Every save creates a snapshot you can restore from the Version History panel if you ever need to roll back changes.

Next Steps

Your form is built and validated. Time to share it with the world:

• Publishing & Sharing — get your form in front of respondents
• Themes & Styling — make it visually match your brand
• Multi-step Forms — split long forms into manageable pages