Need help integrating Hubspot form into OptinMonster - Code review requested

Other Questions HubSpot
1

Hey everyone, I’m having trouble with Hubspot’s external embed code in OptinMonster’s ad builder. I thought it would be a simple copy-paste job, but the email form isn’t showing up. I’m pretty new to this, so I might be missing something obvious.

Here’s the code I’m trying to use:

<div id="hubspot-form-container"></div>
<script>
  window.onload = function() {
    hbspt.forms.create({
      target: '#hubspot-form-container',
      region: 'na1',
      portalId: '1234567',
      formId: 'abcdef12-3456-7890-abcd-ef1234567890'
    });
  }
</script>

Can anyone spot what I’m doing wrong or suggest how to make this work in OptinMonster? Any help would be awesome!

2

I’ve been in your shoes before, and integrating HubSpot forms with OptinMonster can be tricky. From what I see, your code looks correct, but OptinMonster might be stripping out scripts for security reasons. Here’s what worked for me:

Instead of using the HubSpot JavaScript, try using their raw HTML form. You can get this by going to your HubSpot form, clicking ‘Share,’ and selecting ‘Embed code.’ Choose the ‘Raw HTML’ option.

Copy that HTML and paste it directly into OptinMonster’s HTML editor. This method bypasses the need for external scripts and should display your form correctly.

If you still run into issues, double-check that you’re pasting the code into the right place in OptinMonster’s builder. Sometimes the visual interface can be a bit confusing.

Hope this helps! Let me know if you need any more guidance.

3

I’ve encountered similar issues when working with OptinMonster and external forms. The problem likely stems from OptinMonster’s security measures, which can interfere with external scripts. Here’s a workaround that’s proven effective:

Instead of using the JavaScript embed, try using an iframe to load your HubSpot form. You can generate an iframe embed code directly from HubSpot. Go to your form settings, click on the ‘Share’ tab, and select the iframe option.

The iframe code should look something like this:

Paste this into OptinMonster’s HTML editor. This method isolates the form within the iframe, preventing conflicts with OptinMonster’s scripts.

Remember to adjust the width and height attributes as needed to fit your design. If you’re still facing issues, reach out to OptinMonster’s support team – they’re usually quite helpful with integration challenges.