Form within a pop up modal


#1

Hi there,

There has been some kind of IOS update recently that has essentially broken our forms when we embed them within a pop-up modal.

I suspect that the recent update has affected how the height is being determined. So my question is this, what do I have to do to the embed code to tell it to wait for a certain event to occur before rendering? Basically I want it to wait for the pop-up modal to be visible before rendering. I believe this will take care of the performance issues we are seeing. Thanks!


#2

Hi @amjones2,

You can call the HubSpot form embed code in an event handler, which should load the form after that event occurs. For example, if your modal window opened after a button click, you could do something like this:

$('#buttontest').on('click', function() {
    hbspt.forms.create({
    portalId: 'xxxxx',
    formId: 'yyyyy-yyyyyy-yyyyy-yyyyyy',
    target: '#formdiv'
  });
} );

#3

Hi Derek,

I have blondie question.

Where to get:
#buttontest
portalId: 'xxxxx',
target: '#formdiv'

I have the basic page and just wondering is it possible somehow to have the pop-up form once someone clicked the CTA...

Thanks


#4

Hi @asedko,

Those values are all just placeholders; the #buttontest value would be whatever the id or selector of the button you're looking to attach the event listener to, the portalId: 'xxxxx' field would be the Hub ID of the portal your form lives in, and the #formdiv value is just the selector for the target container in which you want the form to render.