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

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


## Overview

Custom iFrame lets you embed Typeform in Gutenberg by pasting any Typeform share link into the block. 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.

Using Elementor instead? Follow the [Embed Typeform in Elementor](/elementor/forms/embed-typeform) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- 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: 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 Typeform in Gutenberg

<Steps>
  <Step title="Paste the Typeform URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste your Typeform 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 at least 500px. Taller forms with multiple questions work well at 600px to 800px.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Typeform 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 Typeform in Gutenberg using the Custom iFrame plugin. From copying the form link to pasting the URL and publishing, the whole setup runs through the block 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 block 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 Gutenberg overview](/gutenberg/embed-forms) for all supported form tools.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Typeform in Elementor" href="/elementor/forms/embed-typeform" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Calendly in Gutenberg" href="/gutenberg/forms/embed-calendly" icon="calendar" horizontal={false}>
    Let visitors book meetings directly on your page.
  </Card>
</Columns>

## Related Guides

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