Embed HubSpot Forms in WordPress: A Step-by-Step Guide

How to Add HubSpot Form to WordPress

Integrating HubSpot forms into your WordPress site enhances lead capture and customer interaction by leveraging HubSpot's comprehensive CRM and marketing tools. This guide provides a detailed walkthrough on embedding HubSpot forms in WordPress, utilizing the HubSpot WordPress plugin, and ensuring seamless form integration for optimal performance and user experience.

Automate your HubSpot workflows to enhance productivity. Download the Bardeen app and explore how.

Embed HubSpot Form in WordPress

To embed a HubSpot form in WordPress, you can use either the Classic Editor or the Gutenberg Editor. Before starting, ensure you have the HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics plugin installed and activated on your WordPress site.

Using Classic Editor

1. From your WordPress account, navigate to HubSpot > Forms.
2. 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.
3. Navigate to a WordPress page or post, then paste the shortcode into the page editor.
4. After publishing your page, to view submissions to the form in WordPress, navigate to HubSpot > Forms in the left sidebar menu. Hover over a form, click the Actions dropdown menu, and select View submissions.

Using Gutenberg Editor

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

1. In your WordPress account, navigate to your page or post.
2. Click the plus icon in the toolbar. Search for the HubSpot Form block and click it to add it to your content.
3. 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.
4. After publishing your page, to view submissions to the form in WordPress, navigate to HubSpot > Forms in the left sidebar menu. Hover over a form, click the Actions dropdown menu, and select View submissions.

HubSpot WordPress Form Plugin

The HubSpot WordPress plugin, officially known as HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics, is essential for integrating HubSpot forms into WordPress. This plugin not only facilitates form embedding but also provides access to HubSpot's CRM, email marketing, live chat, and analytics directly from your WordPress dashboard.

Installation and Activation

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins > Add New.
3. Search for the HubSpot All-In-One Marketing – Forms, Popups, Live Chat plugin.
4. Click Install Now and then Activate Plugin.
5. In the left sidebar menu, navigate to HubSpot and log in to your account to finish the installation process.

If you prefer to install the plugin from a zip file, download the plugin from the WordPress plugin repository and upload it in your WordPress account.

HubSpot Form Integration WordPress

For a successful integration, ensure your WordPress theme includes the wp_footer function in its footer file (footer.php), as this is required for the HubSpot tracking code to function correctly. If you encounter any issues with form functionality or the embed code being altered, consider using a plugin like Insert HTML Snippet to ensure the embed code remains intact.

If you're using another form plugin like Contact Form 7 or Ninja Forms but wish to collect submissions in HubSpot, review the table of supported forms and learn how to use non-HubSpot forms on the HubSpot knowledge base. Should you face any conflicts with another WordPress plugin, disable the conflicting plugin or consult the HubSpot forms FAQ for troubleshooting steps.

Remember, changes made to the form in HubSpot's forms tool will automatically reflect on the live form on your WordPress site. For optimal form performance, you may need to apply additional CSS declarations within your external stylesheet to ensure the form is responsive.

Enhance multi-channel outreach by integrating HubSpot with LinkedIn. Explore more integrations like HubSpot with Salesforce and sync HubSpot and Slack for instant alerts at Bardeen.

While adding a HubSpot form to WordPress involves manual steps to embed the form and ensure it functions correctly on your site, automating your HubSpot workflows can significantly enhance productivity and data management. Automations can streamline processes such as ticket creation, contact management, and syncing data across platforms, reducing manual entry and improving efficiency.

With Bardeen, you can automate various HubSpot tasks, including:

1. Create HubSpot ticket: Automatically generate a new support ticket in HubSpot, ensuring timely follow-up on customer issues.
2. Automatically Create HubSpot Contact from Gmail Email: Capture new leads by creating HubSpot contacts from incoming Gmail emails without manual data entry.
3. Add a new row to Airtable, when a HubSpot product is created: Sync new HubSpot product creations with Airtable for enhanced product tracking and management.

Embrace the power of automation to optimize your HubSpot workflows and enhance your WordPress site's functionality. Get started by downloading the Bardeen app.