WordPress Elementor Forms not sending to Hubspot CRM

[Strike_Concepts]

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

[KitsuneCC]

I have the same issue too and need assistance. It's not embedded into a popup, just a usual Elementor form on the page...

[MarcacoesOnline]

Same problem here with current forms, not any popup!

[EcoSwap]

@dennisedson 

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

[dennisedson]

@EcoSwap ,

Did you check out @ATirante 's solution to see if that works?

[ATirante]

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.

[BMoses]

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?

[ipulfer]

@ATirante 

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

[ATirante]

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.

[ipulfer]

@ATirante - that is perfect, works well. Thank you for your help 🙂

[andrus]

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.

[BInversoresPr]

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!

[Pepe]

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?

[BInversoresPr]

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?

[dennisedson]

@BInversoresPr 

That could possibly work. 

[ingramleedy]

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).  

[ingramleedy]

@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.   

[dennisedson]

@ingramleedy ,

Thanks for documenting all of this for the Community and I am sorry that the outcome is not what you wanted 😞

[BPili]

Please, we need a solution for the popup form, guessing pop up form is going pretty regular to site owner now. 

[ingramleedy]

It's the Hubspot plugin. I removed it  and went back to Google Tag manager to inject the hubspot script and it working now.

[ingramleedy]

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&#8217;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>