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

Step-by-step guide to embed Typeform in Elementor using the Custom iFrame WordPress plugin. Add surveys and quizzes to your site. No coding required.


## Overview

Custom iFrame lets you embed Typeform in Elementor by pasting any Typeform share link into the widget. Display interactive surveys, quizzes, and forms 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 Typeform account with a published form

## Step 1: Get Your Typeform Link

<Steps>
  <Step title="Open your Typeform workspace" icon="layout" title-type="p">
    Log in to [typeform.com](https://www.typeform.com) and go to **My Workspace**.
  </Step>
  <Step title="Copy the form link" icon="link" title-type="p">
    Click the **three-dot menu** on the form you want to embed. Click **Copy link**.
  </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 Typeform in Elementor

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

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954402/elementor/forms/typeform/paste-typeform-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Typeform URL in Source URL field with live Typeform survey preview"
      width="1024"
      height="459" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 500px. Taller forms with multiple questions work well at 600px to 800px.
  </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 Typeform 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 Typeform in Elementor using the Custom iFrame plugin. From copying the form link to pasting the URL and publishing, the whole setup runs through the Elementor editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need a paid Typeform plan to embed a form?" default-open="false">
    No. Typeform's free plan supports embedding. Copy the share link from your workspace and paste it into the Source URL field.
  </Expandable>
  <Expandable title="The Typeform shows blank. What should I check?" default-open="false">
    Confirm the form is published in Typeform. Drafts and unpublished forms do not load. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="What height should I set for a Typeform?" default-open="false">
    Set height to at least 500px for a short form. Multi-question forms work well at 600px to 800px. Enable Auto Height to let the iFrame resize as the form progresses.
  </Expandable>
  <Expandable title="Can I embed other form tools the same way?" default-open="false">
    Yes. Custom iFrame supports HubSpot, JotForm, Calendly, and more. See the [Embed Forms in Elementor overview](/elementor/embed-forms) for all supported form tools.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed HubSpot Form in Elementor" href="/elementor/forms/embed-hubspot" icon="layout" horizontal={false}>
    Embed HubSpot forms 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 HubSpot Form in Elementor](/elementor/forms/embed-hubspot)
- [Embed JotForm in Elementor](/elementor/forms/embed-jotform)
- [Embed Calendly in Elementor](/elementor/forms/embed-calendly)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)