Embed Typeform in Gutenberg

Step-by-step guide to embed Typeform in Gutenberg using the Custom iFrame WordPress plugin. Add surveys and quizzes to your site. No coding required.

Overview

Custom iFrame lets you embed Typeform in Gutenberg by pasting any Typeform share link into the block. Display interactive surveys, quizzes, and 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 Typeform in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A Typeform account with a published form

Step 1: Get Your Typeform Link

Open your Typeform workspace

Copy the form link

Click the three-dot menu on the form you want to embed. 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.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

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 Typeform in Gutenberg

Paste the Typeform URL

Select the Custom iFrame block. In the right panel, paste your Typeform URL into the Source URL field. The form appears inside the block in the editor.

Set the height

Set Height to at least 500px. Taller forms with multiple questions work well at 600px to 800px.

Click Update or Publish. Your Typeform 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 Typeform 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. Typeform's free plan supports embedding. Copy the share link from your workspace and paste it into the Source URL field.

Confirm the form is published in Typeform. Drafts and unpublished forms do not load. See iFrame Not Showing for more help.

Set height to at least 500px for a short form. Multi-question forms work well at 600px to 800px. Enable Auto Height to let the block resize as the form progresses.

Yes. Custom iFrame supports HubSpot, JotForm, Calendly, and more. See the Embed Forms in Gutenberg overview for all supported form tools.

Also Available For

Embed Typeform in Elementor

Guide for the Elementor widget.

Embed Calendly in Gutenberg

Let visitors book meetings directly on your page.

Was this page helpful?

Last updated today

Built with Documentation.AI