Elementor

How to use a Hubspot form in Elementor popup?

BIG linden / Support Docs / How to use a Hubspot form in Elementor popup?

Elementor

Q:

We are trying to make a popup with Elementor that has a Hubspot lead form in it. We’ve used the Javascript from Hubspot to embed the form, but the form doesn’t show up when the popup appears on the site.

Issue

The client is looking for a solution on how they can easily incorporate their existing Hubspot forms with the Elementor Popup Builder.

How to use a Hubspot form in Elementor popup?

Yes, absolutely! You can easily use your existing HubSpot Forms in Elementor Popup.

Though the functionality doesn’t quite work, there are some workarounds and a couple of approaches to this.

  • Embedding the Hubspot form in a popup
  • Using a native Elementor Form and integrate with Hubspot

Embedding a Hubspot form in a Popup in Elementor

If you’re reading this, you may have already tried to embed the Javascript code for your Hubspot form, and found it isn’t working correctly. If this is the case, there are a couple things to check before looking for another approach.

Firstly, make sure you’re not loading the css style for the form (inconvenient, but the best approach to load in Elementor popup). To do this, just add this little code to the last part of your Hubspot code:

  css:''

So, if your original script was this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "yourportal289d",
formId: "51561561c51e1c5e1c6515e116e515"

});
</script>

Just add the code, so your new script should look like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "20523599",
formId: "992d1848-0fdf-43bc-ac9d-ae87992db180"
  css:""
});
</script>

This solution doesn’t work for everyone, but it could just be what you need. If this doesn’t do the trick, however, read on to learn about another solution that should work for you.

Integrating Elementor Form with Hubspot

Elementor forms, the native forms built inside Elemtor, are integrated with Hubspot already! You just need to setup the integration.

Time needed: 15 minutes

Follow these easy steps to integrate your Elementor Form with Hubspot and get your form submissions sent directly to Hubspot. It’s really pretty easy.

  1. Enable ‘Non-Hubspot Forms’ in Hubspot account

    Just go to the HubSpot website and login with your account. Click on the Marketing menu and then click Forms.

  2. Make sure Non-Hubspot Forms are ‘Turned on’

    Click the Non‑HubSpot Forms and make sure this option is enabled. If it is not, you can click the settings link to enable it.

  3. Install the HubSpot plugin
    From your WordPress admin dashboard, just go to Plugins –> Add New. Type “Hubspot” into the search box. Once it appears, click the Install Now button to install. Go ahead and activate the plugin once it is installed.

  4. Sign into Hubspot

    Once the plugin is installed and activated, you should see a new menu item ‘HubSpot’ in your WordPress admin. Log into Hubspot with your HubSpot account user and password by clicking the Sign in here link on the upper-right corner. Continue by clicking the Continue with this account button.

  5. Create an Elementor form to collect leads with HubSpot

    HubSpot is now connected with your WordPress site! Yay! Really simple, really. No need to enter secret API keys. Once done with the steps above, you can create a new form (or edit an existing one) to collect leads and save them (the leads) to your HubSpot account.

  6. Name your Elementor Form

    Give it a unique name.

  7. Assign the form a “Form-ID”

    Open the ‘Additional Options’ menu and set a Form-ID for your form. Form IDs cannot contain a space, so basically just like apples_okay.

  8. Test your new Elementor Form

    Submit the form on the live website as a client would.

  9. Verify data passed to Hubspot

    Visit your Hubspot account, and head over to Forms. Firstly, verify the form is appearing. Additionally, check that the new submission you made appears.

Overall, this is pretty painless. If you’re looking for more information about integrating Hubspot with Elementor, here’s the official documentation supplied by the Elementor team. If you prefer to manually install the Hubspot plugin, here’s the plugin in the WordPress community directory.

Can you make the section sticky?

Definitely. It’s easy to make a section sticky in Elementor. Just open up the settings and select Sticky. Read the full tutorial on how to sticky a section or column in Elementor. It’s pretty straightforward and doesn’t matter if your popup is full screen or if the form is in the section.

Additional reading

None at this time.

More articles about Elementor

More articles related to .

Capabilities related to Elementor:

Unmatched expertise in Elementor development. Industry-leading Elementor dev, design, and support team.
We know custom widgets in Elementor. Get the tools you need to succeed.

REQUEST A 1:1 CONSULTATION

Get a 30 minute 1:1 consult with a BIG consultant and get a 7 page report on making digital work in your organization with key insight into paths for success and playbooks just for your unique needs.

Please understand not all requests can be met. Please contact us with any questions.