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

• FAQs
  • Why do I add an empty div to my form code?
  • What does the onFormSubmit code do?
  • How do I track subscriber events?
  • Why does my campaign not close automatically after submission?

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: '.{{ns}}--FieldsElement--content .custom-hubspot-form' attribute
• And the onFormSubmit function to track conversions.

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',
        target: '.{{ns}}-FieldsElement--content .custom-hubspot-form',
        onFormSubmit($form, ctx){
            om{{id}}.Listeners.convert();
        }
    });
 </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 a 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',
        target: '.{{ns}}-FieldsElement--content .custom-hubspot-form',
        onFormSubmit($form, ctx){
            om{{id}}.Listeners.convert();
        }
        });
    });
 </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 does the onFormSubmit code do?

A: 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.

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.

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 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>
    jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
        hbspt.forms.create({
        sfdcCampaignId: '70130000000ep2ZZZ',
        portalId: '102310',
        formId: '190ga042-56fc-4897-bed4-86ea519cb3e9',
        target: '.{{ns}}-FieldsElement--content .custom-hubspot-form',
        onFormSubmit($form, ctx){
            om{{id}}.Listeners.convert();
            om{{id}}.startClose();
        }
        });
    });
 </script>
 <div class="custom-hubspot-form"></div>

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