How to Connect OptinMonster with a Custom HubSpot Form

OptinMonster makes it easy for you to use a custom HubSpot form in your campaigns. You may wish to use a custom HubSpot form to show additional form fields in your campaign, or use hidden fields in your form. Follow this guide to learn how to add a custom HubSpot form to your OptinMonster campaign.

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

Step 1 – Edit Form Code

Before you can add your custom HubSpot form, it will require some small adjustments 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>
IMPORTANT: if your custom HubSpot form fails to appear as expected on your site when the OptinMonster campaign loads, you may need to move the following portions of the custom HubSpot form code out of the campaign Builder and place them directly on your website:

<!--[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>

Step 2 – Add to Custom HTML Integration

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

OPTIONAL: HubSpot provides many options for customizing your form including adding a custom 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 campaign 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 campaign in the Builder which is then applied as a prefix to the class names used throughout your campaign’s code. For an in-depth overview, check out our CSS guide section on namespaces. You can then use CSS to target those specific classes.

You can locate the Template Namespace field for your campaign 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 campaign 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 campaign 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 campaign 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 campaign’s submit button will submit a conversion, and then close the modal.