How to Embed JotForm in Elementor (The Easy Ways)

Already building with Elementor and wondering how to embed JotForm in Elementor your layout?

Good news: it’s quick, clean, and you’ve got two options. Whether you prefer using a plugin or just a simple HTML widget, you’ll have that form live in minutes.

Let’s break it down.

Method 1: Using the “Custom iFrame” Plugin (Easy Way)

This is the fastest route. Perfect if you just want to paste a form link and go.

Step 1: Install the Custom iFrame Plugin

In your WordPress dashboard, go to Plugins > Add New
Search for “Custom iFrame by Coderz Studio“
Click Install > Activate

The image showcases the WordPress plugin listing for "Custom iFrame for Elementor," designed to embed PDFs, maps, videos, and websites within Elementor pages. The listing highlights features such as lazy loading, auto-height adjustment, dynamic URL support, and SEO-friendly functionality. Additional details include over 200 active installations, a 5-star rating from user reviews, and a prominent "Install Now" button. These features underscore the plugin's utility in enhancing web designs with seamless integration options.

Step 2: Copy Your JotForm Link

Step 3: Add the Custom iFrame Widget o Page

Open your page with Elementor
Search for Custom iFrame in the widgets panel
Drag it where you want the form to appear

Step 4: Embed JotForm in Elementor

In the Custom iFrame widget settings, paste your JotForm link into the ‘Source URL‘ field.

The image shows an example of embed JotForm in Elementor using the "Custom iFrame" widget. The settings on the left include the Source URL field populated with JotForm URL and additional configuration options like height, auto height, scrollbars, and refresh intervals. The right side displays an embedded JotForm titled "Coderz Studio Contact Form," featuring fields for Full Name, Contact Number, Email Address, and a services inquiry section. These features illustrate how to efficiently embed JotForm in Elementor for seamless form integration.

The Custom iFrame widget gives you some handy options to style the JotForm Embed:

Width and Height: control how big your form appears
Border: add or remove a border (great for visual contrast)
Box Shadow: make it pop a little
Responsive toggle: keep things smooth on mobile

Play around with those until it fits your design. Once you are done, just publish the page. Your JotForm is live on your site.

Check this step-by-step doc guide to embed JotForm in Elementor.

Method 2: HTML Widget to Embed JotForm in Elementor

Prefer not to use a plugin? No problem.

Step 1: Get Your Embed Code from JotForm

In JotForm, go to More > Publish Form > Embed
(A code snippet will be visible)
Click on ‘Copy Code’ button to copy the full HTML code.

The image displays a web interface for embedding a contact form in Elementor. On the left, a "JotForm" with 0 submissions, created on April 23, 2025, is listed. On the right, under the "PUBLISH" tab and "EMBED" sub-tab, an embed code snippet is provided. A "Copy Code" button is positioned below the code. This interface simplifies the process to seamlessly embed JotForm in Elementor designs.

Step 2: Drop an HTML Widget in Elementor

Open your page with Elementor
Search for HTML, drag the widget where you want it
Paste the code inside

That’s it. You’re live.

If you want to style this version, you’ll need to wrap it in a Section or Container and use Elementor’s design tools (padding, background, etc.) to match your look.

Which Method Should You Use?

Use Custom iFrame if you want quick setup and easy styling from the Elementor panel.

Use the HTML widget if you are good with coding or prefer not to install another plugin.

Both work great — it’s just about what fits your workflow.

FAQ: Embed JotForm in Elementor with Custom iFrame

Yes! Just make sure the Responsive toggle is ON in the widget settings.

Absolutely. Just use separate widgets for each form.

Double-check the link or code. Also make sure the form is published in JotForm.

Not really. JotForm loads externally, so it doesn’t bloat your page much.

You can style the wrapper (with padding, borders, backgrounds), but the actual form design comes from JotForm. If you want deeper customization, edit the form in JotForm.

Wrap-Up

And there you go — two solid ways to embed JotForm in Elementor without any fuss. Whether you go the plugin route or drop in raw code, you’ll have a working form in minutes.

Now it’s your turn! 👇
Have you tried either method? Got a favorite way to style your forms or a trick to share?

Drop your thoughts in the comments — we’d love to hear how you’re using JotForm with Elementor. And if you get stuck or want help making your forms work smarter, Coderz Studio has your back.