Integrating HubSpot forms into your WordPress site can be challenging. You might find that your form doesn’t appear where you intended, or you may struggle with confusing plugin settings.
If you’re concerned about losing potential leads due to these issues, we’re here to assist you.
Over the years, we’ve discovered straightforward and dependable methods to integrate HubSpot forms with WordPress. The best part? You won’t need to write any code or deal with complicated setup processes.
In this guide, we will demonstrate two simple methods to implement HubSpot forms on your website. This allows you to collect leads directly into your CRM and return your focus to growing your business. 💼
Why Choose HubSpot for Form Creation?
HubSpot simplifies the process of creating and managing forms that gather leads and automatically send them to your HubSpot CRM. When a visitor submits your form, their information is instantly added to your HubSpot database, enabling you to follow up with tailored communications.
Additionally, the HubSpot Form Builder is user-friendly, making it accessible even for those without technical skills. Similar to most form builders, it allows you to easily create custom forms by dragging and dropping fields.
Furthermore, HubSpot is widely recognized and trusted software.
You can easily connect HubSpot to a variety of small business tools, including email marketing platforms, marketing automation software, and other systems.
Additionally, HubSpot integrates seamlessly with popular contact form plugins such as WPForms, Formidable Forms, and others.
In this guide, we will explore two methods for integration. Here’s what you need to know:
- Method 1 (HubSpot):Ideal for those seeking a simple and direct connection to HubSpot without needing extensive custom form features.
- Method 2 (WPForms with the HubSpot addon):Perfect for users who desire versatile and customizable forms for various sections of their website, offering enhanced design and advanced functionalities.
Now, let’s dive into how to create a HubSpot form in WordPress:
- Method 1: Creating a HubSpot Form Using the HubSpot Plugin (Straightforward Approach)
- Method 2: Creating a HubSpot Form Using WPForms (Recommended Approach)
- Bonus Tip: Configure HubSpot Analytics to Monitor Your HubSpot Forms
- Additional Resources for Using Forms in WordPress
Method 1: Creating a HubSpot Form Using the HubSpot Plugin
You can easily set up a HubSpot form on your WordPress site by utilizing the HubSpot plugin.
Begin by installing and activating the HubSpot plugin. From your WordPress dashboard, navigate to Plugins »Add New Plugin.
On the following screen, use the search bar to easily locate the HubSpot plugin.
Next, click ‘Install Now’ and then the ‘Activate’ button once it appears. For further instructions, refer to our guide on installing a WordPress plugin.
After activation, the plugin will introduce a new menu item in the WordPress admin sidebar. Click on HubSpot to access the setup wizard, where you can create a HubSpot account if you don’t already have one.
If you already have an account, click on the ‘Sign in here’ link at the top.
This will bring up a ‘HubSpot Login’ popup.
Enter your username and password, then click the ‘Login’ button.
Once logged in, HubSpot will prompt you to continue with the account you just signed in with.
Click the ‘Continue With This Account’ button.
You will then be prompted to connect your HubSpot account with your WordPress website.
Simply click on the ‘Connect Website’ button.
After successfully linking your WordPress site with your HubSpot account, proceed to HubSpot FormsAccess this feature from your WordPress admin dashboard.
Navigate to the ‘Forms’ page and click the ‘Create a Free Form’ button located in the top right corner to begin.
Next, select the type of form you want to create and click the ‘Next’ button at the top.
In this tutorial, we will create an ‘Embedded form.’
You will then be directed to the HubSpot template library.
Choose your desired template, such as ‘Registration’ or ‘Contact Us,’ and click the ‘Start’ button at the top.
In the Form Editor, customize your pre-made form template by dragging and dropping fields from the left side into the preview area on the right.
Once you finish customizing, click the ‘Submit’ button at the top.
This action will open a ‘Review and Publish’ popup.
Scroll down and click the ‘Publish’ button.
A popup will appear on your screen. Since this is an embedded form, a shortcode will be provided.
Click the ‘Copy’ button next to the shortcode to copy it.
You can embed this code on any page where you want to display your HubSpot form. For further details, refer to our guide on adding shortcodes in WordPress.
Step 2: Setting Up a HubSpot Form with WPForms
You can create a HubSpot form using WPForms, which includes a HubSpot integration add-on. WPForms is the leading drag-and-drop contact form builder for WordPress, boasting over 6 million active installations.
We use WPForms for our contact form, site migration request form, and annual reader surveys at CanadaCreate, which is why we highly endorse it.
For more information about the plugin, please read our comprehensive WPForms review.
Important Note:You will need at least an Elite plan to access the HubSpot add-on.
First, you need to create your WPForms account.
On the WPForms website, click the ‘Get WPForms Now’ button, select a plan, and complete the registration process.
After registering, you will have access to your own WPForms dashboard, where you can download your WPForms zip file and license key.
Next, return to your WordPress admin area to install and activate the WPForms plugin.
Then, use the search feature to quickly locate the WPForms plugin.
In the search results, click the ‘Install Now’ button and then ‘Activate’ to finish the installation. If you need assistance, check out our detailed guide on how to install a WordPress plugin.
After activation, you will need to enter your license key to unlock the premium features.
Navigate to WPForms » Settings, input your key, and click the ‘Verify Key’ button.
Next, go to WPForms » Addons to activate the HubSpot addon.
Find the HubSpot addon and click the ‘Upgrade Now’ button (an Elite plan is required to access this feature).
This will redirect you to your ‘WPForms Account’ page.
Scroll down to the ‘HubSpot Addon’ section and click the download button.
After that, install and activate the HubSpot addon just like you did with the plugin.
Next, go to WPForms » Settings in the WordPress dashboard.
Then, click on the ‘Integrations’ tab.
You will see HubSpot listed among the integrations. Click the arrow icon to expand the section, and then click the ‘Add New Account’ button.
A prompt will appear, asking you to connect to your HubSpot account. Enter your HubSpot account login details.
If you don’t have an account yet, you can create one here.
Next, you will be prompted to confirm if you want to proceed with this account.
Click the ‘Continue With This Account’ button to proceed.
A popup will appear prompting you to connect WPForms with HubSpot.
At the bottom of the page, click the ‘Connect App’ button.
Return to the ‘Integrations’ screen on your WordPress dashboard.
You should now see ‘Connected’ next to the HubSpot section.
It’s time to create your HubSpot form.
To begin, navigate to WPForms » Add New in the WordPress admin area.
On the ‘Setup’ screen, you can name your new form.
Once named, choose your form-building method. WPForms lets you start from scratch, utilize an AI-powered form builder, or select a template from the WPForms library.
If you opt for the WPForms AI, simply enter a prompt, and the AI form builder will quickly generate your form.
For this tutorial, we will use a pre-designed template.
Hover over the template you wish to use and click the ‘Use Template’ button.
You will then be directed to the WPForms interface, where you can customize the form template. For a comprehensive guide, refer to our tutorial on creating a contact form.
Begin by selecting the ‘Marketing’ option from the menu on the left side. Then, choose ‘HubSpot’ from the available integrations.
A HubSpot popup will appear on your screen. Click the ‘Add New Connection’ button located at the top.
WPForms will prompt you to enter a nickname for your connection.
You can choose any name you prefer, as this will only be visible to you. Click the ‘OK’ button when you’re finished.
WPForms will then ask you to select your HubSpot account and choose an action to take. Select your account from the ‘Select Account’ dropdown.
Next, select the ‘Create/Update Contact’ option from the ‘Action to Perform’ dropdown.
Once you select this option, additional settings will appear in the form.
Complete those fields as needed. Since we want to send contacts from your lead generation form to HubSpot, select the ‘Create/Update Contact’ option.
All fields, including the prospects’ names, emails, and lead status, will be updated in the HubSpot database.
Now, you can customize your form using the form builder.
Simply drag and drop fields from the left side into the live preview on the right.
Collect and organize any information you need in your HubSpot account.
When you’re ready, click the ‘Embed’ button at the top of the form builder to add the form to your WordPress site.
This will bring up the ‘Embed in a Page’ prompt.
To embed your HubSpot form on a new page, select the ‘Create New Page’ option.
If you prefer to embed the form on an existing page, choose the ‘Select Existing Page’ option.
Then, simply select the appropriate page from the dropdown menu that appears.
Next, click the ‘Let’s Go’ button.
You will be taken directly to the page you selected from the dropdown menu, where the HubSpot form will already be embedded.
To make your new form live, just click the ‘Publish’ button at the top of the content editor.
For more information, refer to our guide on embedding forms in WordPress.
Bonus Tip: Configure HubSpot Analytics to Monitor Your HubSpot Forms
Creating a form is just the beginning — to enhance your WordPress blog or website, it’s crucial to understand how your forms are performing.
With HubSpot’s integrated analytics, you can track form submissions, allowing you to identify which forms are effective and which may need adjustments.
Monitoring the performance of your forms helps identify where users drop off, allowing you to minimize form abandonment.
For more information, refer to our comprehensive guide on setting up HubSpot Analytics in WordPress.
Additional Resources for Using Forms in WordPress
That’s all! We hope you found our guide on creating a HubSpot form in WordPress helpful. You might also be interested in our resources on:
- Creating Conversational Forms in WordPress
- Strategies for Designing More Engaging Forms in WordPress
- Best Practices for Designing Contact Form Pages (With Real Examples)
- Complete Guide to Utilizing WordPress Forms (Everything You Need to Know)
- Top Online Form Builders Recommended by Experts
If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
