We have the Hubspot plugin installed and we use shortcode to display the form using the Elementor Page Builder. We are having issues with 2 iframes generated when we use the inspect element on the browser.
It generates two id’s of the iFrame tag.
Hs-form-iframe-0
Hs-form-iframe-1
We use the Elementor Pop-up to display the shortcode.
How can we get rid of the white space on embed forms?
Thank you
@Anton ever deal with this 
?
Hi @rchafei,
could you please provide a “preview” link to this page?
Seems like a CSS misbehavior.
You could try to embed the form without CSS styling by modifing the embed code as this in the mean time:
original code:
<!--[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({
region: "na1",
portalId: "XXXXXXX",
formId: "XXX-XXX-XXX"
});
</script>
modified code:
<!--[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({
region: "na1",
portalId: "XXXXXXX",
formId: "XXX-XXX-XXX",
css:''
});
</script>
by adding
css:''
to the embed code you’re disabling the default CSS from HubSpot and the CSS should be grabbed from your WordPress theme (you might need to add/modify it slightly)
best,
Anton
Hello Anton,
I’m Rico and I’m one of his developers on that site. We actually tried that solution and still, we are having the extra white spaces issue on the pop-up.
Here’s how I did it:
and here’s the result:
To further expand this, when we use the shortcode from the Hubspot plugin, we are getting javascript error when looking at the console tab from inspect element. See here:
We have two caching system on the site. One is from the wpengine and one is from the WPRocket.
I think it’s worth a try if we can have ways to exclude the javascript files from the Hubspot plugin to the WPRocket settings so that it will not be cached. What do you think?
Looking forward to your solution.
We are having the exact same issue.
This is a bug - and the worst part that if we have another form in the page - the one that should be in the popup is injecting itself to the form on the page.
Loading the form by html and not a shortcode on elementor popup loads an iframe with an empty body.
How can we fix this?
So guys, care to post the solution? I’m having the same issue. White space in HTML code block.
Please help me sort this out! Thank you!
Hi @rchafei , I had the same issue, so it’s still a going on. But here is a youtube video that helped me: https://www.youtube.com/watch?v=WA9v_YrylIU
It basically wraps this code arround the script:
jQuery(window).load(function() {
jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => {
if ( document.getModal ) { // It's a popup document
document.getModal().on( 'show', () => {
console.log( 'Run your script here' );
} );
}
});
});
Perfect, thanks!
I’m dealing with the same issue. This is compounded by a custom post type using an Advanced Custom Field for pop-up content. It will work with a Pardot iFrame but not with Hubspot JS. I’ve tried to insert even one form JS manually via PHP and still doesn’t load. I’ve tried adding the first JS library script tag seperately so it’s there on page load and doesn’t work either. Incidentally we also use WP Rocket and also have Godaddy for caching. But even locally on my laptop I can’t get the form to show.
I was having this trouble. I tried many solutions but at the end of the day I think it was both the wordpress site caching via a plugin, godaddy.com caching (with managed wordpress) and then possibly cloudflare caching. I came back after a weekend and suddenly the hubspot shortcodes worked in the Elementor Pro popups for corporate website. However, I had to use the Wordpress Hubspot section in admin to get the shortcodes.
The main point, try clearing any cache you can.
If you go to this page on our site, click the ebooks filter/button and click one, these are hubspot shortcodes for forms. Learning Center | Speedeon
Nothing special going on, but apparently until the various caches were cleared and purged it would show no shortcodes for hubspot in the elementor pro pop-ups.
I had the same problem, in the end I decided to not use Elementor Popup and installed Popup maker plugin.
That worked perfect with hsforms.
If anyone having this issue, simply use popup maker plugin and it will solve the form on popup