Blog Post
How to Embed HubSpot Form in WordPress – Beginners Guide
If you’re looking to grow your leads and improve your marketing, embedding a HubSpot form into your WordPress website is an easy solution.
HubSpot forms allow you to capture valuable customer information and integrate it with your CRM, making it easier to nurture leads and convert visitors into customers.
In this guide, we’ll walk you through how to embed HubSpot form in WordPress and cover everything you need to know—from adding the form to troubleshooting common issues like the HubSpot embed form not showing.
This guide is packed with tips and best practices to ensure you get it right.
Why Use HubSpot Forms in WordPress?
Before diving into the “how-to” part, let’s quickly cover why embedding HubSpot forms into WordPress is a smart choice:
CRM Integration
Every lead captured by your form is automatically funneled into HubSpot CRM, where you can track interactions, segment contacts, and nurture leads..
Customization
HubSpot forms are highly customizable, allowing you to design them to match your brand, collect specific information, and even trigger workflows.
Ease of Use
Whether you use the HubSpot plugin or manually embed the form, the process is user-friendly..
How to Embed a HubSpot Form in WordPress – Step#1
If you haven’t already created your form in HubSpot, that’s the first step. Follow these simple steps to get started:
Log in to HubSpot
Log in to your HubSpot account and navigate to Marketing > Lead Capture > Forms.
Click Create Form
On the Forms page, click the orange Create Form button in the upper right-hand corner.
Select a Form Type
HubSpot gives you different form types to choose from: standalone forms, pop-up forms, and slide-in forms.
Select the type that best suits your needs.
Customize Your Form
Customize the fields, design, and form actions to your preference.
You can drag and drop form fields to collect the information that matters most to your business, such as email addresses, phone numbers, or custom queries.
Save the Form
Once your form is customized, click Publish to save it.
You now have your HubSpot form ready for embedding into WordPress. But how do you do that? Let’s find out!
How to Add HubSpot Form to WordPress – Step#2
There are two main ways to embed a HubSpot form in WordPress—you can either use HubSpot’s WordPress plugin or embed the form without plugin using HubSpot’s embed code.
Hubspot Form WordPress Plugin
If you’re looking for the easiest way to embed a form, using the HubSpot WordPress plugin is the way to go. Follow these steps:
Install the HubSpot Plugin
From your WordPress dashboard, go to Plugins > Add New and search for “HubSpot.”
Install and activate the HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics plugin.
Connect HubSpot to WordPress
Once the plugin is activated, connect it to your HubSpot account by clicking the HubSpot link in your WordPress dashboard and following the prompts.
Add Your HubSpot Form
After connecting, go to your page or post where you want the form to appear. In the WordPress editor, click on the HubSpot icon in the toolbar.
Select Forms and choose the form you created in HubSpot. The form will automatically be added to your content, and you’re good to go!
Embedding HubSpot Form with Embed Code
If you’d prefer to embed the form manually, you can use the HubSpot form embed code example. Here’s how:
Get the Embed Code
In HubSpot, navigate to Marketing > Lead Capture > Forms.
Find the form you want to embed, click on it, and select Embed at the top.
Copy the provided embed code.
Paste the Embed Code in WordPress
In WordPress, open the page or post where you want the form to appear.
Switch to the Text Editor (in the block editor, this is the “Custom HTML” block) and paste the HubSpot form embed code.
Publish or update your page, and your form will appear where you placed the code.
How to Add HubSpot Form to WordPress Widgets – Step#3
Do you want your HubSpot form to appear in the sidebar or footer of your site? You can do that by embedding it in a WordPress widget. Here’s how:
Get the Embed Code from HubSpot
Just like before, grab the HubSpot form embed code example from your HubSpot dashboard.
Add the Form to a Widget
In WordPress, go to Appearance > Widgets.
Add a Custom HTML widget to the sidebar or footer and paste your embed code there.
Save the widget, and your form will appear on your chosen area of the site!
Bonus: HubSpot Embed Form in Email – Step#4
Did you know you can also embed HubSpot forms in email campaigns?
While the form itself can’t be embedded directly in an email due to limitations in email clients, you can create a link to the form or use a call-to-action button that directs users to a form hosted on your site.
Here’s how to do it:
Create a CTA in HubSpot
In HubSpot, go to Marketing > Lead Capture > CTAs, and create a new call-to-action button.
Link the CTA to the Form
Link the CTA to the page on your WordPress site where the form is embedded. This allows recipients to easily click through to the form from your email.
Embed the CTA in Your Email
Insert the CTA button into your HubSpot email campaign, and you’re good to go!
HubSpot Embed Form Not Showing
Sometimes, after embedding the form, you may run into issues like the HubSpot embed form not showing on your WordPress site. Don’t worry, this is a common issue that’s usually easy to fix.
Here are some troubleshooting tips:
Check Your JavaScript
HubSpot forms rely on JavaScript to function. If your WordPress theme or another plugin is blocking JavaScript, the form won’t show. Try disabling conflicting plugins and ensure your theme supports JavaScript.
Clear Caches
If you’re using a caching plugin in WordPress, clear the cache and check if the form displays properly afterward.
Double-Check the Embed Code
Make sure you copied the entire embed code from HubSpot and pasted it correctly in the WordPress text editor.
Responsive Issues
If the form is not showing correctly on mobile devices, check your site’s CSS for any conflicts and make sure the form is set to be responsive in HubSpot.
Final Thoughts
Embedding a HubSpot form into your WordPress site is an important step for your lead generation and connecting with your audience.
Whether you’re using the HubSpot plugin or embedding the form without plugin, the process can be custom to suit your business audiences.
How to Embed HubSpot Form in WordPress – FAQs
How do I add HubSpot form to external site other than WordPress?
To add a HubSpot form to an external site other than WordPress, simply generate the form’s embed code from HubSpot by navigating to Marketing > Lead Capture > Forms, then copying the embed code.
Paste this code into the HTML of your external site where you want the form to appear, and it will display on the page.
How do I style a HubSpot form in WordPress for free?
To style a HubSpot form in WordPress for free, use the Additional CSS option in the WordPress Customizer.
First, identify the form’s CSS class or ID by inspecting it in your browser. Then, add your custom styles in Appearance > Customize > Additional CSS to change elements like font size, colors, and margins without needing any paid tools or plugins.
Relevant Guides
Grandstream Wave App HubSpot Integration
HubSpot CRM Implementation Partner
How to Size an Icon in HubSpot Module
