How to Embed a Form in Elementor?

Bycoderzstudio Hours

Key Takeaways

What’s the easiest way to embed a form in Elementor WordPress site?

You can embed a form manually with Elementor’s HTML widget, but it requires code and has limited options. The faster and safer method is using a plugin.

The Custom iFrame for Elementor plugin by Coderz Studio lets you embed forms from Google Forms, Typeform, Jotform, and more with just a URL. It makes the form responsive, gives you customization options, and adds extra security with its built-in sandbox feature.

Adding forms to your WordPress site is one of the easiest ways to collect leads, feedback, or survey responses. If you’re using Elementor as your page builder, you’ve probably noticed that it doesn’t come with built-in support for third-party form builders like Google Forms, Jotform, Typeform, HubSpot Forms, or Gravity Forms.

The good news: you don’t need to spend hours figuring out complex codes. You can embed any form in Elementor using iframe or Embedding plugins.

In this guide, we’ll walk through exactly how to embed a form in Elementor, why using a custom iframe plugin is the best option, and link you to detailed guides for each major form builder.

Why Embed Forms in Elementor?

Elementor is powerful for designing pages, but most people don’t rely on Elementor’s native form widget for everything. Instead, they use specialized form builders like:

These tools make building forms easy, but when it comes time to publish them on your WordPress site, you’ll need to embed them. That’s where iframe embedding comes in.

Two Ways to Embed Forms in Elementor

When you embed forms in Elementor, you usually have two options:

  1. HTML widget – Copy the iframe code from the form builder and paste it directly into Elementor’s HTML widget.
  2. Plugin – Use a dedicated plugin that handles iframe embeds with extra features like responsiveness and sandboxing.

Both methods work, but if you want a smooth, future-proof solution, the Custom iFrame plugin is better.

Why Use the Custom iFrame Plugin?

Here’s why we recommend the Custom iFrame plugin for embedding forms in Elementor:

This image shows the WordPress plugin “Custom iFrame for Elementor – Embed Pdf, Maps, Videos, & Websites Easily” by Coderz Studio. It allows secure, SEO-friendly, and responsive iFrame embedding in Elementor with features like lazy loading, auto-height adjustment, and dynamic URL support. The plugin has a 5-star rating from 3 reviews, over 1,000 active installations, was last updated 19 hours ago, and is marked compatible with the current WordPress version.

1. Works with Any Form Builder

Whether you’re embedding a Google Form, Jotform, HubSpot Form, or Typeform, the plugin makes it effortless. You don’t need different solutions for different platforms. Just paste the form link, and it works.

2. Responsive Form Embeds

If you’ve ever added a form only to find it cut off or awkward on mobile screens, you know the pain. The plugin includes built-in options to make any iframe fully responsive.

We even wrote a full guide on this: Embed Responsive iFrame in Elementor | Easy Way

3. Better Security with Sandbox Mode

The plugin allows you to use sandbox attributes. This adds a layer of security when embedding content from external websites. It prevents scripts inside the iframe from affecting your page.

Screenshot of the Sandbox settings in the Custom iFrame Pro plugin interface used to embed a form in Elementor. The "Enable Sandbox" option is switched to Yes, unlocking detailed security controls such as checkboxes for Allow Forms, Allow Scripts, Allow Same Origin, Allow Popups, Allow Modals, Allow Orientation Lock, Allow Pointer Lock, and Allow Presentation. A Custom ID field is also visible with the value “my-custom-iframe,” showing how users can fine-tune iframe behavior and enhance security when embedding forms or other content in Elementor.

4. No Manual Code Tweaks

Normally, if you use Elementor’s HTML widget, you have to tweak iframe code manually to adjust height, width, or responsiveness. With the Custom iFrame widget, everything is managed through simple settings.

How to Embed a Form in Elementor Using Custom iFrame Plugin

Here’s a step-by-step breakdown:

  1. Install the Custom iFrame Plugin
    • Go to your WordPress dashboard → Plugins → Add New.
    • Search for “Custom iFrame by Coderz Studio”
    • Install and activate the plugin.
  2. Open Elementor Editor
    • Edit the page where you want the form.
    • Drag the Custom iFrame widget into the section.
  3. Paste Your Form Link
    • Copy the public link of your form from Google Forms, Jotform, Typeform, HubSpot, or any other builder.
    • Paste it into the ‘Source URL’ field of the Custom iFrame widget.
  4. Adjust Settings
    • Customize the Custom iFrame widget settings as per your requirements.
    • Enable Sandbox Mode for extra security.
  5. Publish Your Page
    • Click update.
    • View your page on desktop and mobile to confirm the form looks perfect.

That’s it! No messy code. No trial and error.

Embedding Specific Forms in Elementor

Different form builders provide different embed codes and options. To save you time, we’ve written detailed guides for each. If you’re using one of these, check out the dedicated step-by-step:

Each of these explains where to find the correct link, how to configure settings, and the best way to make the form responsive inside Elementor.

FAQs About Embedding Forms in Elementor

Yes. You can add multiple Custom iFrame widgets and embed different forms on the same page.

No. With the Custom iFrame plugin, you just paste the link and adjust settings. No manual coding is required.

The styling of the form itself comes from the form builder (Google, Jotform, etc.), not Elementor. However, you can style the section around the iframe in Elementor.

Yes, but it requires adding custom CSS manually. If you’re not comfortable with CSS, the plugin makes it much easier.

Final Thoughts

Embedding forms in Elementor doesn’t need to be complicated. Instead of juggling different codes for different platforms, just use the Custom iFrame plugin. It supports all major form builders, keeps your embeds responsive, and adds extra security with sandboxing.

Have you tried embedding forms in Elementor before? Share your experience or any questions in the comments below. If you found this guide helpful, please share it with others who might need it.

Leave a Reply

Your email address will not be published. Required fields are marked *