HubSpot forms

Wrap a HubSpot form that is rendered into your page (not the iframe embed) by starting the wrap from HubSpot's own onFormReady callback.

Evidence tooling, not legal advice. Whether a capture satisfies a particular consent requirement is for your counsel to decide.

Set up

  1. Get your client id (it starts with tnt_) from Magic Setup in the dashboard at capchacloud.com/app. Your site origin must be allowlisted there, or the widget will not boot.
  2. Use the non-iframe form embed (hbspt.forms.create with a target element). The iframe variant cannot be wrapped for the same reason as Typeform.
  3. HubSpot builds the form after page load, so the wrap must start once the form exists. The snippet mounts the wrap from onFormReady.
  4. Publish the page and submit a test form. HubSpot's own submission and thank-you behaviour are untouched.

Snippets

Wrap from onFormReadylatebind

<script src="https://capchacloud.com/integrations/capchacloud-browser.js"></script>
<script src="//js.hsforms.net/forms/embed/v2.js" charset="utf-8" type="text/javascript"></script>
<div id="hs-form"></div>
<script>
  var cc = CapchaCloudBrowser.init({ clientId: "YOUR_CLIENT_ID" });
  cc.load();
  hbspt.forms.create({
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_HUBSPOT_FORM_ID",
    target: "#hs-form",
    onFormReady: function () {
      cc.mount(null, { wrap: "#hs-form form", company: "Your Company Name", privacyUrl: "https://example.com/privacy", termsUrl: "https://example.com/terms", campaignId: "hubspot", formId: "hubspot-form" });
    }
  });
</script>

What is tested

Every snippet on this page is checked by an automated test that loads the page, takes the snippet out of it, and runs the real /widget.js in a browser DOM: the attributes must be exactly the ones the widget reads, the form selector must match exactly one form, and a test submission must produce a capture request carrying your campaign and form ids.

What is not verified

  • Not run against a live HubSpot portal. The test stubs hbspt.forms.create to render the markup HubSpot renders and call onFormReady; it proves our side (the wrap starts from that callback and finds the form), not HubSpot's.
  • HubSpot can render forms in an iframe depending on embed type and settings; if your form is in an iframe it cannot be wrapped.

This is not a marketplace app, partner listing or certified integration of HubSpot. It is a snippet for your own pages.

All integrations · API reference