Create forms

You can use the Forms app to create a form that prompts your customers to join your email marketing list. The form can be customized using your form settings to match your brand and capture customer information in a privacy-compliant way.

You can display a popup form, inline form, or both at the same time on your store. Learn more about form types.

Form types

When you create a form, you can choose between the following form types:

Form types, descriptions, and requirements
Form typeDescriptionRequirements
Popup formsDisplayed as content that floats as an overlay above your store. Learn about the settings that you can configure for popup forms. To display popup forms on your store, you need to install the Forms theme app embed in your theme. Learn about the specific settings that you can configure for popup forms.
Inline formsDisplayed in your store in a specific section on your theme, such as on a page. Learn about the settings that you can configure for inline forms.To display inline forms on your store, you need to use an Online Store 2.0 theme.

Create a form

You can create a form from your Shopify admin in the Forms app. After you create a form, it's activated on your store. Learn more about managing forms.

Steps:

  1. From your Shopify admin, go to Apps > Forms.
  2. Click Create form.
  3. Select whether to create a Popup form or an Inline form.
  4. Enter a name for the form.
  5. Click Create.
  6. Configure the form based on your setting preferences. Learn more about form settings
  7. Click Save.

Settings for all forms

The following settings apply to both popup and inline forms, and can be configured when you create a form:

Learn more about the specific settings that you can configure for popup and inline forms.

Form

The Form settings determine the content of your form.

Settings for the form section for inline forms.
SettingDescription
TitleThe title of the form, where you can provide an incentive or a call to action to join your newsletter. Maximum of 50 characters.
ContentThe text displayed below the title. In this field, consider offering an incentive for signing up, as well as keeping it simple. Maximum of 100 characters.
Form InputsThe information to be captured by the form. By default, the form captures the customer's first name and email address. To collect additional information, click Add new field. You can add or remove any of the following additional fields: First name, Last name, Birthday, Phone, or Email. To change the details of an input, such as whether the field is required to complete the form, click the field's name. To remove a field, click the removal icon (⊖) next to the field's name.

Your form must include either Email or Phone as a required field.

To create custom input fields for your form, click Add new field.
Button labelThe text displayed on the submit button. The button should have a clear call to action, such as Sign Up, Subscribe, Submit, or Get my discount. Maximum of 25 characters.
Content disclaimer (optional)Your disclaimer can include information such as telling your customers that by submitting their email address, they agree to receive marketing emails. Consider adding links to your store's terms and conditions or privacy policy. Maximum of 100 characters.

Custom input fields

Custom input fields are stored as a metafield. When you add a custom field to your form, you need to give the corresponding metafield a name. After a metafield is saved, you can find it in your customer data metafields or company data metafields in your Shopify admin at Settings > Custom data > Customers. You can use this data to assess B2B company requests or to create customer segments.

The custom field can be any of the following data types:

  • Single-line text: A short text field appropriate for a single sentence.
  • Dropdown list: A list of options presented as a dropdown menu that the user can select one option from.
  • Radio buttons: A list of options presented as a series of buttons that the user can select one option from.
  • Multi-line text: A longer text field appropriate for a paragraph.
  • Multiple choice: A list of options presented as a series of checkboxes. Unlike the Dropdown list and Radio buttons, users can select more than one response.
  • Date: A specific date.
  • Number: A single number.

Optionally, each type of field can have specific requirements set for it.

For example, if you want to create a field to capture the shoe size of your customers, then you can select the Number field and name the metafield Shoe Size. You can then set the field to accept values from 1-16.

Success

The Success settings determine the content that's displayed to your customer after they successfully complete a form.

The fields that you need to complete in the Success section depend on the Confirmation behavior that you select:

  • Show message displays a message to your customers after they submit a form.
  • Redirect to another page redirects your customers to the page of your choice after they submit a form.
Settings for the Success section of a form.
SettingDescriptionConfirmation behavior
Discount (optional)The Discount setting determines whether a discount code is provided to your customer when they complete your form and reach the success step. To add a discount code, click Select discount, and then select an existing discount code or create a new discount.Show message
TitleThe title of the success section for the form, where you can provide confirmation that a customer has successfully signed up to your email list. For example, Here's your discount, VIP access starts now, or Thanks for signing up!. Maximum of 50 characters.Show message
ContentThe body of the success section for the form, where you can provide more details or highlight the benefits of joining your email list. For example, You're now the first to know about the latest drops and special offers.Show message
Redirect URLThe URL that you want to redirect your customer to after they complete a form. For example, a "Thank you" page that provides email subscribers with a special perk, or a "Next steps" page for new B2B customers.Redirect to another page

Tags

The Tags setting determines whether tags are added to customers that successfully complete the form. To add a tag, enter it in the Find or create tags field.

Email notifications

The Email notifications setting lets you determine whether to send an email to the store owner for each submission to this form.

Automations and workflows

The Automation and workflows settings let you integrate your form with an existing marketing automation in Shopify Flow. You can connect to an existing automation, or create a new one.

Learn more about creating marketing automations in Shopify.

The following settings are specific to popup forms:

The Form display setting determines how the form displays on your store.

Settings for the form display section for popup forms.
SettingDescription
FloatingDisplays the teaser and the form as a floating section displayed on your storefront. Select the section's location on your storefront from the Position on your store menu.
OverlayDisplays the form in the middle of the page, with an overlay applied to the rest of the storefront. To select the color and opacity of the overlay, click Overlay Color.

The Teaser settings determine when the teaser for your form is displayed. The teaser section is a small pop-up that displays on your store. If a customer clicks on the teaser, then the form is opened.

Settings for the teaser section for popup forms.
SettingDescription
ShowDetermines when the teaser section is shown to customers.
  • First (before the form): Displays the teaser section before the form.
  • First (before the form) and if the customer closes the form: Displays the teaser section before the form, and displays the teaser if the customer closes the form.
  • If the customer closes the form without subscribing: Displays the teaser section if the customer closes the form without completing it.
  • Never: Hides the teaser section from all customers. If a customer closes the form without completing it, then they can't access it again.
Position on your storeDetermines where on your store the teaser is displayed. The (rotated) display options display the teaser section on its side.
TitleThe text that displays on the teaser section.

The Styling settings determine the appearance of your form. A warning is displayed if you select colors that don't work well together, don't have enough contrast, or might be difficult to read.

In the Brand colors section of the forms app, you can find and select colors that you've added as brand colors.

Settings for the styling section for popup forms.
SettingDescription
ColorsChange the color of the form's background, active field, button label, and error messages to match your brand and theme.
Form fieldsSelect white or transparent.
TypographyChoose the font that you want to use for your title and body text.

The Image settings determine whether an image is displayed in your form, and affects the image's placement and appearance.

Settings for the image section for popup forms.
SettingDescription
Image optionWhere the image is displayed on your form.
ImageThis field is displayed if you select Background image, Image left, or Image right. Click Add image to upload an image from your device.
Image opacityThis field is displayed if you select Background image. You can select the opacity of the image by using the slider. At 100, only the image that you've uploaded is displayed. Reducing the opacity shades the image with the background color in the Colors section.

The Behavior settings determine when and where your form is displayed.

Settings for the styling section for popup forms.
SettingDescription
DevicesChoose whether you want the form to appear on all devices, only on desktop devices, or only on mobile devices.
PagesChoose if you want the form to appear on all pages, or only specific pages.
TriggerYou can choose to have the form display on the first, second, or third page view either immediately or after a 10 or 30 second delay. In this section, you can also choose to select the Show form when visitors attempt to leave page (Desktop only) checkbox. If this checkbox is selected, then the form is displayed if a visitor moves their cursor towards the address bar.

Inline form settings

The following settings are specific to inline forms:

Styling

The Styling settings determine the appearance of your form. To change the colors or layout of an inline form, use the theme editor.

Settings for the styling section for inline forms.
SettingDescription
TypographyChoose the font that you want to use for your title and body text.

Placement

The Placement setting determines where in your store the form is displayed.

SettingDescription
Existing templateClick Copy to add the form to an existing section of your theme. After copying your form's Form ID, you can then add an app block in a template where you want the form to be displayed. After you've added an app block in the theme editor, paste the ID that you copied into the Form ID field.
Landing pageClick Create to create a new page in your theme for your form. You can edit the name and URL for the new page, or use the default if you prefer, and then click Save. Click Done to continue editing your form settings, or Open theme editor to customize the page in the theme editor.

After a page is created for your form, it can't be deleted from the Forms app. If you need to delete a page, then you can do so from the Shopify admin.
Ready to start selling with Shopify?Try it free