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
   • Avoid Race Condition Error
2. Add to Custom HTML Integration

• FAQs

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--FieldsElement--content .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-FieldsElement--content .custom-hubspot-form'
   });
</script>
<div class="custom-hubspot-form"></div>

Prevent Race Condition
From this point, your code can work as expected. However, on some websites, there can be race condition that ends up preventing your campaign from showing as expected. Essentially your second script will try to run before the first script finishes. This can prevent the form from showing as expected.

Therefore, we suggest you use the jQuery function getScript to ensure the scripts load properly.

Your JavaScript, will become this:

<!--[if lte IE 8]>
	<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
 <![endif]-->
 <script>
	jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
		hbspt.forms.create({
		sfdcCampaignId: '70130000000ep2ZZZ',
		portalId: '102310',
		formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
		submitButtonClass: 'om-trigger-conversion',
		target: '.NAMESPACE-FieldsElement--content .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 code following our Custom HTML integration 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).

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>
	jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
		hbspt.forms.create({
		sfdcCampaignId: '70130000000ep2ZZZ',
		portalId: '102310',
		formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
		submitButtonClass: 'om-trigger-conversion om-trigger-close',
		target: '.NAMESPACE-FieldsElement--content .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.