Embed Google Form in Gutenberg
Step-by-step guide to embed Google Form in Gutenberg using the Custom iFrame WordPress plugin. No coding required.
Overview
Custom iFrame lets you embed Google Form in Gutenberg by pasting the form's responder link into the block. Display live, fully functional forms directly on any page or post in the WordPress block editor.
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 Google Form in Elementor guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google Form published and ready to embed
Step 1: Get the Google Form Embed Link
Open your Google Form
Open the Google Form you want to embed in Google Forms.
Publish the form
Click the Publish button in the top-right corner. A Publish Form dialog opens. Click Publish inside the dialog.
Copy the responder link
Click the Published button that appears. Click Copy Responder Link. This is the URL you will paste into the Custom iFrame block.
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 Google Form in Gutenberg
Paste the Google Form URL
Select the Custom iFrame block. In the Source field in the right panel, paste the Google Form responder link you copied. The form appears inside the block in the editor as a live preview.
Step 4: Adjust Settings and Publish
Height: Set the iframe height so the full form is visible. Adjust based on how many questions the form has.
Scroll Bar: Enable the scrollbar if your form is long and you prefer to keep the iframe height fixed.
Refresh Interval: Set how often the iframe reloads. Useful if form questions update frequently.
Smart Load: Turn on lazy loading so the form loads only when it enters the viewport. This keeps page performance strong.
Click Update or Publish. Your Google Form is now live and collecting responses on your WordPress site.
Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the Set Up Custom iFrame in Gutenberg guide for all block options.
This guide showed you how to embed Google Form in Gutenberg using the Custom iFrame plugin. From copying the responder link to configuring the block and publishing, your form is ready to collect responses directly from your WordPress page.
FAQ
The responder link is the URL visitors use to fill out your form. Get it from the Publish dialog in Google Forms by clicking Publish and then Copy Responder Link.
Yes. Submissions made through the embedded form go to the same Google Forms response sheet. You can view them in Google Forms or linked Google Sheets.
Make sure the form is published and you copied the responder link. If the form is restricted to specific Google Workspace users, visitors outside that domain cannot submit it. See iFrame Not Showing for more help.
It depends on how many questions your form has. Start at 600px and increase until all questions are visible. Enable Auto Height to let the iframe size itself automatically.
Also Available For
Embed Google Form in Elementor
Guide for the Elementor widget.
Embed Google Docs in Gutenberg
Embed Google Docs in the block editor.
Related Guides
Last updated today
Built with Documentation.AI