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 guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A JotForm account with a published form
Step 1: Get the JotForm Link
Open JotForm and find your form
Log in to jotform.com and open the form you want to embed, or create a new one.
Copy the form link
Click the More button on the form. Click Publish Form. Click Copy Link.
Step 2: Install the Plugin and Add the Block
Install and activate the plugin
Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.
Open your page in the block editor
Go to the page or post where you want the form. Click Edit to open the Gutenberg block editor.
Add the Custom iFrame block
Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.
Step 3: Embed JotForm in Gutenberg
Paste the JotForm URL
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.
Set the height
Set Height to fit the form. Values between 500px and 700px work well for most JotForm forms.
Click Update or Publish. Your JotForm is now live on your WordPress site.
For all block settings, see the Set Up Custom iFrame in Gutenberg 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
No. JotForm's free plan supports embedding. Publish the form and copy the link from the Publish Form page.
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 for more help.
Yes. The form runs inside an iFrame and submits directly to JotForm. All responses appear in your JotForm inbox as normal.
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.
Also Available For
Embed JotForm in Elementor
Guide for the Elementor widget.
Embed Typeform in Gutenberg
Embed Typeform surveys and quizzes in Gutenberg.
Related Guides
Last updated today
Built with Documentation.AI