> 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 Elementor

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


## Overview

Custom iFrame lets you embed HubSpot form in Elementor by pasting any HubSpot form share URL into the widget. 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.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- 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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the form. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed HubSpot Form in Elementor

<Steps>
  <Step title="Paste the HubSpot form URL" icon="clipboard" title-type="p">
    In the Content tab, paste the HubSpot form URL into the **Source URL** field. The form appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954543/elementor/forms/hubspot/paste-hubspot-form-url.webp"
      alt="Custom iFrame widget in Elementor editor showing HubSpot form URL in Source URL field with live HubSpot contact form preview"
      width="1024"
      height="487" priority={true} fetchPriority="high" />
  </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>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed HubSpot form in Elementor using the Custom iFrame plugin. From copying the form share URL to pasting it and publishing, the whole setup runs through the Elementor 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 iFrame resize as the form content changes.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Typeform in Elementor" href="/elementor/forms/embed-typeform" icon="layout" horizontal={false}>
    Embed Typeform surveys and quizzes in Elementor.
  </Card>
  <Card title="Embed JotForm in Elementor" href="/elementor/forms/embed-jotform" icon="layout" horizontal={false}>
    Embed JotForm forms in Elementor.
  </Card>
</Columns>

## Related Guides

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