Embed HubSpot Form in Hype

Elements
1

I’m trying to embed a form from HubSpot into an element in a Hype project that will have 3 layouts (currently am just working with 2, as I can’t get this to work). The HubSpot code utilizes JavaScript. I copied the embed code from HubSpot into the HTML for the element, but the form won’t work. I also went to the url in the HubSpot code and grabbed the mass of code from there and copied that into the element HTML. Doing it this way made it so one form would work, but the form wouldn’t show up on the other layout. I’ve tried this using the same form code for each layout along with trying different form codes for each layout. Each attempt only has one form showing up. I’ve also had both forms show up beneath the staging area, but this hasn’t happened consistently, so I don’t know what is causing that to happen.

I’ve contacted HubSpot, but my contact isn’t familiar with Hype. Anyone out there know how to make this work?

Thanks!

2

Can you share the Hubspot code? I’m not familiar with Hubspot but It could be an ID problem if it won’t show up in another element or on another scene.

D

3

Sure thing!

<!--[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({ 
    portalId: '437232',
    formId: 'ca666e2b-0c44-4ea1-91ed-5e9e8ebc5736'
  });
</script>
4

For using multiple forms, I compared the embed codes and the only thing that changes is the “formId”.

5

For some reason Hubspot doesn’t like being embedded directly within an HTML widget or a rectangle, but if you include a full HTML page within the HTML widget, it will work. You’ll also need to modify the JS reference. So, it will work if you add ‘https’ in front of the JS reference, and also include the script within a full HTML page’s code:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
 
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({ 
   portalId: '437232',
   formId: 'ca666e2b-0c44-4ea1-91ed-5e9e8ebc5736'
 });
</script>
 
</body>
</html>

hubspot2.zip (9.7 KB)

6

For some reason this isn’t working for me. I put that code in the HTML for the element. When I click out of the HTML box, and then return, it’s removed everything but the original code (excluding the added ‘https:’).

7

Can you copy and paste the element from the attachment I included?

Keep in mind that this is a HTML widget, not a regular ‘rectangle’ element. It is technically speaking an ‘iframe’ so it is insulated from the Hype document.

8

Aha! It was that I wasn’t using the HTML widget. It’s working splendidly now! Thanks for your help!