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

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


## Overview

Custom iFrame lets you embed JotForm in Gutenberg by pasting any JotForm link into the block. Display contact forms, surveys, registration forms, and payment 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 JotForm in Elementor](/elementor/forms/embed-jotform) guide.

## Requirements

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

## Step 1: Get the JotForm Link

<Steps>
  <Step title="Open JotForm and find your form" icon="layout" title-type="p">
    Log in to [jotform.com](https://www.jotform.com) and open the form you want to embed, or create a new one.
  </Step>
  <Step title="Copy the form link" icon="link" title-type="p">
    Click the **More** button on the form. Click **Publish Form**. 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 JotForm in Gutenberg

<Steps>
  <Step title="Paste the JotForm URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste the JotForm 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 fit the form. Values between 500px and 700px work well for most JotForm forms.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your JotForm 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 JotForm 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 JotForm plan to embed a form?" default-open="false">
    No. JotForm's free plan supports embedding. Publish the form and copy the link from the Publish Form page.
  </Expandable>
  <Expandable title="The JotForm shows blank. What should I check?" default-open="false">
    Confirm the form is published in JotForm. Draft forms do not load. Also confirm you copied the published form link, not the editor URL. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Will submissions still go to JotForm?" default-open="false">
    Yes. The form runs inside an iFrame and submits directly to JotForm. All responses appear in your JotForm inbox as normal.
  </Expandable>
  <Expandable title="What height should I set for a JotForm?" default-open="false">
    Set height to 500px to 700px for a standard form. Longer forms 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 JotForm in Elementor" href="/elementor/forms/embed-jotform" 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 HubSpot Form in Gutenberg](/gutenberg/forms/embed-hubspot)
- [Embed Calendly in Gutenberg](/gutenberg/forms/embed-calendly)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)