You can create custom product forms for customers to complete when they purchase a specific product. These forms are great for collecting personalized information for an item, like custom engraving or lettering instructions.
Note: Custom product forms are useful for gathering information related to individual items. To collect information relating to the entire order, like a gift message or special delivery instructions, create a custom checkout form instead.
Step 1 - Open the product
In the Home Menu, click Pages. Click a Products Page. Double-click a product to open the product editor. For detailed steps, visit Editing a product.
Step 2 - Create a new form
In the product editor, click the Form tab.
Click Create New Form.
Enter a name in the Form Name box. Then click the + icon to add a field.
Select a form field to add. To learn about each form field, visit Form fields explained.
As you add and edit fields, a preview populates to the right.
Tip: To ensure customers complete the form, check Required next to all required fields.
Click Save to publish your changes.
How the form displays
A custom product form opens as an overlay when a customer clicks Add to Cart. If fields are required, the customer can't add the product without completing the form.
Customers can review and edit the form before checking out by clicking Edit Details.
To preview this form, run a test order.
Review form submissions
Custom product form submissions are collected in:
- Order Notification emails
- Order Summary in the Commerce panel
- Order Exports (single product exports only)
To learn more about reviewing customer orders, visit Receiving an order.
Export form submissions
To export custom product form submissions, select a specific product during the export process. Learn more in Exporting orders.
Note: Before exporting, ensure all form fields have unique names. Fields with duplicate names won't export.
Reuse the form
After saving the form, it will appear as an option in the Form tab so you can add the form to other products. The selected option will appear as a darker gray.
Disable the form
If you don't want to add a form to a product, select No Form Required.
My product form's button is missing
This can happen when your general button style is set to Outline and White, and the button appears as white on a white background. You can fix this in Site Styles, but the tweaks only appear when you're on a page with a Form Block or Newsletter Block. If you don't have one of these on your site, temporarily add one:
- Log into your site.
- In the Home Menu, click Pages.
- Scroll down to the Not Linked section.
- Click the + and click Page.
- On the page, add a Form Block.
- Save the page.
Then update the style:
- In the Home Menu, click Design, then Site Styles.
- Scroll to the Buttons section.
- Either change the Style to Default, Solid, or Raised, or change the Button Color to something other than white.
- Click Save.
If you added a temporary Form Block, go back to the Pages panel and delete that page.
Tip: These new styles will affect all Form Block and Newsletter Block buttons on your site.