Add HubSpot forms to WordPress pages and posts

Once you've successfully installed the HubSpot All-In-One Marketing – Forms, Popups, Live Chat WordPress plugin, you can add HubSpot forms to your WordPress pages and posts.

In WordPress, you can add your HubSpot forms through either the Classic editor or the Gutenberg Editor.

Before you get started

Before you get started, please note the following: 

• If you are embedding a form on your WordPress site, you may need to apply additional CSS declarations within your external stylesheet to make the form responsive.
• If you notice your form not working in WordPress or the embed code being altered when you view the live page, you may need to insert the form using a plugin to make sure the embed code stays intact.
• If you're using another form plugin, like Contact Form 7 or Ninja Forms, you can collect submissions in HubSpot. Review the table of supported forms, then learn how to use non-HubSpot forms.  
• If you are using a supported, non-HubSpot form on WordPress, but are not seeing submission data in HubSpot, you may have another WordPress plugin installed that conflicts with the HubSpot-WordPress plugin. Disable the plugin, or review frequently asked questions for additional troubleshooting steps.  

 Classic Editor

To embed a form to your WordPress pages and posts using the classic editor: 

• From your WordPress account, in the left sidebar menu, navigate to HubSpot > Forms. 
• Hover over the form you want to add to your website and click Copy shortcode. You can also create a new HubSpot form by clicking Create form.
• Navigate to a WordPress page or post, then paste the shortcode into the page editor.
   
• After publishing your page, to view submissions to the form in WordPress:
  • From your WordPress account, in the left sidebar menu, navigate to HubSpot > Forms.
  • Hover over a form. Then, click the Actions dropdown menu and select View submissions. Learn more about analyzing your form submissions. 

Gutenberg Editor

If you're using the latest version of Gutenberg, which removes inline JavaScript, use the Inline JS Block for Gutenberg plugin to embed forms and CTAs onto your page instead.

To embed a form to your WordPress pages and posts using the Gutenberg editor: 

• In your WordPress account, navigate to your page or post. 
• Click the plus icon in the toolbar. Search for the HubSpot Form block and click it to add it to your content. 
  
  

• In the block, you can select an existing form or create a new form:
  • To select an existing form, click the select an existing form dropdown menu and select a form.
  • To create a new form, navigate to HubSpot > Forms in the left sidebar menu and click Create form. 
    
    

• After publishing your page, to view submissions to the form in WordPress:
  • From your WordPress account, in the left sidebar menu, navigate to HubSpot > Forms.
  • Hover over a form. Then, click the Actions dropdown menu and select View submissions. Learn more about analyzing your form submissions.