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

Step-by-step guide to embed JotForm in Elementor 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 Elementor by pasting any JotForm link into the widget. 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.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A JotForm account with a published form

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/xp4wRDzGupM"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## Step 1: Install and Activate Custom iFrame

<Steps>
  <Step title="Go to Plugins in your WordPress dashboard" icon="download" title-type="p">
    Go to **Plugins > Add New**.
  </Step>
  <Step title="Install Custom iFrame" icon="search" title-type="p">
    Search for **Custom iFrame by Coderz Studio**. Click **Install Now**, then **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>
</Steps>

## Step 2: 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 3: 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 4: Embed JotForm in Elementor

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

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954546/elementor/forms/jotform/paste-jotform-url.webp"
      alt="Custom iFrame widget in Elementor editor showing JotForm URL in Source URL field with live JotForm contact form preview"
      width="1024"
      height="464"
    />
  </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>

## Step 5: 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 6: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your JotForm 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 JotForm 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 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 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 HubSpot Form in Elementor" href="/elementor/forms/embed-hubspot" icon="layout" horizontal={false}>
    Embed HubSpot forms in Elementor.
  </Card>
</Columns>

## Related Guides

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