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.
On this page
Form types
When you create a form, you can choose between the following form types:
| Form type | Description | Requirements |
|---|---|---|
| Popup forms | Displayed 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 forms | Displayed 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:
- From your Shopify admin, go to Apps > Forms.
- Click Create form.
- Select whether to create a Popup form or an Inline form.
- Enter a name for the form.
- Click Create.
- Configure the form based on your setting preferences. Learn more about form settings.
- Click Save.
Duplicate a form
You can duplicate a form to create a new form that includes all of the fields, settings, and configurations of an existing form.
After you create a form using duplication, the new form is inactive by default. Learn how to activate a form.
Steps:
- From your Shopify admin, go to Apps > Forms.
- Click ... beside the form that you want to duplicate.
- From the drop-down menu, select Duplicate form.
- Optional: Edit the form settings that you want to change, and then 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.
| Setting | Description |
|---|---|
| Title | The title of the form, where you can provide an incentive or a call to action to join your newsletter. Maximum of 50 characters. |
| Content | The 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 Inputs | The 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 label | The 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.
| Setting | Description | Confirmation 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 |
| Title | The 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 |
| Content | The 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 URL | The 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.
Popup form settings
The following settings are specific to popup forms:
Form display
The Form display setting determines how the form displays on your store.
| Setting | Description |
|---|---|
| Floating | Displays 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. |
| Overlay | Displays 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. |
Teaser
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.
| Setting | Description |
|---|---|
| Show | Determines when the teaser section is shown to customers.
|
| Position on your store | Determines where on your store the teaser is displayed. The (rotated) display options display the teaser section on its side. |
| Title | The text that displays on the teaser section. |
Styling
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.
| Setting | Description |
|---|---|
| Colors | Change the color of the form's background, active field, button label, and error messages to match your brand and theme. |
| Form fields | Select white or transparent. |
| Typography | Choose the font that you want to use for your title and body text. |
Image
The Image settings determine whether an image is displayed in your form, and affects the image's placement and appearance.
| Setting | Description |
|---|---|
| Image option | Where the image is displayed on your form. |
| Image | This field is displayed if you select Background image, Image left, or Image right. Click Add image to upload an image from your device. |
| Image opacity | This 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. |
Behavior
The Behavior settings determine when and where your form is displayed.
| Setting | Description |
|---|---|
| Devices | Choose whether you want the form to appear on all devices, only on desktop devices, or only on mobile devices. |
| Pages | Choose if you want the form to appear on all pages, or only specific pages. |
| Trigger | You 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.
| Setting | Description |
|---|---|
| Typography | Choose 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.
| Setting | Description |
|---|---|
| Existing template | Click 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 page | Click 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. |