How to get a HubSpot form to open in a new browser window

Multiple browser windows are open

Recently, I was working on a project for a major news outlet that uses HubSpot as their platform of choice. On the homepage, there is a masonry wall – a collection of articles that is populated by RSS feeds. Within that wall, there is a HubSpot form that asks the visitor if they’d like to subscribe, and what topics they are interested it. Simple enough (I say that very tongue in check, because there’s nothing simple about this implementation of HubSpot). The client asked that the redirect page (the thank you page that is displayed after the form is submitted) open in a new browser window. Happily, this is a pretty simple fix. Let me share the solution with you.

This is how a typical embed code looks. Notice that the Portal ID has been replaced with XXXXXX, and the Form ID has been replaced with YYYYYY. You would use your Portal ID and Form ID instead.

<!-- [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({
css: '',
portalId: 'XXXXXX',
formId: 'YYYYYY'
});
</script>

Here’s the Solution

Just add the highlighted code to your script. All this does it set the target attribute of your form to “_blank” which means the form, once submitted, will open a new browser window and finish it’s normal process in that new window. So, if your form is set to redirect to a thank you page, that page will open in a new window. The page your visitor was on will still be open in another browser tab or window.

<!-- [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({
css: '',
portalId: 'XXXXXX',
formId: 'YYYYYY',
onFormReady: function() { document.getElementById("hsForm_YYYYYY").target = "_blank"; }
});
</script>

Don’t forget to replace all of the XXXXXX and YYYYYY with your information, and remember to add the comma after the form id before you add the new line of code to your script.

And there you have it! I hope you found this solution to be helpful. If you need assistance with your HubSpot driven website, give us a call.