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

Guides for embedding Typeform, HubSpot, JotForm, Calendly, and more in Elementor using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed forms and scheduling tools in Elementor from Typeform, HubSpot, JotForm, Calendly, and more. Paste any form URL into the widget. No API keys, no shortcodes, no coding required.

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

Using Gutenberg instead? Follow the [Embed Forms in Gutenberg](/gutenberg/embed-forms) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A shareable URL from your form or scheduling platform

## How to Embed a Form in Elementor

All form platforms follow the same three-step process.

### Step 1: Get the Form Link

<Steps>
  <Step title="Open your form platform" icon="clipboard" title-type="p">
    Go to the platform where your form lives: Typeform, HubSpot, JotForm, Calendly, or any other supported source.
  </Step>
  <Step title="Copy the share or embed link" icon="link" title-type="p">
    Use the platform's share or publish option to get a public URL. Copy it to your clipboard.

    Each platform guide below shows exactly which link to copy.
  </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 editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

### Step 3: Paste the URL and Publish

<Steps>
  <Step title="Paste the form URL" icon="clipboard" title-type="p">
    In the Content tab, paste the URL into the **Source URL** field. The form loads in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to show the full form. Taller forms need 700px or more. Click **Update** or **Publish**.
  </Step>
</Steps>

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

## Supported Form Platforms

Select your platform for a step-by-step embed guide.

<Columns cols="2">
  <Card title="Embed Typeform in Elementor" href="/elementor/forms/embed-typeform" icon="help-circle" horizontal={false}>
    Add surveys, quizzes, and lead forms from Typeform.
  </Card>
  <Card title="Embed HubSpot Form in Elementor" href="/elementor/forms/embed-hubspot" icon="inbox" horizontal={false}>
    Capture leads with HubSpot forms connected to your CRM.
  </Card>
  <Card title="Embed JotForm in Elementor" href="/elementor/forms/embed-jotform" icon="file-plus" horizontal={false}>
    Add contact forms, surveys, and payment forms from JotForm.
  </Card>
  <Card title="Embed Calendly in Elementor" href="/elementor/forms/embed-calendly" icon="calendar" horizontal={false}>
    Let visitors book meetings directly on your page via Calendly.
  </Card>
</Columns>

## Also in Gutenberg

All form platforms are also supported in the WordPress block editor.

See [Embed Forms in Gutenberg](/gutenberg/embed-forms) for all Gutenberg guides.

## Related Guides

- [Embed Anything in Elementor](/elementor/embed-anything)
- [Elementor Widget Setup](/getting-started/elementor-setup)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)