Using the HubSpot Forms embed code can be confusing and it's easy to accidentally break it. So, we built a WordPress Plugin to make it easier for our clients to use HubSpot Forms in WordPress.
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.
The term "hsforms" is simply shorthand for HubSpot Forms. The Javascript that loads the forms is hosted on js.hsforms.net.
How to add a form to your WordPress post or page
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"]
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"]
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"]
We geek out on helping growing businesses grow with HubSpot and WordPress. Please contact us if you have any other HubSpot questions.
What happens if I make a mistake?
What happens if my HubSpot account expires?
What’s a shortcode?
How does it work?
How many forms can I use?
Does the form use a thank you message or a redirect?
I can't see the form - what’s happening?
I tried everything and it’s still not working
Why did you make this plugin and offer it free?
Who are you?
I can’t see the form on my page:
I can see part - or all - of the Shortcode on the page:
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: