How to Connect OptinMonster with a Custom HubSpot Form

In addition to our native HubSpot integration, OptinMonster makes it easy for you to use a custom HubSpot form in your campaigns. You can use a custom HubSpot form to add additional fields to your form or other custom functionality.

In this article, you’ll learn how to add a custom HubSpot form to your OptinMonster campaign.

Before You Start

Here are some things to know before you begin:

• This article assumes you’ve already created a campaign in your account to add your custom HubSpot form to.
• Custom HubSpot forms don’t automatically track conversions when they are submitted in OptinMonster. It’s important to update your custom HubSpot form code as instructed in this guide.
• You may need to add custom CSS to style your form as desired. Custom HubSpot forms do not automatically inherit the campaign’s template styling.
• When adding a custom HubSpot form, the form actions cannot be set in the Design area of the campaign builder. It is also not possible to display the Success View of your campaign. You’ll need to specify a redirect URL or success message through your Email Service Provider Account settings when you create the form.

Edit Form Code

Before your custom HubSpot form can work in OptinMonster, you’ll need to make a few modifications to the embed code you’re provided.

The embed code you receive 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-{{id}} below the HubSpot form code as a target for the form to populate inside of.
• The target: '.{{ns}}--FieldsElement--content .custom-hubspot-form-{{id}}' attribute
• The onFormSubmit function to track conversions.
• The onFormSubmit function to show the Success view on conversion.

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>
(function() {
	var addForm = function() {
		window.hbspt.forms.create({
			sfdcCampaignId: '70130000000ep2ZZZ',
			portalId: '102310',
			formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
			target: '.FieldsElement--customHTML .customHtml .custom-hubspot-form-{{id}}',
			onFormSubmit($form, ctx){
				om{{id}}.Listeners.convert();
				om{{id}}.changeView('success');
			}
		});
	};

	if ( window.hbspt ) {
		return addForm();
	}

	// Inject the Hubspot script.
	var script = document.createElement('script')
	script.src = "//js.hsforms.net/forms/v2.js"
	script.async = true
	script.onload = addForm;
	(document.getElementsByTagName('head')[0] || document.documentElement).appendChild(script)
})();
</script>
<div class="custom-hubspot-form-{{id}}"></div>

Add Custom HubSpot Form

You can add extra fields to your form or include other custom functionality using a custom HubSpot form in OptinMonster.

To add a custom HubSpot form to your OptinMonster campaign, follow these steps:

1. Log into your HubSpot account and create the form you wish to add to your OptinMonster campaign.
2. Follow the instructions provided in the previous section of this guide to edit the form embed code HubSpot provided you with.
3. Next, in the OptinMonster campaign builder navigate to the Integrations view.
   
4. Select the Add New Integration button.
   
5. Next, select Custom HTML from the Email Provider dropdown.
   If this option doesn’t appear in the dropdown list it indicates you still have another integration already connected to the campaign that needs to first be deleted. It’s not possible to connect a native integration and a custom HTML integration in the same campaign.
   
6. You’ll be provided with a field to paste your custom HubSpot form code into.
7. When you’re finished, click Save.

Troubleshooting

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

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.

What does the onFormSubmit code do?

The onFormSubmit addition allows your campaign to track conversions and set a cookie when the form is successfully submitted. Without this addition no conversions will be tracked or cookies set on form submission.

How do I track subscriber events?

You’ll need to refer to HubSpot’s documentation on using their Events Javascript API to track subscriber events.

Why does my campaign not close automatically after submission?

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 function call to your onFormSubmit function.

What this means is your Submit input button will now do two things: (1) the om{{id}}.Listeners.convert() code will track a conversion when the button is pressed, and (2) the om{{id}}.startClose() code will 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>
(function() {
	var addForm = function() {
		window.hbspt.forms.create({
			sfdcCampaignId: '70130000000ep2ZZZ',
			portalId: '102310',
			formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
			target: '.FieldsElement--customHTML .customHtml .custom-hubspot-form-{{id}}',
			onFormSubmit($form, ctx){
				om{{id}}.Listeners.convert();
				om{{id}}.startClose();
			}
		});
	};

	if ( window.hbspt ) {
		return addForm();
	}

	// Inject the Hubspot script.
	var script = document.createElement('script')
	script.src = "//js.hsforms.net/forms/v2.js"
	script.async = true
	script.onload = addForm;
	(document.getElementsByTagName('head')[0] || document.documentElement).appendChild(script)
})();
</script>
<div class="custom-hubspot-form-{{id}}"></div>

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