Collect custom product details, like engraving or embroidery text.

You can create Add to cart forms for customers to complete when they add a physical, download, or service product to their carts. These forms are great for collecting personalized information for an item, like custom engraving or lettering instructions. 

Note: To collect information relating to an entire order, like a gift message or special delivery instructions, create a custom checkout form instead.

Create a form

It's not currently possible to create an Add to cart form in the Squarespace app.

To create a new form:

1. Open the Pages panel.
2. Click a store page, click All (version 7.1 only), then double-click a product to open the product editor. For detailed steps, visit Editing a product.
3. Under Forms, click Create New Form.
4. Enter a name in the Form Name field, then click Add form field add a field.
5. Choose 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. Keep in mind, some fields, like the file upload field, aren't available in custom product forms.
6. Click Save, then click Apply, then click Save to publish your changes.

Each form can be used for multiple products. You can create up to 100 unique Add to cart forms.

Tip: To ensure customers complete the form, check Required next to all required fields.

Use an existing form

When you create an Add to cart form, you can reuse existing forms you've created for other products:

1. In the product editor, click Forms. 
2. Click Add Form and select an existing form. 
3. Click Apply, then click Save.

Edit an existing form

To edit an existing form: 

1. In the product editor, click Forms. 
2. Click Edit beside the form name.
3. Click Edit beside the form fields you want to change, or add or delete fields.
4. Click Save, then click Apply.

Every unique form field title you've applied to a product will display in its own column in the order export. If you delete or rename form fields over time, original form titles and responses will still appear in the export.

Style the form (version 7.1 only)

If your site is on version 7.1, you can customize the color of the Add to cart button. To style the button color:

1. Open the Site styles panel.
2. Click Colors, then click your site's default color theme.
3. Under Button, use the Primary button background and Primary button text tweaks to change the color. Keep in mind, these settings apply to all buttons on your site that use the primary styling options in this theme.

4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Tip: Add to cart forms always have a white background. If the Add to cart button isn't visible on your form, the button color and text may be set to white. Change the Primary button background to another color to make it visible.

How the form displays

An Add to cart 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. Add to cart forms don't display for in-person sales. To preview this form, run a test order.

Customers can review and edit the form before checking out by clicking Edit Details beneath the item in their shopping cart.

Sell a product with and without customization

If you offer a product with and without customization, you have a few options when setting up your store. There’s no built-in way to limit the Add to cart form to certain customers or variants. 

Let’s say you offer a tote bag with and without custom embroidery. If you don’t charge extra for embroidery, you could add a required form with a checkbox field labeled Do you want custom embroidery? with options Yes and No, followed by other fields to collect the embroidery details.

If you charge extra for engraving, you can:

• List the tote bag twice on your store page, with product names like Tote bag, and Embroidered tote bag. Require customers to complete the form only for Embroidered tote bag.
• List the product once on your store page and add variants. Create an option called Embroidery with the variants Yes and No. Add an unrequired form to collect embroidery details. The form will display for all customers, regardless of which variant they choose.

You can also create a service product called Custom embroidery and list it as an add-on product for your tote bag:

1. Add a Not linked store page.
2. Add a service product called Custom embroidery.
3. Set the price to reflect your embroidery fee.
4. Add a required Add to cart form to collect the embroidery details.
5. Publish the product.
6. Edit the tote bag product in your main store page, scroll to Selling tools, and follow these steps to list the embroidery product as an add-on product.

On the tote bag’s product details page, customers will see the option to add the custom embroidery product to their cart in addition to the tote bag. If they do, the Add to cart form will appear. After checkout, both products and the customer’s response to the form will appear in the order summary.

Review form submissions

Add to cart form submissions are collected in:

• Order Notification emails
• Order Summary in the Orders panel. Click Expand to view all responses.
• Order Exports

Manual and Automatic order exports include Add to cart form responses in the exports for individual orders, not the exports for all orders.

To learn more about reviewing customer orders, visit Receiving an order.

Export form submissions

To export Add to cart form submissions, choose 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 under Forms in the product editor so you can add the form to other products. It's not possible to duplicate an Add to cart form.

Disable the form

If you don't want to add a form to a product, click X next to the form name under Forms.