CMS Development

Ayogold
Member

How to use hubspot form in WordPress elementor plugin

I want to know how I could embed hubspot form code in elementor.

I am building a landing using elementor WordPress plugin,I tried to embed hubspot form short code in the page built with elementor.

How do I make the form show in elementor page .

 

Is there a tutorial I could read ?

0 Upvotes
9 Replies 9
sharonlicari
Community Manager
Community Manager

How to use hubspot form in WordPress elementor plugin

Hi @Ayogold 

 

I'm not exactly sure how the plug-in renders javascript for trying to insert the form embed code in the form section of your page, however on your end if you're using the Elementor editor, paste the code into a shortcode element on your page, such as a Elementor Shortcode Widget.

 

As Elementor isn't a native app supported by HubSpot, I'd suggest reaching out to the Elementor Support team.

 

Also, I'd suggest checking this article where explains the form requirements here for a form to sync to HubSpot.

 

I hope this helps

 

Thanks

Sharon

 

 

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




0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

How to use hubspot form in WordPress elementor plugin

I've not used the elementor plugin, but most wordpress setups have html widgets, or you can just switch the regular content module to text view, rather than visual, so you can see the code and paste it there. 

That's how it works in beaver builder. 

I found this:

https://themes.artbees.net/docs/adding-html-codes-directly-in-page-using-elementor/

Lutz
Member

How to use hubspot form in WordPress elementor plugin

Hi,
I´m using Wordpress Elementor in an OceanWP Template with Hubspot.
I suspect with an update the forms from Hubspot are no longer visible on the website. Before it worked.
I have now tried to insert the embedding script using a shortcut as well as an HTML block. But unfortunately without success.
The Hubspot form works on another website. So I think it's not because of Hubspot.
I am happy about all ideas to solve that issue.
Greetings from the Baltic Sea
0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

How to use hubspot form in WordPress elementor plugin

On some wordpress sites I've had to install the classic editor for various issues after an update. Maybe you could try that. Also, make sure that when you paste it in, there are no extra returns or spaces that wordpress might be adding. It has to be exactly as it is given from hubspot.

 

0 Upvotes
Lutz
Member

How to use hubspot form in WordPress elementor plugin

Hi Janet,
thanks for your reply.
It seems, that the script for the Hubspot form is well embedded.
But it is not shown  on the website.

<div class="elementor-element elementor-element-2a89f74 elementor-widget elementor-widget-shortcode" data-id="2a89f74" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode">
					<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
					<script>
						hbspt.forms.create({
							portalId: 68####,
							formId: "######-16f3-498c-a96f-8fd25609069d",
							shortcode: "wp",
							
						});
					</script>
				</div>
				</div>
0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

How to use hubspot form in WordPress elementor plugin

Mine looks different. Maybe don't use the WP shortcode part... did you add that in or get from hubspot?

 

there should be quote marks around the id also... look at this one:

 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
	portalId: "2724332",
	formId: "870b74a1-6ce7-4180-87a4-2020f538017d"
});
</script>
Lutz
Member

How to use hubspot form in WordPress elementor plugin

Your code looks like the "embed code" out of Hubspot.
Mine was the "shortcode", generated from the Hubspot Plugin in Wordpress.

I tried out both and pasted them in shortcode, html, and text widget.

But it worked well with the embed code in the shortcode widget. Then there were various updates and now I noticed that the Hubspot forms are no longer displayed.

Maybe we have different plugin versions. Mine are:
Elementor (not Pro): 2.9.12
Hubspot: 7.34.4
Theme OceanWP: 1.8.3
WordPress: 5.4.2


0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

How to use hubspot form in WordPress elementor plugin

maybe try to post a link to the page where it's not appearing but you have it embedded.

0 Upvotes
Lutz
Member

How to use hubspot form in WordPress elementor plugin

I thought about it again at the weekend.
 
We use a cookie consent manager (GDPR relevance) on the website.
There are several ways of integrating that script.
 
Anyone who may have problems should check the relevant option.
For me, than it also worked with the integration of Hubspot forms via shortcode.
 
Many thanks for the support.
0 Upvotes