How to add a HubSpot form to WordPress in 7 simple steps

HubSpot forms are surprisingly easy to add to WordPress and can be created, integrated and published in just seven steps. Here’s how.

How to add a HubSpot form to WordPress in 7 simple steps
Written by Bethany Spence
HubSpot, Marketplace  |   3 minute read

Forms gather user information, helping to drive engagement and increase that all-important conversion rate. They’re a feature that now appears on most website posts and pages, so the process of adding them to websites needs to be quick and easy.  

Thankfully, HubSpot’s all-in-one marketing plugin allows form integration and embedding into WordPress to be surprisingly simple. It allows you to make the most of your HubSpot database with beautifully designed forms embedded into your WordPress website in just 7 steps

  1. Install plugin
  2. Add and activate plugin
  3. Create a form in HubSpot
  4. Change form fields
  5. Customise HubSpot form 
  6. Preview form
  7. Embed and publish form 


Step 1 Install plugin (in WordPress)

Install the HubSpot All-In-One Marketing - Forms, Popups, Live Chat WordPress Plugin. Make sure your account meets the eligibility criteria, either using a WordPress.org install or being on the Wordpress.com business plan.

Users must also be a WordPress admin to complete this action. 

 

Step 2 Add and activate plugin (in WordPress)

Add the plugin to your WordPress account, either by downloading the plugin as a .zip file or by manually adding it to your account.

To manually add the HubSpot plugin to your WordPress account navigate to the Plugins > Add New section of your WordPress Dashboard before finding the relevant plugin and choosing to Install Now.

You can then Activate Plugin and log in to your HubSpot account to sync the two. 

 

Step 3 Create a form in HubSpot

In your HubSpot Dashboard, you will now be able to create mobile responsive and popup forms using the WordPress plugin.

To create a form, navigate to Marketing > Lead Capture > Forms within Hubspot and select the option Create Form. From here, you can choose which type of form to create, either from a blank form or a pre-made template.

Pre-made templates speed up the form creation process. 

 

Step 4 Change form fields (in HubSpot)

HubSpot makes it easy to customise your form, changing its form fields to include a label, help text, placeholder text, default value, progressive field options and select whether fields are required and if they should be hidden.

To edit form fields, select field in the form preview on the right. You can also add rich text to the form and create automatic email tickets each time you receive a submission. 

 

Step 5 Customise HubSpot form (in HubSpot) 

Navigate to the Options tab to customise form settings.

Here, you can manage trigger actions such as follow-up emails, notifications, error messages, pre-populated fields and more.

These advanced features are all optional and take more time to set up. However, they make your form more functional and unique. 

 

Step 6 Preview form (in HubSpot)

Click the Style & Preview tab to see an example of your form. If you want to make any final changes to the colour palette, button styles, sizing and branding, you can do so here.

You can also test how progressive fields and dependent fields perform prior to publishing. 

 

Step 7 Embed and publish form (in WordPress)

Enabled by the plugin, HubSpot forms can be embedded into WordPress websites using either the Classic Editor or Gutenberg Editor. 

Using the Classic Editor, navigate to HubSpot > Forms in your WordPress account and select Copy shortcode on the form you wish to embed. You can then paste the shortcode into your chosen WordPress page. Publishing the page will ensure your HubSpot form is automatically live. 

Using the Gutenberg Editor, head to the page or post you wish to embed your form in first. Open the toolbar and select the HubSpot Form module. Position this within your content and select HubSpot > Forms to select the correct form.

As with the Classic Editor, publishing this page will mean that the HubSpot form is automatically live and able to receive submissions. 

That’s it. There’s nothing complicated about embedding HubSpot forms into WordPress, no matter which method you choose. Plus, there’s an even more engaging (and just as easy way) to use HubSpot forms that we’re about to share with you. 

 

Create even more engaging, multi-step forms

The only thing better than embedding a standard HubSpot form is including a multi-step form on your website. 

A multi-step form is a longer form broken into several sections so that its content is easier for a visitor to digest and interact with.

These forms are great for many use cases from event registration to detailing shipping information where more information is required from a user. 

As multi-step forms are less intimidating and more logical, they have many benefits for the user and your business. 

The figure varies from source to source, but all experts agree that multi-step forms drive higher conversion rates. According to HubSpot, multi-step forms convert 68% higher and lead to 17% higher satisfaction rates, while trueNorth believes multi-step forms can be responsible for getting up to 300% more conversions

Want to up your conversion rate without complicating the embed process? 

See how far your conversion rate climbs by downloading the WordPress Plugin - Multi Step HubSpot Form. 

Access the HubSpot Form WordPress Plugin