Building a Web Form

The form builder is a full-screen modal with three tabs: Build, Design & Preview, and Go Live. This guide walks you through each step.

Opening the Builder

When you create a new form or edit an existing one, the builder opens automatically. The title bar shows Create New Form, Edit Form, or View Form depending on how you opened it.

At the bottom of the builder you will always see navigation buttons:

  • Cancel -- Close the builder (you will be prompted if there are unsaved changes).
  • Save Draft -- Save your work without publishing.
  • Next -- Move to the next tab.
  • Back -- Return to the previous tab.
  • Publish Form -- Appears on the final tab to make your form live.

The builder auto-saves your draft every few seconds after the initial save.

Build Tab

The Build tab is a three-column layout where you assemble your form.

CRM Variables Panel (Left Column)

This panel lists all available CRM Variables from your contact database. Each variable shows its name and field type.

  • Drag or click the + button next to any variable to add it as a form field.
  • Variables already on the form are hidden from the list.
  • Essential variables (Name, Phone Number, Email Address) are labeled with an Essential badge.
  • Click New at the top of the panel to create a new CRM variable on the spot, which adds a new Customer Information Field to your CRM.

If you chose a template, a suggested fields section appears with recommended CRM variables to create for that template.

File Upload Field

Below the CRM Variables panel is a File Upload section. Click Add File Upload Field to let form visitors upload documents. File upload fields support configurable limits for the number of files, accepted file types (JPEG, PNG, PDF), and maximum file size.

Form Canvas (Center Column)

The center column shows a live preview of your form structure. Here you can:

  • Edit the form title -- Click the title to change it (defaults to "Untitled Form").
  • Edit the description -- Add an optional description below the title.
  • Edit the submit button text -- Customize what the submit button says.
  • Reorder fields -- Drag fields up or down to change their order. If reordering breaks any conditional logic rules, a confirmation dialog appears.
  • Select a field -- Click on any field to open its settings in the right panel.
  • Delete a field -- Click the delete icon on a field. If the field is marked as essential, a confirmation dialog will appear.

Field Editor Panel (Right Column)

When you select a field, the right panel shows its configuration options:

  • Label -- The question text shown to the visitor.
  • Placeholder -- Hint text inside the input.
  • Required -- Whether the field must be filled out.
  • Options -- For dropdown/select fields, configure the list of options.
  • Allow Other -- For dropdown fields, let visitors type a custom answer.
  • Validation -- For file upload fields, set max files, accepted types, and size limits.

Conditional Logic

Below the basic field settings is the Logic Builder, which provides two types of conditional logic:

Visibility Logic -- Show or hide this field based on answers to previous fields. You can:

  • Toggle visibility logic on or off.
  • Set the action to Show or Hide when conditions are met.
  • Add one or more condition groups, each with conditions like "equals," "not equals," "contains," etc.
  • Connect groups with AND or OR logic.

Jump Logic -- Skip to a specific field or end the form based on this field's answer. You can:

  • Toggle jump logic on or off.
  • Set the action to Jump To a specific field or End Form with a custom message.
  • Set a priority number when multiple fields have jump logic (higher priority takes effect first).
  • Add condition groups to define when the jump should trigger.

Fields with active logic display a Logic badge in the preview.

Design & Preview Tab

The Design & Preview tab has two sections:

Design Settings (Left)

Customize the visual appearance of your form:

  • Background Theme -- Choose between Light and Dark mode.
  • Typography -- Select a font from the dropdown (e.g., Inter, DM Sans, Poppins, Roboto, and more).
  • Button Color -- Pick from preset color swatches or use the Custom color picker to set any hex color.

Live Preview (Right)

A real-time preview shows exactly how your form will look to visitors. You can interact with it:

  • Fill in fields to test conditional logic.
  • See visibility and jump logic in action (a success message appears when logic triggers).
  • Fields disabled by jump logic show a (Skipped) label.
  • If an End Form jump triggers, the custom end-of-form message displays in the preview.

Go Live Tab

The Go Live tab provides a summary and sharing options.

Form Summary

Review your form before publishing:

  • Form Title -- The name visitors will see.
  • Form Fields -- A list of all fields with their type, and badges for Required and Essential fields.
  • Design Settings -- A recap of theme, typography, button color, and button text.

Share Your Form

  • Custom URL Slug -- Optionally set a custom slug to make your form URL more readable (e.g., my-contact-form). The slug is auto-sanitized as you type.
  • Form URL -- After publishing, your unique form link appears. Click Copy Link to copy it or Preview to open it in a new tab.
  • Next Steps -- Suggestions for sharing the link, embedding on your website, and tracking submissions.

Click Publish Form in the footer to make the form live. After publishing, you are taken to the form details view.

Next Steps