topic Re: Hubspot shortcode issue with Elementor Pop-up in CMS Development

Hubspot shortcode issue with Elementor Pop-up

rchafei — Fri, 11 Mar 2022 13:39:29 GMT

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

Re: Hubspot shortcode issue with Elementor Pop-up

dennisedson — Mon, 14 Mar 2022 19:20:39 GMT

@Anton ever deal with this 🤔?

Re: Hubspot shortcode issue with Elementor Pop-up

Anton — Tue, 15 Mar 2022 07:36:31 GMT

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:

<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:

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

Re: Hubspot shortcode issue with Elementor Pop-up

dev_rico — Thu, 17 Mar 2022 11:28:30 GMT

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.

Re: Hubspot shortcode issue with Elementor Pop-up

OshriHumanz — Tue, 05 Jul 2022 14:20:23 GMT

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?

Re: Hubspot shortcode issue with Elementor Pop-up

AaaBbb — Fri, 12 Aug 2022 09:52:36 GMT

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!

Re: Hubspot shortcode issue with Elementor Pop-up

bartt — Mon, 14 Aug 2023 15:14:38 GMT

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' );
			} );
		}
	});
});

Re: Hubspot shortcode issue with Elementor Pop-up

ILinder — Mon, 13 Nov 2023 17:47:43 GMT

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.

Re: Hubspot shortcode issue with Elementor Pop-up

joaomgarcia — Tue, 05 Dec 2023 21:32:39 GMT

Perfect, thanks!

Re: Hubspot shortcode issue with Elementor Pop-up

ILinder — Tue, 05 Dec 2023 22:08:24 GMT

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.

Re: Hubspot shortcode issue with Elementor Pop-up

ILinder — Tue, 05 Dec 2023 22:22:24 GMT

If you go to this page on our site, click the ebooks filter/button and click one, these are hubspot shortcodes for forms. https://speedeondata.com/learning-center/

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.

Re: Hubspot shortcode issue with Elementor Pop-up

RAnand80 — Wed, 14 Feb 2024 20:36:36 GMT

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