Product forms in Squarespace and where to find them
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.
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
Navigate to the Product Page: Go to the product editor for the item you want to add a form to.
Select Custom Forms: Under the 'Checkout' section, click on 'Custom forms'.
Create New Form: Click 'Create New Form' to start building your custom form.
Add Form Fields: Enter a name for your form and start adding the necessary fields. You can add text fields, dropdown menus, checkboxes, and more.
Save 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 Add to cart button is available:
Product detail pages
Store collection pages (7.1)
Product blocks
Squarespace product details page
The Add to cart 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 Add to cart button
Store page
Location: On Squarespace 7.1, you can add Add to cart button for products on the store collection page
How to Access: Click Edit 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
Store page Quick view
To add quick view to a store page:
Click Advanced, then Quick view, finally switch the toggle on for Enable quick view.
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
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 Add to cart button on Product block
Product block Quick view
To add quick view to a Product block:
In the product block editor, choose a product to display.
In the Design tab, switch the Product Quick View toggle on.
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
Summary block Quick view
To add quick view to a summary block:
In the Summary block editor, make sure a store page is selected from the Content tab.
Click the Design tab.
Switch the Enable Product Quick View toggle on.
Click Save 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.
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 Squarespace datepicker 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 no 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.
