Skip to content

Create a form

Create a form from a template or from a blank layout, then configure it in the form builder. After you save, publish the form so customers can see it on your store.

Before you begin

  • Open the UpForm app in your Shopify admin.
  • Creating and saving a form does not make it visible on the storefront. You still need to publish it. See the publishing guides for page, product, collection, homepage, and other placements.

Create a form

  1. From UpForm, go to Forms.
  2. Click Create new form.
  3. Browse templates by category, or choose a blank template.
  4. Click Use template.

The form builder opens so you can configure the form.

Create new form templates

You can also click Import form on the Forms page to import a form from a JSON file exported from UpForm.

Form builder overview

The form builder uses a side menu. Tabs include:

TabPurpose
Form infoTitle, description, and active status
Form elementsFields you can add to the form
DesignForm type, form style, and field style
TriggersWhen and how the form appears (hidden for On-page forms)
Extra contentOptional content around the form
After submissionWhat happens after a customer submits
EmailAdmin, customer, follow-up, and SMTP settings
ConditionsShow or hide fields based on customer input
GeneralCAPTCHA, automation, authentication, custom code, schedule, and more

Hover over an element in the live preview and click the edit icon to open its settings.

Configure form info

Open the Form info tab to set the form title, description, and active status.

Form info settings

Enter a Form title and optional Form description. Enable Display form title on the online store if you want the title visible to customers. When the title is displayed, you can adjust alignment, heading tag, font, size, color, and an optional border under the title.

Enable Active so the form can appear when published. New forms are active by default. Click Save when you are done.

Add rows and fields

Forms are built with rows and fields:

  • A row sets the column layout
  • A field collects input or displays content inside a column

Row and field structure

To add a row, click Add row in the live preview, then choose a layout such as one full-width column, equal columns, or mixed widths.

To add fields:

  1. Open the Form elements tab, or use the field picker after you add a row.
  2. Drag a field into a column, or click + under a column and choose a field type.
  3. Continue adding rows and fields until the layout is complete.
  4. Drag items to reorder them, or use field actions to edit, duplicate, or delete a field.

Add fields to a row

For details about each field type, see Builder elements.

To customize the submit button, hover over it in the preview, click the edit icon, then set the label, icon, colors, width, and alignment.

Submit button settings

Design the form

Open the Design tab to choose how the form appears and how fields are styled.

  1. Set Form type to On-page, Popup, Float, Footer banner, Top bar, or Side-in.
  2. Configure Form style for the form container, including width, padding, border, shadow, and background.
  3. Configure Field style for labels, inputs, values, and descriptions.
  4. Click Save.

Form type settings

Form style settings

Field style settings

For full design options, see Design.

Set triggers

If the form type is not On-page, open the Triggers tab to choose when the form appears and how any trigger button looks.

Trigger button settings

For detailed options, see Triggers.

Add extra content

Use Extra content to add supporting text or media around the form.

Extra content overview

  1. Open the Extra content tab.
  2. Set Extra content position to Left, Right, Top, Bottom, or None.
  3. Configure the content and styling for that position.
  4. Click Save.

Extra content settings

For detailed options, see Extra content.

Configure after submission

  1. Open the After submission tab.
  2. Choose an option under After submission behavior:
    • Show success message
    • Show thank you page (replace form)
    • Redirect to URL
    • Close form for non–on-page forms, or Do nothing for On-page forms
  3. Configure the settings for the selected option.
  4. Click Save.

After submission settings

For detailed options, see After submission.

Configure email

Set up emails related to form submissions.

Email settings overview

  1. Open the Email tab.
  2. Configure Admin notification email.
  3. Configure Auto-response email to customer, including verification options if needed.
  4. Optionally configure Follow-up email defaults for the Submissions page.
  5. Choose an email provider under SMTP.
  6. Click Save.

Email sending depends on Save submission data in General. For detailed email setup, see Email.

Set up conditions

Use Conditions to show or hide fields based on customer input.

Conditions settings

  1. Open the Conditions tab.
  2. Click Add condition.
  3. Define the If, Is, and Value rules, then choose a Do action.
  4. Add more conditions if needed.
  5. Click Save.

For detailed setup, see Conditions.

Configure general settings

Use the General tab for form-level behavior beyond fields and design.

General settings

Configure the sections you need, such as CAPTCHA, Workflow automation, Authentication, Custom CSS, Custom JavaScript, Display schedule, Save submission data, and Information (for merchant only). Then click Save.

For detailed options, see General.

Save and publish

Click Save to store your changes. Saving does not publish the form to your store.

When you are ready for customers to see the form, click Publish. In the Publish form modal, choose where the form should appear. Non–on-page forms may also require App Embed to be enabled in your theme.

You can also publish later from the Forms list with Publish form.