Embed HubSpot Form in Gutenberg

Step-by-step guide to embed HubSpot form in Gutenberg using the Custom iFrame WordPress plugin. Capture leads on your site. No coding required.

Overview

Custom iFrame lets you embed HubSpot form in Gutenberg by pasting any HubSpot form share URL into the block. Capture leads, grow your email list, and collect feedback directly on your WordPress page without any coding.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the Embed HubSpot Form in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A HubSpot account with a published form

Step 1: Get Your HubSpot Form Link

Open your HubSpot form builder

Copy the form share URL

Hover over the form you want to embed. Click Actions, then click Share. Copy the form URL from the popup.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in the block editor

Go to the page or post where you want the form. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed HubSpot Form in Gutenberg

Paste the HubSpot form URL

Select the Custom iFrame block. In the right panel, paste the HubSpot form URL into the Source URL field. The form appears inside the block in the editor.

Set the height

Set Height to match the form length. A standard contact form works well at 500px to 700px.

Click Update or Publish. Your HubSpot form is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to embed HubSpot form in Gutenberg using the Custom iFrame plugin. From copying the form share URL to pasting it and publishing, the whole setup runs through the block editor without any code.

FAQ

No. HubSpot's free plan supports form embedding. Copy the share URL from your form builder and paste it into the Source URL field.

Confirm the form is published in HubSpot. Draft forms do not load. Also confirm you copied the share URL, not the editor URL. See iFrame Not Showing for more help.

Yes. The form runs inside an iFrame and submits directly to HubSpot. All responses appear in your HubSpot dashboard exactly as they would from a native embed.

Set height to 500px to 700px for a standard contact form. Longer forms with more fields need more height. Enable Auto Height to let the block resize as the form content changes.

Also Available For

Embed HubSpot Form in Elementor

Guide for the Elementor widget.

Embed Typeform in Gutenberg

Embed Typeform surveys and quizzes in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI