HubSpot Forms for WordPress Plugin

Why would you want a WordPress Plugin for HubSpot Forms?

HubSpot is amazing, WordPress is wonderful, adding HubSpot forms in WordPress not so fun.

When you copy and paste your Form’s Embed Code into your page or post you can’t see it in the editor which makes it easy to break or accidentally overwrite the form completely.

The HubSpot Forms for WordPress Plugin makes it easy for you to add – and see – your HubSpot forms in WordPress.

Before

<!--[if lte IE 8]>
    <script charset="utf-8" type="text/javascript"
    src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript"
    src="//js.hsforms.net/forms/v2.js">
</script>
<script>
  hbspt.forms.create({
	portalId: "your-portal-id",

	formId: "your-form-id"
    });
</script>

After

[hubspot form="your-form-id"]

To add a HubSpot form into WordPress you can use a WordPress Shortcode to add the form into your page or post.

The Shortcode generates the HubSpot embed code, in the the page or post, so you don’t need to edit the HTML. And, if someone else has added the form to your post or page it helps you see the form so you don't accidentally overwrite the form.

What does hsforms mean?

The term "hsforms" is simply shorthand for HubSpot Forms. The Javascript that loads the forms is hosted on js.hsforms.net.

How to add HubSpot forms to your Post or Page

How to add a form to your WordPress post or page

Get the HubSpot form ID from your HubSpot form (see screenshot)
Add a short code to your page or post
Test your page or post to make sure everything is working.

Simple use

The basic use of the short code is easy – all you have to do is enter your Form Id that you can find in your HubSpot Portal. This is the code we'd use for the form below.

[hubspot form="ed6fdaf8-9fa5-42b0-a4c0-b20e7bcb8cbc"]

Do NOT Defer JavaScript

Sometimes your cache, or other JavaScript can mess with your HubSpot Form.

By default we defer the loading of the JavaScript because the page loads faster for your visitor. If you're having issues with JavaScript you can make the JavaScript load where your form is be setting defer to false.

[hubspot form="ed6fdaf8-9fa5-42b0-a4c0-b20e7bcb8cbc" defer="false"]

Do NOT load HubSpot CSS

HubSpot comes with a default set of CSS for your forms that handle the form fields, labels and error messages. If you want to use your own style you can set CSS to false. Remember, if your going to style your own forms there's lots of different styles to think of e.g. error messages, multicheckbox, etc.

[hubspot form="ed6fdaf8-9fa5-42b0-a4c0-b20e7bcb8cbc" css="false"]

Tips

Always, always, always test your form – fill it in with an email address an make sure all the information goes into HubSpot
If you are using the HubSpot Form Styles (CSS) make sure they don’t clash with your website’s styles (CSS).
If you use your own CSS styles make sure you specify the Error Messages and other styles.

Installation is easy

Install the HubSpot Tracking Code for WordPress Plugin (adds the HubSpot tracking code to your website)
Activate the HubSpot Tracking Code for WordPress Plugin
Add your HubSpot ID to the HubSpot Tracking Code for WordPress Plugin (this connects your WordPress site to your HubSpot Portal).
Install the HubSpot Forms for WordPress Plugin
Activate the HubSpot Forms for WordPress Plugin
Use short codes to add forms to your page or post (see instructions above)

Requirements

An active HubSpot marketing account (Basic, Pro or Enterprise)
A WordPress website that is NOT hosted on WordPress.com (if your website is hosted on your own server or with a host you can install the plugin. If you use WordPress.com to host your site they won't let you install the plugin).
Administrator access to WordPress (you must be able to install plugins on your site).

Need HubSpot help?

We geek out on helping growing businesses grow with HubSpot and WordPress. Please contact us if you have any other HubSpot questions.

FAQ

What happens if I make a mistake?

if you make an error with your HubSpot ID, or your HubSpot form ID then your form won't show up and you won't see any error messages unless you are logged into WordPress.
If you make a mistake with your Shortcode then you'll see the shortcode on the page… so you'll know if it’s broken when you preview the page.

What happens if my HubSpot account expires?

if your HubSpot Account expires your page, or post, won't show the HubSpot form.

What’s a shortcode?

WordPress has a clever system to add a short piece of code, to a page or post, that can perform different actions when the code is executed. This means we can do some geeky stuff in the background so you don't have to. You can learn more about WordPress Shortcode on the WordPress Codex.

How does it work?

we do the geeky code embed for you so you don't have to. The page renders the HubSpot embed code instead of the WordPress Shortcode.

How many forms can I use?

you aren't limited by the number of forms. We like to use different forms for different Call To Actions so it’s easy to track and measure.

Does the form use a thank you message or a redirect?

That will depend on how you set up your form in HubSpot. The form will either redirect to a Thank You Page (recommended) or display a Thank You Message depending on how you set up your form.

I can't see the form - what’s happening?

see the Troubleshooting document below

I tried everything and it’s still not working

please use the contact form to contact us

Why did you make this plugin and offer it free?

we have clients that find the plugin helpful and we thought you would too. If you’d like to give back then please leave use a rating and a review.

Who are you?

I’m Mike Eastwood a Marketing Geek based in New Zealand. We geek out on helping growing businesses grow sustainably with online marketing and websites. You can learn more about us.

Trouble shooting

I can’t see the form on my page:

Check you have the HubSpot plugins installed
Check you have the HubSpot pluginactivated
Check your HubSpot ID
Check you have the HubSpot form to wordpress plugin installed
Check you have the HubSpot form to wordpress plugin activated
Check your form ID in your Shortcode is the same as HubSpot. It should look something like ed6fdaf8-9fa5-42b0-a4c0-b20e7bcb8cbc
Check the page to see if there is an error message (the plugin will add an error message as an HTML comment in the page)

I can see part - or all - of the Shortcode on the page:

Check you’ve added your Shortcode using the visual editor not the code editor
Check your Shortcode starts with an opening square bracket
Check “hubspot” is all lower case
Check there’s no space between the opening square bracket and the word “hubspot”
Check there’s a space between the word “hubspot” and “form”
Check there’s no space between “form” and the equals sign ( = )
Check there’s no space between the equals sign and the double quote ( " )
Check there’s a closing quote ( " ) after the hubspot ID
Check there’s a closing square bracket ( ] ) after the hubspot ID
Check there’s a space after the Shortcode (we recommend your Shortcode is on it’s own line)
Check your quote marks aren't typographers quote marks ( “ or ” )

Disclaimer

We've made this plugin to help our clients use HubSpot and WordPress. We've taken care to make an easy to use plugin. You should also note:

Hubspot is a registered trademark of HubSpot Inc.
HubSpot has not endorsed this plugin.
HubSpot is not affiliated with this plugin.
WordPress is a registered trademark of WordPress.org
WordPress has not endorsed this plugin.
WordPress is not affiliated with this plugin.
Webalite is a Certified HubSpot Agency Partner.
Webalite accepts no liability.

Webalite

HubSpot Forms for WordPress Plugin – the easy way to embed your forms