Featured Hubspot

How to integrate Hubspot in WordPress for collecting leads


Lead Collecting in WordPress with Hubspot

Collecting leads in any website is a very dynamic and broad topic.  The campaigns you implement to collect leads can vary greatly.  We won’t be covering that today.  What we’ll be discussing today revolves primarily around WordPress, and the Hubspot embed code. This is a pretty straightforward process and there are a couple of different means to accomplish this task.

Hubspot, is one of the best tools that any person starting out with their blog or startup because it’s free, and comes with a lot of features that are extremely useful.  Again, that’s for another post another day, but just know that when you’re starting out, Hubspot is a very good starting point.

1. Get a Hubspot account

First thing you want to do is obviously get a Hubspot account created.  You can head over there now and getting your account started is very quick and easy.  Just a few basic questions and a verification of your email and you’re all set.

2. Have a WordPress site

If you’re reading this, I’m assuming that you already have a WordPress site 🙂

3. Get your Hubspot embed code

Log into your Hubspot account and head over to Settings > Install Code and Tracking. Your code will look something similar to this:

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXX.js"></script>
<!-- End of HubSpot Embed Code -->

The XXXXXXX will obviously contain your specific account’s tracking code.

Three methods in which to embed your Hubspot code in your WordPress site

There are three methods I’ve used in the past to embed my Hubspot code into my WordPress sites.

1. Modify the header.php file in your theme

In your WordPress backend (/wp-admin), head over to Appearance > Editor. You may or may not get a warning, just click OK or ignore it.  We’re not doing anything too crazy.  That said, I’m not responsible if you break your theme!  If you’re not comfortable, copy the original code in the file and paste it in a text editor and save it that way you can reverse it if necessary.  Or take a backup, whatever is more convenient.

You’ll want to find header.php (or similar).  The Hubspot code needs to be placed within the <head> section of your file.  Like such:

<!DOCTYPE html><!-- HTML 5 -->
<html <?php language_attributes(); ?>>

 <!-- Start of HubSpot Embed Code -->
 <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXX.js"></script>
 <!-- End of HubSpot Embed Code -->

Click Update file and you’re all set!


2. Use Hubspot’s WordPress plugin

In the same area that you retrieved your tracking code, down below is a WordPress installation section. Again, in your Hubspot account, this is located in Settings > Install Code and Tracking. Scroll down to the bottom and you’ll see the section for WordPress users:

WordPress installation of Hubspot Tracking area

Click on Download the zip file for WordPress and upload the plugin to your WordPress site.  In your backend, this can be done in Plugins > Add new > Upload plugin. Now just click install now and activate.  You’ll now have an item in your left hand sidebar in the WordPress backend for Hubspot:

Hubspot menu item in WordPress

Click into the menu item for Hubspot and login with your Hubspot account.  You’re now all set!


3. Use Google tag manager to embed Hubspot code

I won’t cover how to setup your Google tag manager account, but know that it’s pretty straightforward and you can get started here.  It doesn’t take very long to do so either.

Create a new tag for the HubSpot tracking code by clicking Tags in the left sidebar menu, and then select NewName your tag, choose custom tag type, past your code and select the all pages trigger:

Click Save to save your new tag, and then click Publish in the upper right-hand corner to save your container and tags.

Hubspot also has a very good article on this for further information as well.

That’s it! Now automatically collect forms!

Hubspot is pretty intelligent at automatically collecting form data on your site.  Each time a visitor fills out a form on your site, Hubspot can collect that information for you, notify you and you can then use that information for Marketing Automation campaigns and more. Here’s how you turn that on:

All you have to do is first ensure that you’re under the marketing section in Hubspot:

Then just go to Settings > Marketing > Collected Forms and turn the switch to ON for Collect data from website forms:

Travis Wade
Travis Wade
Just a normal human being living the dream. I'm an IT professional in the Healthcare space with a love and passion for cloud computing and highly redundant infrastructure.

Leave a Reply

Your email address will not be published. Required fields are marked *