> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/elementor/forms/embed-hubspot) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A HubSpot account with a published form

## Step 1: Get Your HubSpot Form Link

<Steps>
  <Step title="Open your HubSpot form builder" icon="layout" title-type="p">
    Log in to HubSpot and go to your form builder.
  </Step>
  <Step title="Copy the form share URL" icon="link" title-type="p">
    Hover over the form you want to embed. Click **Actions**, then click **Share**. Copy the form URL from the popup.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the form. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed HubSpot Form in Gutenberg

<Steps>
  <Step title="Paste the HubSpot form URL" icon="clipboard" title-type="p">
    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.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to match the form length. A standard contact form works well at 500px to 700px.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your HubSpot form is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) 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

<ExpandableGroup>
  <Expandable title="Do I need a paid HubSpot plan to embed a form?" default-open="false">
    No. HubSpot's free plan supports form embedding. Copy the share URL from your form builder and paste it into the Source URL field.
  </Expandable>
  <Expandable title="The HubSpot form shows blank. What should I check?" default-open="false">
    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](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Will form submissions still go to HubSpot?" default-open="false">
    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.
  </Expandable>
  <Expandable title="What height should I set for a HubSpot form?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed HubSpot Form in Elementor" href="/elementor/forms/embed-hubspot" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Typeform in Gutenberg" href="/gutenberg/forms/embed-typeform" icon="help-circle" horizontal={false}>
    Embed Typeform surveys and quizzes in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Forms in Gutenberg - Overview](/gutenberg/embed-forms)
- [Embed Typeform in Gutenberg](/gutenberg/forms/embed-typeform)
- [Embed JotForm in Gutenberg](/gutenberg/forms/embed-jotform)
- [Embed Calendly in Gutenberg](/gutenberg/forms/embed-calendly)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)