View Categories

How to Embed JotForm in Elementor?

2 min read

With Custom iFrame plugin, you can embed JotForm in Elementor quickly and easily. Whether it’s a contact form, survey, registration form, or donation form. You can display it directly on your website without any complex setup.

Not a fan of reading? No worries — we’ve got a video tutorial for you. 📺

Not a video person? No worries — scroll on for the full step-by-step guide.

Step 1: Install & Activate Custom iFrame Plugin🔌

Let’s start at square one — the classic WordPress plugin hustle:

  1. Jump into your WordPress dashboard.
  2. Head to Plugins > Add New.
  3. Search for “Custom iFrame by Coderz Studio” — we promise we’re cooler than the name sounds 😎.
  4. Click that ‘Install Now‘ button, then hit ‘Activate‘ like you’re launching a spaceship.

Boom. Plugin is live.

Step 2: Get the JotForm Link

  1. Open jotform.com > Navigate the Form you want to embed or Create new form.
  2. Click on ‘More” button > Click on “Publish Form” option.
  3. Click on “COPY LINK’ button.

Step 3: Add the Custom iFrame Widget

  1. Open your page in Elementor Editor.
  2. Drag and drop that Custom iFrame widget right into the section where the JotForm should shine.
Screenshot of the Elementor editing page showing how to Set Up Custom iFrame in Elementor, by showing the process on how you can drag and drop the Custom iFrame widget.

Step 4: Embed JotForm in Elementor

  1. Go to Content tab of widget.
  2. Into Source URL field, paste the JotForm URL.
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.

Step 5: Customize & Configure Settings

For styling, smart loading, and advanced options, refer to our Complete Custom iFrame Widget Guide to fine-tune your JotForm embed in Elementor.

Check this How to Style Custom iFrame? guide—adjust colors, backgrounds, borders, & more! 🎨✨

Step 6: Save & Publish

Click Update, and your JotForm is now live on your page! Your site visitors can now submit the form in your site.

That’s it! With Embed JotForm in Elementor using Custom iFrame, you can collect responses, leads, feedback or payment right from your site. It’s simple, clean, and works great on all devices. Got a form? Now you’ve got it on your website too!

How’s your vibe after reading this? —Tap an emoji