HubSpot forms not loading with v2.3.1

[taksu]

Hi, I need to show HubSpot form inside a Tobii lighbox. The form rendered correctly with the release v2.2.0.

The form type in HubSpot is "raw HTML form" and is rendered inline via JavaScript, so it's not an iframe embed.

// code to create the HubSpot form

hbspt.forms.create({
        portalId: 'xxx',
        formId: 'xxx',
      });

v.2.3.0 does not render the form either. Can you please check what could have broke this with these releases. Thanks.

[viliusle]

Looks like paid software, so it is very difficult to help you. Real working example from your side could help. Also check console for errors.

[taksu]

Could also be done with a free account and he're examples:

..links removed..

[viliusle]

HTML:

<a href="#hidden-hubspot-form" data-type="html" class="lightbox" data-group="hbs">
  Open HubSpot form
</a>
<div style="display:none;">
    <div id="hidden-hubspot-form">
        <h1>HubSpot form should be displayed here</h1>
        <div id="form_placeholder"></div>
    </div>
</div>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/shell.js"></script>

<script>

  //init Tobii here

  //form
  var form_activated = false;
  tobii.on('open', function (e) {
    if(e.detail.group === 'hbs' && form_activated == false){
      //init form
     hbspt.forms.create({
        region: "na1",
        portalId: "6654994",
        formId: "1a321d67-f2a3-4e1b-afc8-11d52496762d",
        target: ".tobii__slider #form_placeholder",
      });
      form_activated = true;
    }
  })
</script>

When use open dialog, HTML content is copied from hidden element to visible area. So this show form when dialog is opened and we ask to show it inside modal.

[taksu]

That will do the job. Thank you.