How to add a HubSpot form to your WordPress site

Author - Vic Lobins

Posted By Vic Lobins Lead Back End Developer

Date posted 19th Apr 2024

Category Marketing, News, WordPress

Array

Having a third party form on your website, whether HubSpot or another provider, can serve multiple purposes and have a positive contribution towards the success of your B2B marketing strategy.

A third party form can be used so that your clients and prospective clients can easily get in touch with you, reach out to you if they have a question, or they can be used to collect important information (with permission!) about your customers that will enable you to provide a more valuable service, and help perspective clients better.

Marketing automation systems, customer relationship management (CRM) systems, lead tracking services all use generated forms to collect key data from your customers that should enable you to deliver a smoother UX, and a better buying experience. These systems generate third party forms that will need to be added to your WordPress site and configured so that you are able to store and file key information received. 

The proper use of forms that are well integrated into your WordPress site will have a positive impact on lead generation and conversion rates.

So, if you’re looking at integrating a HubSpot form with your WordPress site, here are the key steps to follow: 

Get the embed code or iframe

Each service provider will have a different system for creating forms and getting the embed code but generally speaking the process should be similar and you can always contact the provider directly to get instructions on how to create a form and get the related embed code or iframe.

Here is an example of how to get the embed code from a HubSpot form:

1. In your HubSpot account Go to Marketing -> Lead Capture -> Forms

2. Hover over the form you’d like to embed and click on the (Actions) dropdown menu and click on (Edit form)

3. Go to the (Options) tab to select the behaviour of the form after a visitor submits an entry

You can choose to either display a thank you message or redirect to a thank you page after the submission

4. Click on (Share) in the form editor

5. Click on (Embed Code) 

6. Select a Salesforce campaign (Optional)

7. Click on Copy

You can use that code to embed the form on your WordPress site, see the next section for instructions.

The code you copy can be either an iframe or a script depending on the platform providing these forms.

Alternatively HubSpot offers a WordPress plugin to create forms and enable embeds using shortcodes. You can find more information about the plugin in HubSpot’s Knowledge Base here. But it is always recommended to keep the plugin count as low as possible on your WordPress website to improve performance and security.

How to add to WordPress

The method may be different depending on the theme you are using on your WordPress website but in this example we will be using the Twenty Twenty-One default theme.

1. Edit/Create the page/post where you’d like to embed the external form

2. Click on the (Add block) icon (the “plus” sign)

3. Search for and add the (Custom HTML) block

4. Paste the embed code/iframe into the input field

5. Publish the page/post

And there that’s you done! Here’s the finished result:

If the theme you are using doesn’t include an HTML block, contact the theme owner or developer as other similar options may be available.

You can also use a Code snippet plugin to add the embed codes, such as this one: Code Snippets. This should only be used by advanced users as this can impact the website’s performance and even break the website if not used properly.

Remember to think about GDPR and data protection when configuring your form as it’s important to make sure your notice and consent information is clearly displayed. This is something HubSpot can help with too.

In conclusion

Forms are an important part of so many different WordPress sites and there is a wide variety of different third party form providers and each one has their unique specialties and will serve a different purpose – HubSpot for lead generation, Mailchimp for surveys, etc… 

If you have any questions, please get in touch! (Yes, you guessed it, there is a HubSpot form on the other end – but it’s short, we promise!)

Let's Talk

Do you have a web design and build project coming up that you would like to talk about?