How to Connect OptinMonster with a Custom HubSpot Form

OptinMonster allows you to use add a custom HubSpot form to templated optins using the Custom HTML Optin Form integration option. You may wish to use a custom form to include additional form fields in your optin than our native HubSpot integration allows. Follow this guide to get started.

  1. Edit Form Code
  2. Add to Custom HTML Integration
  3. FAQs

Step 1 – Edit Form Code

Before you can add your custom HubSpot form, it requires a small adjustment to the form code.

The form code you copy from your HubSpot account will look something like the following:

<!--[if lte IE 8]>
   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
   hbspt.forms.create({
      sfdcCampaignId: '70130000000ep2ZZZ',
      portalId: '102310',
      formId: '190ga042-56fc-4897-bed4-86ea519cb3e9'
   });
</script>
You’ll need to add:
  • An empty div with the class .custom-hubspot-form below the HubSpot form code.
  • The target: '.NAMESPACE-form .custom-hubspot-form' attribute (replace NAMESPACE with the Template Namespace of your own optin).
  • And the submitButtonClass: 'om-trigger-conversion' attribute.

The above additions will cause your form code to look similar to the following:

<!--[if lte IE 8]>
   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
   hbspt.forms.create({
      sfdcCampaignId: '70130000000ep2ZZZ',
      portalId: '102310',
      formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
      submitButtonClass: 'om-trigger-conversion',
      target: '.NAMESPACE-form .custom-hubspot-form'
   });
</script>
<div class="custom-hubspot-form"></div>

Step 2 – Add to Custom HTML Integration

Once you’ve finished editing the form code, you can proceed with adding your form as usual following our Custom HTML Optin Form integration documentation.

OPTIONAL: HubSpot provides many options for customizing your form including adding a Redirect URL and more. For specific details see HubSpot’s How to Customize the Form Embed Code documentation.

FAQs

Q: Why do I add an empty div to my form code?

A: HubSpot’s form code will completely overwrite any existing content in the container it is targeted to. This can cause problems if you’re creating a Yes/No type optin or have entered any other code or text in the Custom HTML field. By targeting the form to an empty div both of these problems are completely avoided.


Q: What’s my Template Namespace and where do I find it?

A: The Template Namespace is a unique, editable, name assigned to your optin in the builder which is then applied as a prefix to the class names used throughout your optin’s code. For an indepth overview, check out our CSS Guide’s Section on Namespaces. You can then use CSS to target those specific classes.

You can locate the Template Namespace field for your optin in the Optin and Success panels (it’s the same field and just follows you through the builder for convenience).

Use the template namespace when controlling your optin's CSS.


Q: What does the submitButtonClass: '.om-trigger-conversion' code do?

A: The submitButtonClass: 'om-trigger-conversion' addition allows your optin to track conversions and set a cookie when the submit button is selected. Without this addition no conversions will be tracked or cookies set on form submission.


Q: How do I track subscriber events?

A: You’ll need to refer to HubSpot’s documentation on using their Events Javascript API to track subscriber events. See http://developers.hubspot.com/docs/methods/enterprise_events/javascript_api


Q: Why does my optin not close automatically after submission?

A: For most users, their form’s redirect action renders this a non-issue. However, if your code keeps the web visitor on the same page, then you will need to add an additional class to your input. You will need to add the om-trigger-close class.

What this means is your Submit input button will now have 2 custom classes: (1) the om-trigger-conversion to track a conversion when the button is pressed, and (2) the om-trigger-close to close the optin modal popup when the conversion data has been submitted.

Your complete EXAMPLE code now looks like this:

<!--[if lte IE 8]>
   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
   hbspt.forms.create({
      sfdcCampaignId: '70130000000ep2ZZZ',
      portalId: '102310',
      formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
      submitButtonClass: 'om-trigger-conversion om-trigger-close',
      target: '.NAMESPACE-form .custom-hubspot-form'
   });
</script>
<div class="custom-hubspot-form"></div>

Now, your optin’s submit button will both submit a conversion and then close the modal.