Form Builder

Everything about the drag-and-drop builder — adding fields, editing settings, saving, reordering, and managing your forms.

20 questions answered

The builder has three panels: a left sidebar with your field library, a center canvas where you build your form, and a right panel for field settings. Simply drag fields from the sidebar onto the canvas, then click any field to configure it.

Drag any field type from the left sidebar and drop it onto the form canvas. Fields are organized into categories like Contact Info, Selects, Input, Text, Ratings, and more. You can also reorder fields by dragging them within the canvas.

Fields are grouped into nine categories:

  • Contact Info — Email, text, phone, password, country
  • Selects — Dropdowns, checkboxes, radio buttons, toggles, and more
  • Input — URL, date/time, hidden, repeater, signature
  • Text — Single-line text, textarea
  • Static Text — Headings, paragraphs, HTML, dividers
  • Ratings — Stars, levels, feedback emoji, matrix
  • File Upload, Color, Number

Click on any field in the canvas to select it. The right panel will show its settings, including label, placeholder, description, required toggle, column width, and type-specific options. Changes are reflected in real time on the canvas.

Every field has common settings like label, placeholder, description, required toggle, and column width (100% or 50%). Depending on the field type, you'll also see options for validation rules, min/max values, option lists, input icons, and conditional display rules.

Yes! You can create row layouts to display fields side by side. Set a field's column width to 50% to make it share a row with another field, or use the row container to group 2 to 10 fields horizontally. This is great for name fields (First + Last) or address layouts.

Select any field on the canvas and click the Duplicate button. A copy of the field with all its settings will be added to your form. This saves time when you need similar fields with slight variations.

Select the field on the canvas and click the Delete button. The field and all its settings will be removed from your form immediately.

Click the Save button in the form builder. The app validates your form name, header, content pages, and footer before saving. If you're editing an existing form, it updates in place. New forms get a unique 8-character form ID automatically.

Go to your Forms list and click on the form you want to edit. It opens in the builder with all your fields, settings, design, integrations, and email config loaded and ready to modify.

Yes. Simply drag and drop fields within the canvas to change their order. The builder supports full drag-and-drop reordering, so you can rearrange your form layout at any time.

The form builder has several tabs beyond the field canvas:

  • Design/Appearance — Layout, colors, fonts, background
  • After Submit — What happens when someone submits the form
  • Email Settings — Admin notifications and auto-responders
  • Integrations — Connect third-party services

Yes. The form builder includes a live preview component that shows you exactly how your form will look with all field types rendered, including your design and appearance settings.

There is no strict field limit per page, but for AI-generated forms, there's a cap of 20 elements per page and 5 pages maximum. For manually-built forms, you can add as many fields as you need, though keeping forms concise tends to improve completion rates.

Yes. In the field settings panel, there's a Hide Label toggle that lets you hide the label from displaying on the form. This is useful when you want a cleaner look or when the placeholder text is descriptive enough.

Yes. The field settings panel includes an input icon selection option. The app comes with over 200 SVG icons to choose from, letting you add visual cues to your input fields.

Your form structure includes a header section (typically for the form title and description) and a footer section. Both are part of the form's page configuration and can be customized in the builder.

Unsaved changes will be lost if you navigate away from the form builder. Make sure to save your form before leaving the page. The builder uses in-memory state, so everything is held locally until you hit Save.

Yes. Every field has a Required toggle in the settings panel. When enabled, the form cannot be submitted until the visitor fills in that field. Required validation happens both on the storefront and server-side.

Go to your Forms list, select the form(s) you want to remove, and use the Delete action. The app supports bulk deletion and will also clean up any associated metafields from your Shopify store.

Still have questions?

Install the app and reach out directly — we're here to help.

Install Free on Shopify