We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Jun 4, 2019 2:15 AM
I'm trying everything to get the Elementor Forms (comes with Elementor Pro) to connect and submit form data to HubSpot.
Elementor says it's super easy: https://docs.elementor.com/article/262-hubspot
I can't get it to work.
I don't even SEE 'leads' under the Marketing menu...
Feb 23, 2022 10:19 PM
I have the same issue too and need assistance. It's not embedded into a popup, just a usual Elementor form on the page...
Apr 13, 2022 10:19 AM
Same problem here with current forms, not any popup!
Jun 10, 2021 7:06 AM
We have the same issue here: ecoswap.me . Try to click any of the "Feature your shop on EcoSwap" button to see the form. For some reason it does not send the leads to Hubspot
Jun 10, 2021 11:26 AM
@EcoSwap ,
Did you check out @ATirante 's solution to see if that works?
![]() | Make sure to subscribe to our YouTube channel where you can find the HubSpot Community Developer Show |
May 22, 2021 1:04 AM
I managed to make something work with Elementor without using any other plugins, but I haven't tested it extensively yet. The submissions seem to be working as well.
By wrapping the hubspot script in
jQuery( document ).on( 'elementor/popup/show', () => {
});
the form waits for the popup to show up before displaying it. It seems to be calling it twice though so you'll have to clear the div where it's being outputed like so:
<!--[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>
jQuery( document ).on( 'elementor/popup/show', () => {
jQuery('.hbspt-form').remove();
hbspt.forms.create({
region: "na1",
portalId: "PORTALID",
formId: "FORMID"
});
});
</script>
I'm thinking .remove() might cause some problems when there are multiple hubspot forms in the page but if that happens, you can probably just target an id instead of a class to specify which form it's supposed to remove.
Dec 16, 2021 5:07 AM
Hey There,
I have a similar issue. I've got contacts from an Elementor optin page (Woofunnels) that doesn't pass the contacts to HubSpot. I've used another Elementor/Woofunnel and get the contact data. I have no idea how to access the script above from Elementor/Woofunnels. Anyone able to help?
Oct 18, 2021 3:55 AM - edited Oct 18, 2021 4:13 AM
Hi - this is exactly what i'm after. I have an embedded form in an Elementor popup that isn't displaying. Using your code above makes it work - however what it then does is removes the contact form we have in the footer of our page.
How do i target the .remove() by ID instead of class, as you suggest in your post?
Thank you - this has saved me hours of head scratching
Oct 18, 2021 11:39 AM
Heya @ipulfer! So what I'd do is add an ID to the popup's main section
And target that in the .remove() line instead likeso:
jQuery('#sample_id .hbspt-form').remove();
That way, it would only target the hubspot form inside that popup form and not your footer as well.
Oct 18, 2021 12:19 PM
@ATirante - that is perfect, works well. Thank you for your help 🙂
May 21, 2021 4:32 AM
We've recently added Elementor Forms to our App Connector (that connects various marketing tools to HubSpot) but we haven't tested it on pop-up forms yet. Happy to offer the App connector for free to a few people if you could help to test whether the pop-up works as intended. Please DM for details.
Mar 22, 2021 7:52 AM
I was finally able to solve the problem by using Elementor Extras widget (a paid addon to Elementor plugin) to create the popups intead of the native Elementor Pros one. Although I havent tried it, I guess you could also solve this by using Bootstrap or any other solution to create the popups.
Hope it helps!
Apr 15, 2021 4:55 AM
Hello, I see you tried it with a paid plugin.
Why have you chosen this plugin especially?
I am trying to get it working with zapier. Will update when I have news.
Also tried to put in the hubspot tracking code into a hidden field in the popup but that did not work too.
Had succes btw with plugin "popup maker" and then make with Elementor a section with a mailform. Copied the shortcode into the popup maker and had a working popup with good connection to Hubspot.
Only thing I cannot get to work is that the attachments of elementor mailforms (also not from normal mailforms) will be loaded into Hubspot. Anyone has the same problem?
Feb 19, 2021 12:07 PM
Any advance in this topic? Im facing the exact same problem... Maybe JavaScript solution could be effective? Duplicating the pop-up form? Re-calling the Hubspot function that scans the <form> tag once the pop-up fires?
Feb 19, 2021 2:05 PM
That could possibly work.
![]() | Make sure to subscribe to our YouTube channel where you can find the HubSpot Community Developer Show |
Feb 8, 2021 10:29 AM
Leads is under HubSpot. Once you install the Plugin on wordpress, it bascialy installed the Hubspot scripts to listen to form submission and then if you have in Hubspot, the Marketing > Forms > Non-Hubspot Forms. Turn on Collect data from website forms and then click the Save button, it will start collecting form data from all your websites forms (most all , not reliability on pop-ups in elementor).
Feb 8, 2021 10:25 AM
@dennisedson I havent heard anything from Elementor, I assume they point this back to Hubspot anyway. Elementor has some native integration with other CRM systems rather than relying on the another plugin. In Hubspot's case, its relying on the Hubspot plugin (or script).
I've tried using some 3rd party form integrations that support Hubspot, but it cause the elementor blocks to slow down because they also load all the Hubspot Lists and cache contact information, and in our case this is a pretty extensive list that exhausts memory and performance. So that is out.
So the only real option for us is to NOT USE POP-UP FORMS. which isnt idea when looking at conversion rates and what works best. I like having the options to test.
Utimately, this has me reviewing other CRM systems that a natively supported to see why they are always the main CRM/Marketing tools that are integrated and not HubSpot.
We're at a place where we want more customization and flexability that Wordpress/WooCommere (vs shopify), lead generation, tracking, custom code, layout, and that elementor provides.
Feb 8, 2021 11:19 AM
Thanks for documenting all of this for the Community and I am sorry that the outcome is not what you wanted 😞
![]() | Make sure to subscribe to our YouTube channel where you can find the HubSpot Community Developer Show |
Feb 8, 2021 10:13 AM
Please, we need a solution for the popup form, guessing pop up form is going pretty regular to site owner now.
Jan 6, 2021 6:21 PM
It's the Hubspot plugin. I removed it and went back to Google Tag manager to inject the hubspot script and it working now.
Jan 6, 2021 7:11 PM - edited Jan 6, 2021 8:20 PM
I believe the popup conforms to hubspot's form policy, https://knowledge.hubspot.com/forms/use-non-hubspot-forms .
The button that activates the popup is,
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE5NDkiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D" class="elementor-button-link>
The form is already on the page, but the above link is a a href to the anchor link with some action on the backend. The code below is already on the page,
<form class="elementor-form" method="post" id="LPOPTINGUIDE" name="LPOPTINGUIDE">
<input type="hidden" name="post_id" value="1949"/>
<input type="hidden" name="form_id" value="3b9dc607"/>
<input type="hidden" name="queried_id" value="2073"/>
<div class="elementor-form-fields-wrapper elementor-labels-">
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-firstname elementor-col-100">
<label for="form-field-firstname" class="elementor-field-label elementor-screen-only">First Name</label><input size="1" type="text" name="form_fields[firstname]" id="form-field-firstname" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Your First Name"> </div>
<div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-Email elementor-col-100 elementor-field-required">
<label for="form-field-Email" class="elementor-field-label elementor-screen-only">Email</label><input size="1" type="email" name="form_fields[Email]" id="form-field-Email" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Your Email" required="required" aria-required="true"> </div>
<div class="elementor-field-type-hidden elementor-field-group elementor-column elementor-field-group-field_guide elementor-col-100">
<input size="1" type="hidden" name="form_fields[field_guide]" id="form-field-field_guide" class="elementor-field elementor-size-sm elementor-field-textual" value="What’s so special about Microsoft Surface?"> </div>
<div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons">
<button type="submit" class="elementor-button elementor-size-sm">
<span >
<span class=" elementor-button-icon">
</span>
<span class="elementor-button-text">Subscribe me and Send my free guide</span>
</span>
</button>
</div>
</div>
</form>