What kinds of fields can I add?
| Component | Metafield type it saves to |
|---|---|
| "Text" | Single line text |
| "Multi-line text" | Multi-line text |
| "Number (integer)" | Integer |
| "Number (decimal)" | Decimal |
| "Date" (birthday, etc.) | Date |
| "Toggle (consent)" (agreeing to terms, etc.) | True or false |
| "Single select" (gender, etc.) | Single line text |
| "Multiple select" (categories of interest, etc.) | List of single line text |
You can also use these standard fields: last name, first name, phone, email, email subscription, and SMS subscription. The email field is only for matching against an allow list. It never changes the customer's email address.
How do I use the builder?
- Add componentsClick a component in the list on the left to add a field. You can't drag components to add them. To reorder added fields, drag them or use the up and down buttons.
- Set up the fieldIn "Field properties" on the right, set the label, placeholder, help text, and required, then click "Save field". Enter one choice per line. If you write a choice as "value|label", customers see the label (example: female|Female). Tag rule conditions use the "value".
- Set input checksYou can set minimum and maximum length, a regular expression, email format validation, minimum and maximum values, and earliest and latest dates. To match against an allow list, set "Allow list matching" here.
- Check the previewUse the preview in the middle and switch between desktop and mobile views.
Adding, deleting, reordering fields and the required setting are saved right away. Changes in the field settings on the right need "Save field". The same note is shown at the top of the builder.
Where is form input saved?
In the "Data storage" tab, choose a destination for each field under "Field destinations".
- Standard field
- Saves last name, first name, phone, email subscription, and SMS subscription directly to the Shopify customer record.
- Customer metafield
- Pick an existing definition, or create one on the spot with "+ Create a new definition".
- Not set (don't save)
- Input in this field is not saved to the customer.
Only existing metafield definitions whose type matches the component are shown as options. For example, a date component can only use a date-type definition.
Status is shown as "Connected", "Not connected", or "Disabled (definition deleted)". You can publish a form with "Not connected" fields, but a warning is shown and those fields are not saved when submitted. If the destination metafield definition is deleted in Shopify, the field automatically becomes "Disabled (definition deleted)" and is hidden from customers. Connect it again to restore it.
How do I change the submit button or completion message?
In the form's "Settings" tab, you can change the following.
- Title, description, submit button text, and completion message
- When to show (only customers who haven't filled it in (default), always show, or hide after one submission)
- Whether to show the skip link ("Show an 'I will do this later' link"), and the skip link text
- Days before showing the form again after a skip (0 to 365 days, 7 days by default)
How much can I change the form's look?
You can adjust the accent, background, text, border, and error colors, corner radius, font (inherit from theme or system font), submit button width, and logo image. Colors you don't set are inherited from your theme.
Colors, fonts, and corner radius automatically follow your checkout branding settings. Style settings in "Settings" are not applied. You can change the text.
For the logo, enter the image's public URL. The image is imported into Content > Files in Shopify and used from there. You can't choose and upload a file from your computer.
FAQ
I published the form, but input isn't saved
In the "Data storage" tab, check that the field shows "Connected". Fields that are "Not connected" are not saved.
My metafield definition doesn't appear as an option
Only definitions whose type matches the component are shown. Choose a definition with a type that fits the component, or create one with "+ Create a new definition".