topic Re: How to use hubspot form in WordPress elementor plugin in CMS Development

How to use hubspot form in WordPress elementor plugin

Ayogold — Sat, 28 Mar 2020 14:16:22 GMT

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 ?

Re: How to use hubspot form in WordPress elementor plugin

sharonlicari — Thu, 02 Apr 2020 09:38:21 GMT

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

Re: How to use hubspot form in WordPress elementor plugin

JanetArmstrong — Sun, 05 Apr 2020 13:39:39 GMT

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/

Re: How to use hubspot form in WordPress elementor plugin

Lutz — Thu, 18 Jun 2020 14:25:51 GMT

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

Re: How to use hubspot form in WordPress elementor plugin

JanetArmstrong — Thu, 18 Jun 2020 14:48:04 GMT

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.

Re: How to use hubspot form in WordPress elementor plugin

Lutz — Thu, 18 Jun 2020 16:04:48 GMT

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>

Re: How to use hubspot form in WordPress elementor plugin

JanetArmstrong — Thu, 18 Jun 2020 16:17:01 GMT

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>

Re: How to use hubspot form in WordPress elementor plugin

Lutz — Thu, 18 Jun 2020 17:03:28 GMT

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

Re: How to use hubspot form in WordPress elementor plugin

JanetArmstrong — Sun, 21 Jun 2020 12:41:28 GMT

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

Re: How to use hubspot form in WordPress elementor plugin

Lutz — Mon, 22 Jun 2020 08:30:36 GMT

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.