HubSpot CMS

Keep your HubSpot forms on your HubSpot pages. HubSpot still saves every submission to the contact, sends its notifications and runs your workflows. Once HubSpot has saved a submission, Cauliflower sends the lead to a router and opens the right rep's calendar on top of the form's thank-you message.

This guide is for sites hosted on HubSpot's Content Hub. The same snippet works for HubSpot forms embedded anywhere else, such as on WordPress or a custom site. Only the place you paste it changes.

Before you start

• A router that is Live, with the Website form entry point turned on in its trigger. The starter router, inbound, already is.
• The router's slug, shown on Routers → your router → Install, along with your Cauliflower URL and workspace slug.
• Permission to edit your HubSpot website settings or pages. Which head and footer HTML options you can edit depends on your HubSpot subscription.

Set it up

https://example.com
https://www.example.com
https://example-12345.hs-sites.com

<script>
  (function (w, d) {
    w.cauliflower = w.cauliflower || function () { (w.cauliflower.q = w.cauliflower.q || []).push(arguments) };
    var s = d.createElement("script"); s.async = true; s.src = "https://cal.example.com/embed.js"; d.head.appendChild(s);
  })(window, document);
  cauliflower("init", { workspace: "acme" });

  // HubSpot forms: HubSpot saves the submission as usual, then Cauliflower routes the lead and opens the calendar.
  (function () {
    var ROUTER = "inbound";
    // IDs of the forms to route, from each form's embed code. Leave empty to route every form.
    var FORMS = [];
    function route(formId, lead) {
      if (FORMS.length && FORMS.indexOf(formId) === -1) return;
      cauliflower("route", { router: ROUTER, lead: lead });
    }

    // Forms built in HubSpot's updated forms editor
    window.addEventListener("hs-form-event:on-submission:success", function (event) {
      HubSpotFormsV4.getFormFromEvent(event).getFormFieldValues().then(function (values) {
        var lead = {};
        values.forEach(function (field) {
          // Names look like "0-1/email": 0-1 is a contact property, 0-2 a company property.
          var parts = field.name.split("/");
          var name = parts.pop();
          if (parts[0] === "0-2") name = name === "name" ? "company" : "company_" + name;
          lead[name] = field.value;
        });
        route(event.detail.formId, lead);
      });
    });

    // Forms built in the legacy forms editor
    window.addEventListener("message", function (event) {
      var d = event.data;
      if (d && d.type === "hsFormCallback" && d.eventName === "onFormSubmitted") route(d.id, (d.data && d.data.submissionValues) || {});
    });
  })();
</script>

var FORMS = ["a1b2c3d4-5678-90ab-cdef-1234567890ab", "f9e8d7c6-5432-10fe-dcba-0987654321fe"];

What the code does

HubSpot forms announce a saved submission with an event on the page. Forms from the updated forms editor fire hs-form-event:on-submission:success, and legacy forms send an onFormSubmitted message. The snippet listens for both, so it works whichever editor a form was built in, and you can mix them on one site.

For each submission it:

1. Checks the form's ID against FORMS.
2. Reads the submitted values. Property names from the updated editor, like 0-1/email, lose their prefix, and company properties become company_…, with the company name as company.
3. Calls route, which adds the page URL, the referrer and UTM parameters, sends the lead to the router and shows the outcome.

Because it waits for HubSpot to confirm the submission, a lead that HubSpot rejects, for example because a required field is missing, is never routed. The visitor sees the same outcome as with any widget form: the calendar for qualified leads, the path's message for disqualified or assigned leads, or a redirect.

Field names

HubSpot forms submit contact properties by their internal names, and Cauliflower recognizes the standard ones directly:

To route on a custom field in the router builder, add it under the router's Form fields with the property's internal name as the key, for example numemployees for a "Number of employees" dropdown. HubSpot shows each property's Internal name in its property settings. Company properties from the updated editor arrive with a company_ prefix, so a company "Number of employees" property becomes company_numberofemployees. See Paths and conditions.

Using HubSpot as your CRM

HubSpot forms and Cauliflower work well with the HubSpot CRM integration, and most HubSpot CMS sites will want it:

• Route existing customers to their owner. With Match against your CRM on, Cauliflower looks the lead up by email and domain before routing, so an ownership path can send known contacts and companies to their hubspot_owner_id.
• One contact per person. HubSpot keeps one contact per email address. When Cauliflower updates the CRM after routing or booking, it finds the contact HubSpot's form created by email and updates it, rather than adding a second one.
• One system assigns owners. If your router writes owners back, with Set the record owner on an Update CRM step or the CRM switch on an Assign to step, and a HubSpot workflow also rotates contact owners when these forms are submitted, the two overwrite each other. Keep one of them for routed forms.

Embed the whole router instead

To skip the HubSpot form, embed the router's hosted page: a form built from the router's fields, your team's photos and the calendar, all in one. Copy the code under Routers → your router → Install → Embed the hosted page, then in the page editor add a rich text module, choose Insert → Embed and paste it. It doesn't need the footer code above, and submissions go to HubSpot through the CRM integration rather than as form submissions. See Hosted router page.

Go-live checklist

• The router is Live and its Website form entry point is on.
• The footer code is saved on the right domain, with your Cauliflower URL, workspace slug and router slug.
• FORMS lists every form that should open a calendar, and no newsletter or content download forms.
• Those forms show an inline thank-you message, with no redirect or HubSpot meetings link.
• Allowed website origins lists every domain the pages are served from.
• A test submission opens the calendar, shows up on the contact in HubSpot and in the router's Logs.
• A test with a personal email address, or anything else your paths disqualify, shows the message you expect.

Troubleshooting

Open the browser's developer console on the live page to see errors from Cauliflower. The most common problems:

If your site sends a Content Security Policy, allow your Cauliflower URL in script-src, connect-src and frame-src, or the browser blocks the widget, the routing request or the calendar.

Related