Quote Cart

Visitors add products to a quote list from any page, review quantities and notes, and submit the whole list through a normal HubSpot form. Every item arrives on the contact record in your CRM — workflows, notifications, and reporting all work as usual.

One-time setup

1. Create the contact property. In Settings → Properties → Create property: object type Contact, label Quote request items (the internal name becomes quote_request_items), field type Multi-line text.
2. Create the quote request form. In Marketing → Forms, build a form with your normal contact fields (name, email, company, phone) and add the Quote request items property as a field. The theme fills and hides this field automatically. Optional but recommended: a File upload field for drawings and CAD files.
3. Create the quote page. Create a page from the Request a Quote Cart template (for example at /request-a-quote) and select your form in the Quote Request Cart with Form module options.
4. Turn the cart on. In Theme Settings → Quote Cart: enable the quote cart and confirm the quote page path matches the page you created.

Adding "Add to Quote" buttons

On product pages

The Product Details Section module has a Quote Cart option group — turn on Show Add to Quote Button. The button reuses the module's product name, SKU, price, and first image. Pages created from the Product template have it on by default.

Anywhere else

Drop the Add to Quote Button module into any page or listing card. Fill in the product name (falls back to the page name), SKU, listed price, and optional thumbnail. Toggle the quantity input on or off.

Test your setup in the browser console

Before you go live, check that a product reaches the form. The cart can print what it holds, and what it will send, in your browser's developer tools console.

1. Turn on test output. Open the request-a-quote page in the editor, select the Quote Request Cart with Form module, and switch on Console test output. Publish the page. To test without changing the module, add ?bcqc-test=1 to the end of the page URL instead, for example https://yoursite.com/request-a-quote?bcqc-test=1.
2. Add a product. Visit a product page and choose Add to Quote, then open the request-a-quote page. Use the same browser tab or window, because the list is stored in that browser.
3. Open the console. Press F12 (Windows) or Cmd + Option + J (Mac in Chrome), then click the Console tab.
4. Read the report. A group named [BCQuoteCart test] lists the items in a table, the exact text that will be sent to HubSpot, and four checks. Click the group's arrow if it is collapsed. The report prints again each time the cart changes or the form finishes loading.

To print the report at any time, type this in the console and press Enter. It works on any page, with or without test output turned on:

BCQuoteCart.test()

After you submit the form, the console shows Form submitted with the text the field held. Submitting creates a real contact and sends notifications, so use a test email address.

Theme settings reference

How the data reaches your CRM

When the visitor submits the form, the hidden Quote request items field contains a readable list like:

QUOTE REQUEST - 7 unit(s), 2 product(s)
1. Flow Control Valve | SKU: FCV-400 | Qty: 5 | Notes: 316 stainless | https://yoursite.com/products/fcv-400
2. Carbide Blade | SKU: CGB-72 | Qty: 2 | https://yoursite.com/products/cgb-72

It lands on the contact record with the submission, so you can trigger workflows and notifications from the form as usual. The visitor's cart clears automatically after a successful submit.

Product options (dimensions, materials, add-ons)

Both the Add to Quote Button module and the Product Details Section have a Product Options repeater. Add an option per input you need — label plus input type (text, number, dropdown with comma-separated choices, or checkbox). Visitor answers travel with each item: they show in the quote list and arrive in your CRM line by line (for example Width (inches): 4; Material: Stainless). Different option answers create separate line items, so two sizes of the same part quote independently.

No custom property? The Message field works too

The dedicated quote_request_items property is the recommended setup — it keeps quote data separate and reportable. But if your HubSpot user can't create properties, just include the standard Message field on the form: the cart automatically appends the item list beneath a --- QUOTE REQUEST --- marker, preserving whatever the visitor typed above it.

Good to know / troubleshooting

• The quote list is stored in the visitor's browser (localStorage), so it survives page loads and return visits on the same device — save-and-continue-later works automatically.
• The form must render inline (the default for forms on HubSpot CMS pages). Forms inside iframes can't be filled by the script.
• If your items field uses a different internal name, set it in the Quote Request Cart with Form module's advanced option.
• Not sure the setup works? See Test your setup in the browser console above.
• Nothing animates or runs inside the page editor — the cart is live-page only.
• The cart is functional (not tracking) storage; mention it in your cookie/privacy notice if your policy lists functional storage.