# Squarespace Product Forms And Where To Find Them **Source:** https://beyondspace.studio/blog/squarespace-product-forms-and-where-to-find-them **Language:** French (France) --- # Product forms in Squarespace and where to find them Sélecteur de date May 6 Written By Beyondspace Squarespace offers a variety of tools to help you manage and customize your online store. One such tool is Product forms in Squarespace, which allows you to gather specific information from your customers. This post will guide you through what Squarespace Product Forms are, their benefits, and where you can find and utilize them on your site. It will also demonstrate the Squarespace datepicker plugin, which seamlessly integrates a datepicker into Squarespace custom product forms. Squarespace datepicker update notice **Compatibility notice** Beyondspace Datepicker is fully compatible with recent platform changes, including the **Jan 2026 Product Forms update**, **Products V2 (Aug 2025)**, and **Form Blocks update (June 2025)**. *Notice: We proactively maintain our plugins to ensure your storefront remains functional as Squarespace evolves.* → View Datepicker Features & Updates Lire la suite → ## What are Squarespace Product Forms? Squarespace Product Forms are customizable forms that can be added to your products, they will open as an overlay when a customer clicks **Add to Cart**. They enable you to collect additional information from your customers, such as customization details, special instructions, or personal messages. This feature is particularly useful for businesses that offer personalized products or need specific details from their customers to fulfill orders. ### Benefits of Using Product Forms - Customization: Tailor the form fields to match the specific needs of your products. - Efficiency: Streamline the order process by collecting all necessary information upfront. - Enhanced Customer Experience: Provide a seamless way for customers to communicate their preferences or requirements. ### How to Create product forms in Squarespace 1. Navigate to the **Product Page**: Go to the product editor for the item you want to add a form to. 2. Sélectionner **Custom Forms**: Under the 'Checkout' section, click on 'Custom forms'. 3. Create **New Form**: Click 'Create New Form' to start building your custom form. 4. Ajouter **Form Fields**: Enter a name for your form and start adding the necessary fields. You can add text fields, dropdown menus, checkboxes, and more. 5. **Enregistrer** and Apply: Once you have added all the fields, click 'Save' and then 'Apply' to attach the form to your product. Edit Product forms in Squarespace #### **Examples of Product Forms** - **Personalized Gifts:** Collect names, dates, and messages for engraving or printing. - **Custom Orders:** Gather detailed specifications for custom-made items. - **Special Instructions:** Allow customers to provide specific delivery or handling instructions. ## Where to Find Product Forms Product forms in Squarespace are triggered when a user tries to add an item to their cart. If the form fields are required, users must complete the form before the product can be added to the cart. Product forms can be found in the following places, where **Ajouter au panier** button is available: - Product detail pages - Store collection pages (7.1) - Product blocks Squarespace product details page The **Ajouter au panier** button can be displayed within Quick view, with quick view, customers can click a button to view item details in a lightbox without navigating away from the current page, supports: - Summary blocks quick view - Product blocks quick view - Store collection pages quick view Squarespace product Quick view The Product forms can also be found on Shopping cart page, where users can edit the form values before checking out ### Product Details Page **Location:** The main product page where customers view detailed information about the product. **How to Access:** Navigate to your product by clicking on it from any product listing page or search result. Now, the product form will display once user clicks on the **Ajouter au panier** button View fullsize ![Product details page](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716786114368-TIBTV5DEA1OCUU8OB4MA/SCR-20240527-gny.png)![Product details page]() Product details page View fullsize ![Product details page form](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716786103689-O61M7P78IL7A6SESFKYT/SCR-20240527-goo.png)![Product details page form]() Product details page form ### Store page **Location:** On Squarespace 7.1, you can add **Ajouter au panier** button for products on the store collection page **How to Access:** Click **Modifier** on the site preview, then click the **paintbrush** icon on the store section you want to edit. Ensure the **Add to cart button** setting is checked View fullsize ![Enable Add to cart button](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716786838644-0FND3FW6A1XJH0OZHBX1/SCR-20240527-gtv.png)![Enable Add to cart button]() Enable Add to cart button View fullsize ![Store page form](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716786889295-LIWA81KDNWMN2SPI6HCZ/SCR-20240527-h04.png)![Store page form]() Store page form ### Store page Quick view To add quick view to a store page: 1. Open the store page's settings. 2. Click **Advanced**, then **Quick view**, finally switch the toggle on for **Enable quick view**. 3. If you have many store pages, repeat the steps for each page. Enable Store page Quick view **How to access**: Hover on the product item to access the Quick view button, clicking it will open a product detail modal View fullsize ![Store page Quick view button](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716787702875-TGGD4F1SEO48HMEO5XI8/SCR-20240527-h8o.png)![Store page Quick view button]() Store page Quick view button View fullsize ![Quick view product form](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716787707821-GPB77I9BAOC593YU33Z6/SCR-20240527-h95.png)![Quick view product form]() Quick view product form ### Product block - **Location**: Edit a page or post, click Add Block or an insert point, then click Product. In Design tab, toogle on **Add to Cart Button** setting. - **How to Access**: Open the page in Live mode and click **Ajouter au panier** button on Product block View fullsize ![Enable Add to cart button](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716788295782-127IB681PIHF2MTOBEPN/SCR-20240527-hf6.png)![Enable Add to cart button]() Enable Add to cart button View fullsize ![Product form on Product block](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716788305296-7R5POGUZKVAGMETD9W4L/SCR-20240527-hjb.png)![Product form on Product block]() Product form on Product block ### Product block Quick view To add quick view to a Product block: 1. In the product block editor, choose a product to display. 2. Dans le **Design** tab, switch the **Product Quick View** toggle on. 3. Save your changes to the page. **How to access**: Hover on the product block to access the Quick view button, clicking it will open a product detail modal View fullsize ![Enable Quick view button](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716789295857-AKWJJL69IOB598PSOT4Q/SCR-20240527-hnd.png)![Enable Quick view button]() Enable Quick view button View fullsize ![Product form on Product block quick view](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716789375382-LJ8RRGUPLTNZN4SOFRMV/Kapture+2024-05-27+at+12.52.33.gif)![Product form on Product block quick view]() Product form on Product block quick view ### Summary block Quick view To add quick view to a summary block: 1. In the Summary block editor, make sure a store page is selected from the **Contenu** onglet. 2. Click the **Design** onglet. 3. Switch the **Enable Product Quick View** toggle on. 4. Click **Enregistrer** to persist the change to the page. **How to access**: Hover on the product item on Summary block to access the Quick view button, clicking it will open a product detail modal. View fullsize ![Enable Quick view on Summary block](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716790265258-H0B8TQ5EAS83SX6QPT2O/SCR-20240527-i4u.png)![Enable Quick view on Summary block]() Enable Quick view on Summary block View fullsize ![Product form on Summary block](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1716790428018-81JI3K7V85TB0P9S6J8I/Kapture+2024-05-27+at+13.08.16.gif)![Product form on Summary block]() Product form on Summary block ### Shopping Cart After products are added to the cart, users can review and edit their selections before checkout. **How to Access:** Navigate to the cart page by clicking the cart icon typically found in the site header or directly by typing /cart in the address bar. Users can edit the product forms directly from the cart page by clicking on the Edit details under the items they have added. Product form on Shopping cart ## Conclusion Custom Product forms in Squarespace are a powerful tool for collecting detailed information from your customers, enhancing their shopping experience, and streamlining your order process. By knowing where to find and how to use these forms, and integrating additional functionalities like the Sélecteur de date Squarespace plugin, you can significantly improve your online store's efficiency and customer satisfaction. For more detailed instructions and tips on how to optimize your product forms and integrate advanced features, stay tuned to our blog. ## Frequently Asked Questions (FAQs) Question: Can I collect information for the entire order, not just individual products? Yes, to collect information related to the entire order, such as gift messages or special delivery instructions, you can create a custom checkout form instead of product-specific forms. Question: Can I use the datepicker plugin on the Checkout page? No, the datepicker plugin cannot be added to the Checkout page. Squarespace does not allow any third-party code to be added to the Checkout page, which includes all third-party plugins and extensions. Question: How do I ensure customers select the same dispatch date for multiple products in one order? Currently, the datepicker plugin allows customers to select different dispatch dates for each product. To ensure a single dispatch date for all items in an order, you would need to manually coordinate with customers after they place their order, as there's built-in functionality to enforce a single date selection across multiple products. Question: Can I reuse existing Product Forms for new products? Yes, when adding product forms in Squarespace, you can select and reuse existing forms you've created for other products. This saves time and ensures consistency across similar products. Question: How do I integrate the datepicker plugin with my Product Forms? See more on How to set Delivery date picker for different products on Squarespace Question: Why do we need a datepicker on the cart page? If you already have the datepicker installed on the product form, it is essential to ensure that customers can use the datepicker on the cart page as well. This helps to avoid misunderstandings related to date formats. For example, US users typically expect dates in the MM-DD-YYYY format, while users in Australia expect DD-MM-YYYY. By allowing date selection through a datepicker on the cart page, you ensure clarity and accuracy in date selections, enhancing the overall user experience and reducing the likelihood of errors. Question: How do I enable the datepicker on the cart page? To enable the datepicker on the cart page, ensure Squarespace datepicker plugin are properly set up for your products. This way, the datepicker will be accessible in all relevant product forms in Squarespace, including the product details and the cart page, allowing customers to select or modify dates accurately before proceeding to checkout. Beyondspace As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement. https://beyondspace.studio Précédent Précédent ## How to preview Lightbox Studio on your Squarespace website Suivant Suivant ## How Squarespace handle responsive images