This is a guest post from our HubSpot Certified branding and WordPress partner Kandra Churchwell over at Phases Design Studio. Any snarky comments and giggles should be duly credited to her.
If you’re using HubSpot and have a WordPress site, you probably noticed that HubSpot stopped supporting the HubSpot for WordPress plugin and replaced it with the HubSpot Tracking Code for WordPress plugin. I say “replaced” lightly, as the new plugin doesn’t replace, but rather strips out functionality—specifically the ability to use embed codes for Forms and CTAs via a shortcode.
For our WordPress sites with HubSpot integration, the official solution of placing the embed codes directly on every post and/or page that had a shortcode on it was NOT a viable solution. Below, I’ll walk you through the solution I used that leverages a very handy plugin called Global Content Blocks.
But first, let’s go over a few points with the HubSpot embed code that need to be addressed in order to get everything working just right (i.e. avoiding the “why the heck is my form displaying there?” issues that many people have with HubSpot forms).
HubSpot Form and Calls-to-Action Embed Codes in WordPress
Over the past few months, I’ve been working with the fantastic team of Inbound Marketing whiz kids at Inflow to streamline the integration of WordPress with HubSpot based inbound efforts. It’s been a road well worth the traveling, but we did have a few hurdles to overcome—even for a team where everyone is fully HubSpot certified and with my decade-plus of WordPress experience (did I just age myself?).
With a few calls to the HubSpot support team (and yes, they really do call, or Tweet or email if you prefer), and a bit of WordPress know-how, we gained a pretty solid understanding of just how to get a WordPress site to play nice with HubSpot embed codes for Forms and Calls-to-Action (CTAs).
Ready to learn what we learned? Let’s dive in and see just how to get these two great platforms working together!
HubSpot Tracking Code for WordPress
Grab the HubSpot Tracking Code for WordPress. As the description states:
“HubSpot’s WordPress plugin allows existing HubSpot customers and trial users to install the HubSpot tracking code on their existing WordPress blogs and websites.”
And that’s all it does. Set up is very easy–just enter in your HubID and you’re done. (If you are migrating from the old plugin that provided shortcodes, please read the migration section at the end of this article.)
Custom content – with shortcodes!
The HubSpot approach of just copy/paste the embed code for forms or CTAs directly into the visual editor poses a few issues:
- It leaves you without a way to manage global content (what if you wanted to replace one form with a different form, globally?)
- It requires you to use the text editor for any and all content with a CTA or form as the visual editor WILL break the embed code
To resolve those issues and streamline site management, let’s install a great plugin: Advanced Ads. The plugin is very powerful, flexible… and has AMAZING support!
Once you’ve installed it and used it for your HS embeds, I’m sure you’ll start using it for more content types!
With the plugin installed, all you have to do is create a new “ad” for each embed code. Then you can place the shortcode for the “ad” anywhere on your site.
Before you start copy/pasting the default HubSpot embed codes into “ads”, read on to learn how to customize them (and resolve common display issues).
Setting Up Your Forms
Many people find that the default embed code for forms does not render as expected once placed on their site–forms sometimes just don’t show up, and if they do, they might show up in the wrong place.
The default embed code that HubSpot provides for forms assumes that you do not have any other forms on the page and that your form is going to display in a relatively basic layout. We’ve found that that’s usually not the case:
- Many sites have more than one form on a page (e.g. a footer contact form, a blog subscription form in a sidebar or an email download form at the end of a post). There are a lot of instances where it’s OK, and even necessary for two forms to be on one page.
- Quite often, we want to place a form in a sidebar, header or footer to display on multiple pages.
Creating the Perfect HubSpot Form Embed Codes
Now that we know what the issues are, let’s look at the solutions. Here’s a default embed code from a HubSpot form:
If you take a look at what you are copying, you will see that it’s two pieces of code.
A main script that allows HubSpot forms to be created (with rule for IE 8 browsers):
<!–[if lte IE 8]>
And then a script to call up your specific form:
Once you have completed this, the only part of the default embed code that you should ever include on any of your pages will be the script to call a specific form.
Now let’s look at customizing the script that generates your specific form.
HubSpot provides quite a few configuration options to tweak the default forms, but the one we are interested in is “target.” While HubSpot states that the target attribute is optional, I consider it required as it controls the placement of the form.
“Description: jQuery style selector specifying an existing element on the page into which the form will be placed once built”
Basically, it’s how you specify EXACTLY where on your page you want your form to render. Here’s how I use it:
- Wrap the existing script with a div, giving that div a unique ID (I always use the last portion of the form ID as I know this will always be unique to each of my forms–according to Kevin over at HubSpot who helped me with this!).
- Set the target to the new unique div that you created.
And now, we get to use our perfectly customized embed code!
Here’s the super easy part, and the reason you installed the “ad” plugin:
- Create a new “ad”
- Select “Plain Text and Code” as your Ad Type
- Paste in your customized code with the div and target attribute
Setting up HubSpot Calls-to-Action
Just like with the shortcodes for forms, the basic idea is to copy the embed code from HubSpot and drop it into a new “ad”. Lucky for us, no editing is needed! You really can just copy/paste as long as you set the Ad type to “Plain Text and Code” (just like we did for the form embed code).
Using the CTAs and Form Shortcodes with the WYSIWYG editor
Now that you have clean embed code for your HubSpot shortcodes and Calls-to-Action set up as “ads”, it’s time to use them. This really is a simple as copy / pasting the shortcode supplied on the edit ad page. However, you can also place “ads” on your site through ad placements, create groups, and more. Check out the plugin’s documentation for more details. As I stated before, it’s quite powerful and Thomas (the plugin developer) is a stellar support guy.
Migrating from the old HubSpot for WordPress plugin.
For those of you migrating from the old plugin, you will need to migrate your embed codes before you switch to the new plugin. You have two options (note: I highly recommend that you do this in a staging environment, whichever option you choose):
- Manually replace all CTA or Form shortcodes on each and every post/page with the raw code (not my favorite idea at all) OR
- Migrate your Form and CTA embed codes into a new shortcode system (great idea that makes the switch super easy!)
For those that wish to do a manual migration, you can follow this HS Academy article. If you do this, please note that you will need to paste your embed code into the text view of your post/page, and never ever use the visual editor on that post/page again. Otherwise, the WordPress WYSIWYG visual editor WILL mangle your code.
Or, you can set up a new shortcode system for your embed codes, read on–it’s really easy!
First grab two plugins from the WordPress repository:
- Advanced Ads – Just like I outlined above, this will give us a new home for the embed codes, and generate shortcodes for them
- Better Search Replace – we’ll use this to find the old HubSpot shortcodes and replace them with the new
Next, migrate your embed codes into “ads”. This part is really just a bunch of copy/paste from the HS locations to the new “ads”. Here’s a quick how to:
Migrate your form and CTA embed codes:
- With the old HS plugin still active, go to HubSpot > Shortcodes from your WP admin.
- Copy the code for each form from your list of shortcodes (see the above section on correctly setting up your form embed code for tips on making sure the code is clean!)
- Create a new “ad”
- Name the “ad”
- Set the ad type to Plain Text and Code
- Paste in your embed code
Rinse and repeat for each Form and CTA that you had set up in the old HS plugin.
Find the old shortcodes and replace with the new:
- Head to Tools > Better Search and Replace
- Search for an old HS embed code, such as [hs_form id=”0″]
- Replace it with the new content block shortcode, such as [ the_ad id = ” XXXXX ” ]
All form shortcodes are going to be listed next to the shortcode field in the old HS plugin shortcodes section. (Admin > HubSpot > Shortcodes)
All CTA shortcodes will be [hs_action id=”XXXX”] where “XXXX” is the ID of the CTA found under Admin > Calls to Action.
Shortcodes for the new “ads” are listed on the edit ad page for each ad.
Check your work:
Deactivate the old HubSpot for WordPress plugin, then view the front end of your site and verify that all of your Forms and CTAs are in place. If anything looks out of sorts, I recommend that you manually update those individual pages–I didn’t have any issues, but anything can (and mostly does) happen. That’s why we have staging environments, right?
Any questions? Throw them in the comments below!
Kandra Churchwell is a Brand Consultant and Designer for Phases Design Studio, and is both HubSpot Design and Inbound Certified. She spends her days working with clients to develop effective brands, and designing WordPress sites with HubSpot integration, all while doing her best to avoid drinking too much coffee.