WordPress Elementor Forms not sending to Hubspot CRM

Strike_Concepts · ‎Jun 4, 2019

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

ATirante · ‎May 22, 2021

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.

View solution in original post

ingramleedy · ‎Jan 6, 2021

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 · ‎Jan 6, 2021

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>

dennisedson · ‎Jan 7, 2021

Hey @ingramleedy , thanks for the info

Looking back at a previous elementor form issue, it appeared that the popup form had not been constructed until after the button click. I want to confirm that you are saying that the form has been constructed on page load to the dom. Is that correct?

ingramleedy · ‎Jan 7, 2021

Just got this from Hubspot and I confirmed this does seem to be the behavior. I wonder if there is a way to fix this somehow. I have contacted Elementor about the issue as well.

Hi Ingram,

Thank you for getting in touch with HubSpot Support! This is Carina and I'm happy to help here 🙂

I understand that you are working with non-HubSpot forms in a pop-up and are experiencing issues with form submissions coming through. Thank you for sharing across all the details as well as the steps you have tried! 🙂

Doing a closer check on your page (https://learn.protectedtrust.com/what-so-special-about-microsoft-surface), it looks like your form only appears when the pop-up is opened. This affects how the non-HubSpot tool picks up the form.

To share some contexts, the HubSpot script will scan your website the moment the page loads to find <form> tags. If the <form> is only introduced to the page after the first load, it will not be picked up by the script and thus submissions will not be passed.

I can confirm that this is happening on your site. When we open your pop-up, we can see that the form is found in the source code with the ID of "LPOPTINGUIDE" (See screenshot 1). If we reload the page and try to search for the form with the ID "LPOPTINGUIDE", it doesn't show (See screenshot 2). As such, since the form only renders when the pop-up is enabled, the script is unable to pick up your form.

I understand from you that you were able to work around this by inserting the HubSpot tracking code using the Google Tag Manager. Could you share more on how you have injected the script and is this currently working on your page?

Unfortunately, the non-HubSpot form tool does have several limitations because it relies heavily on how the <form> code is configured (The requirements are listed here). Other options would be to use the HubSpot API, or using a third-party integrator like Zapier. Since these options are using API, they are more reliable and run into fewer front-end issues.

I hope this information helps and please don't hesitate to reach out if you have further questions. I'm most glad to assist 🙂

dennisedson · ‎Jan 7, 2021

Hey @ingramleedy

Thanks for all of this. I am going to send this to some internal teams to discuss.

dennisedson · ‎Jan 14, 2021

@ingramleedy ,

Did you get a response from Elementor?

I have discussed with several people internally and at this point there is nothing we can do on our end. The best option would be for a direct integration from Elementor.

I am also going to reach out to them to make sure this is on their radar.

matsandersson · ‎Jan 3, 2021

Hi,

I'm experiencing the same issue, the form seems to work properly but it is not connecting to Hubspot. The weird part of it all is that it works when we try in it "preview" in elementor but when we publish it doesn't work.

dennisedson · ‎Jan 4, 2021

Hey @matsandersson , @DevGreg

Could you both provide example links? I am going to dig into this a bit more.

ingramleedy · ‎Jan 6, 2021

Im having the same issue. It works sometimes at first and then it stops working. I tried clearing cookies, different browsers, etc. It does seem that once it collects an event it wont collect any more. I am also using the popup.

Forms on non-popup seem to be working perfect. It seems to be only affecting the popup forms.
@dennisedson

DevGreg · ‎Dec 14, 2020

Did anyone receive a solution for this issue? It still persists when trying to submit a form within an Elementor popup and doesn't communicate with HubSpot..

jramirez · ‎Oct 28, 2020

I am also facing the same issue as @RajivK and I am not able to get my elementor popup forms to send submitted contact info over to hubspot. Is there a solution for this yet?

numeractive · ‎Oct 8, 2020

I am facing the same issue and still not able to resolve it 😞 That's very uncomfrtable

stamm · ‎Jul 19, 2020

I'm facing the exatct same problem with a popup =/

PamCotton · ‎Jul 24, 2020

Hello @stamm

Could you please provide us more details on what is happening in your end?

The more information, screenshots, and details you can provide, the better I can advise on the next steps.

Thank you!

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !

RajivK · ‎Aug 14, 2020

Hi Pam,

I am facing a similar problem as some users have highlighted before. I have created a simple contact form using Elementor Pro on my website. The form seems to be pushing data to Hubspot when it is embedded directly on the page. However, when the form is included in a pop-up, the data is not getting collected in Hubspot contacts.

For Example:

A form submission on this page (https://discoveru.in/contact/) pushes the data prefectly well to hubspot contacts

However, a form submitted in the pop-up on this page (https://discoveru.in/) by clicking the "Get Started" button does not push the data to Hubspot contacts.

The form on my website is enclosed in <form> tags and it loads as soon as the page loads.

Your help with troubleshooting would be highly appreciated.

PamCotton · ‎Aug 19, 2020

Hello @RajivK,

Could you please confirm that this form applies to the requirements here.

I was not able to find the nonHubSpot form submissions you mentioned in the account, so I would like to know more about how this data is being sent to us.

The more information, screenshots, and details you can provide, the better I can advise on the next steps.

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !

RajivK · ‎Aug 28, 2020

Hey Pam,

I have provided all the troubleshooting information and screenshots you have asked for above. Any update on resolving this issue?

dennisedson · ‎Aug 28, 2020

Hi @RajivK ,

I just sent a couple tests.

(you will see test as the name so you can delete 😀)

I confirmed that I can successfully send from the contact us page and not the homepage. There are two differences between the two.

Homepage:

1. Popup

2. JavaScript event happening on the button. This, I imagine, is what is populating the next page's form.

I think we need to focus on that event that is occurring. I have a feeling that it is hijacking the values and they are not being passed to HubSpot.

Referencing this knowledgebase article:
Form has JavaScript bound to the form submit event or submit button click event. This is how the tool captures submissions and any other events, and can prevent HubSpot from knowing when submissions occur.

Would you be able to clone this page and do the following:

Test as is to see if it just works.
If it doesn't work, can we remove the JavaScript from that form and test again.

Let us know what happens.

Thank you!

RajivK · ‎Aug 20, 2020

Hi Pam,

To the best of my knowledge, all the requirments mentioned here are fulfilled by our form.

I have attached 2 screenshots for you from our website. the first is of our home page, where the non-hubspot form is embedded in a pop-up.

The second is our Contact page, where the form is directly displayed on the page itself.

Both contact forms are the same, however, we are receiving data from the form on the contact page and NOT from the form in the pop-up on our home page.

We have the hubspot tracking code installed on all our pages, and that's how we are capturing non-hubspot form data.

It seems like none of the forms in pop-ups on our website are sending data to hubspot.

jennysowyrda · ‎Jun 6, 2019

Hi @Strike_Concepts

I am not too familiar with Elementor Pro, however the screenshots in the document are outdated. The forms tool now lives under the "marketing" tab from the top navigation.

Thank you,
Jenny

zachsergio · ‎Jun 13, 2019

Curious if this requires a paid version of HubSpot's marketing plan?

CRM