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