Use a form to collect personalized information from customers when they add products to their cart.

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 a product, like personal details about a summer camp attendee, requests during a hotel stay, or custom engraving.

Also try: Custom checkout forms.

• You can’t create an Add to cart form in the Squarespace app.
• Each site has a 100-form limit for Add to cart forms.
• You can’t add a file upload field to an Add to cart form.
• Your site needs to be on version 7.1 to make style changes to the Add to cart form.

Create a new Add to cart form

To create a new form:

1. Open the Pages panel.
2. Click a store page, then click All (version 7.1 only).
3. Double-click a product to open the product editor.
4. Under Forms, click Create new form. Or, to use an existing form, click Connect existing form and select a form. If there's already an existing form here, click X to delete it, then click Create new form.
5. Add a form name.
6. To edit the default form fields, click the down arrows to change the field labels and description text. Drag and drop the fields to reorder them.
7. (Optional) To make form fields required for purchase, switch on the Required toggle.
8. To delete or duplicate a field, click •••, then click Delete or Duplicate.
9. To add new form fields, click +.
10. When you're finished, click Apply, then click Save.

Reuse an existing Add to cart form

After you save a form, it appears as an option under Forms in the product editor for other products.

To reuse an existing form on other products:

1. In the product editor, click Connect existing form.
2. Click a form to reuse it, or click ••• to edit or duplicate it.
3. Click Apply, then click Save.

Disable or delete an Add to cart form

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

To delete a form:

1. Open the product editor and click Connect existing form.
2. Click ••• beside the form.
3. Click Delete, then Confirm

Style the Add to cart form

If your site is on version 7.1, you can style the Add to cart form using the Form style tweaks in Site Styles.

How do I style my Add to cart form’s colors?

To style an Add to cart form’s colors:

1. Go to the product details page of a product that has an Add to cart form.
2. Open the Site styles panel.
3. Beside Forms, click the > icon.
4. Click Colors.
5. Select the store page section's color theme.
6. Use these tweaks to change the Add to cart form's colors.
   • Form background
   • Field background on background
   • Button background on background
   • Button text on background
   • Title on background
7. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

How do I style the "Add to cart" button color on my form?

Note: Style settings apply to all buttons on your site that use the Primary styling options in this theme.

To style the Add to cart 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.
4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

How the Add to cart form displays for customers

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 to their cart without completing the form. To preview this form, run a test order.

Review Add to cart form submissions

After a customer makes a purchase with an Add to cart form, you can review their order. 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.

How do I export form submissions?

To export Add to cart form submissions, choose a specific product during the export process.

Note: Before exporting, ensure all form fields have unique names. Fields with duplicate names won't export.

Can customers review and edit their form information before checkout?

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

Do Add to cart forms display for in-person sales?

No. Add to cart forms don't display for in-person sales.

Can I limit the Add to cart form to specific customers or product variants?

No. You can’t limit the Add to cart form to certain customers or variants.

I sell products with optional customization. How can I use Add to cart forms to collect customer information?

You have a few options when setting up your product.

If you don’t charge extra for customization, you could add a required form with a checkbox field labeled for customization with options Yes and No, followed by other fields to collect details.

If you charge extra for customization, you can:

• List the product twice on your store page, one standard, one with customization.
• List the product once on your store page and add variants. Add an unrequired form to collect details. The form will display for all customers, regardless of which variant they choose.

You can also create a separate product and list it as an add-on:

1. Add a Not linked store page.
2. Add a product and name it for the customization.
3. Set a price.
4. Add a required Add to cart form to collect details.
5. Publish the product.
6. Edit the product you’re adding the add-on to, scroll to Selling tools, then follow these steps to list it as an add-on product.

On the product detail page, customers can add the customization add-on to their cart along with the main product. When they do, the Add to cart form appears. After checkout, both products and the customer’s response to the form will appear in the order summary.