Political Campaign Website Design Examples
March 16, 2026
Great Looking Websites With A Calm Color Palette
March 17, 2026Tired of complicated form plugins that slow down your WordPress site? Google Forms offers a straightforward solution for collecting data without the hassle. Learning how to embed a Google Form in WordPress takes just minutes but delivers powerful results for surveys, contact forms, and feedback collection.
WordPress and Google Forms integration creates a seamless experience for both site owners and visitors. Whether you're building a contact page or creating customer surveys, this combination provides reliable form functionality without additional plugins.
This guide walks you through:
- Different embedding methods (iframe, HTML, shortcode)
- Form customization techniques for WordPress
- Mobile responsiveness considerations
- Data collection and submission tracking
By following these WordPress form embedding techniques, you'll have your Google Form displayed perfectly on your site, matching your theme and collecting responses in no time.
How to embed a Google form in WordPress:
Your Google Form is ready. Your WordPress site is live. But getting one inside the other is where most people hit a wall.
Learning how to embed a Google Form in WordPress takes less than five minutes once you know which method fits your setup. The problem is that WordPress offers several different editors, and each one handles iframe embed code differently.
This guide covers every method: the Gutenberg Custom HTML block, the Classic Editor Text tab, page builders like Elementor and Divi, and plugin-based options for non-technical users.
You will also find fixes for the most common issues, including forms that disappear after saving, blank display areas, and mobile responsiveness problems with fixed-width iframes.
What Does Embedding a Google Form in WordPress Mean?
Embedding a Google Form in WordPress means rendering the form directly on your page so visitors can fill it out without leaving your site. It is not the same as dropping in a link that opens Google Forms in a new tab.
Google Forms generates an iframe code snippet that loads the form inside a sandboxed container. That iframe is what gets inserted into WordPress. The visitor sees a functional form; responses go straight to your Google account.
Worth knowing before you start: WordPress does not store any submission data. All responses live in Google Forms' Responses tab, and optionally in a linked Google Sheet. The WordPress database is never involved.
How the iframe embed code works
The iframe points to a specific Google Forms URL ending in ?embedded=true. That parameter tells Google to serve a stripped-down version of the form designed for embedding.
The default code includes fixed width and height pixel values. Those values cause the most common display problems people run into on mobile, but that comes later.
What "embedding" is not
Not a plugin integration: WordPress does not natively "talk" to Google Forms. There is no API handshake, no webhook, no data sync. The iframe is a window into Google's servers, nothing more.
Not a Google account requirement for visitors: Unless the form creator has restricted access, anyone can submit responses without signing in to Google.
Not affected by your WordPress theme: CSS from your theme cannot reach inside the iframe. The form always renders in Google's own styling unless you use Google's built-in theme editor.
What Are the Methods to Embed a Google Form in WordPress?
There are 4 main ways to insert a Google Form into a WordPress page or post: the Custom HTML block in Gutenberg, the Text tab in the Classic Editor, a dedicated plugin, and a page builder widget such as Elementor's HTML widget or Divi's Code module.
Which method you use depends entirely on your editor setup. WordPress powers 43.4% of all websites as of 2025 (W3Techs), and those sites use a wide mix of editors and builders.
| Method | Editor compatibility | Technical difficulty | Plugin required |
|---|---|---|---|
| Custom HTML block | Gutenberg (WordPress 5.0+) | Low | No |
| Text tab paste | Classic Editor | Low | No |
| Plugin shortcode | Both editors | Very low | Yes |
| Page builder widget | Elementor, Divi, others | Low | Builder only |
All 4 methods produce the same front-end output. The difference is where and how you insert the iframe code, not what the visitor sees.
Which method fits your setup
Using Gutenberg? The Custom HTML block is the cleanest option. No extra plugins, works out of the box.
Using the Classic Editor plugin? Text tab paste is the equivalent approach, but watch for one gotcha: switching back to the Visual tab can strip the iframe code in some configurations.
Running Elementor? Elementor holds a 40-50% share of the WordPress page builder market as of 2025 (Colorlib). Its HTML widget handles iframes without any issue.
Want zero manual code handling? A plugin like GreenTreeLabs Google Forms manages the insertion via shortcode or block, which is easier if you manage multiple forms across a site.
How to Get the Google Form Embed Code
Before touching WordPress, you need the iframe code from Google Forms. This takes under a minute.
Open your form in Google Forms. Click the Send button in the top-right corner. In the dialog that opens, click the embed icon (the angle brackets: <>). Google generates the full iframe snippet. Copy it.
Adjusting dimensions before you copy
The Send dialog shows width and height fields. Change width to 100% here rather than editing the raw code later. Height stays as a pixel value since iframes cannot auto-resize based on content from a different origin.
A typical starting height for a short form is 500-600px. For multi-question forms, 800-1000px is more realistic. You will likely need to test and adjust after embedding.
One setting to check first
Go to Settings inside your form and confirm the form is set to open access (not restricted to specific Google accounts). A restricted form embeds fine for you while signed in, but shows an error to everyone else. This is one of the most common embedding mistakes.
How to Embed a Google Form Using the Block Editor (Gutenberg)
The Custom HTML block is the standard method for WordPress sites running Gutenberg. No plugin required, and it works on any page or post.
How to Add a Custom HTML Block in Gutenberg
Open the page or post editor. Click the + icon to add a new block. Search for "Custom HTML" and select it. Paste the Google Forms iframe code directly into the block.
Do not use the "Preview" toggle in the block while working. As noted on the WordPress.org support forums, switching to preview mode and then re-saving can cause the block to save "Loading..." as static text instead of the iframe HTML. Keep the block in HTML mode.
Click Update or Publish, then use the front-end preview to confirm the form renders correctly.
How to Adjust the Iframe Size for Responsiveness
Mobile devices now account for 62.73% of global website traffic as of Q2 2025 (Statista). A fixed-width iframe breaks on any screen narrower than the pixel value you set.
Inside the iframe code, find width="640" (or whatever value Google generated) and replace it with width="100%". This makes the form span the full width of its container on any screen size.
Height stays fixed. Set it high enough that the full form is visible without an inner scrollbar. Test using Chrome DevTools mobile simulation before publishing.
How to Embed a Google Form Using the Classic Editor
For sites running the Classic Editor plugin or WordPress versions before 5.0, the method shifts slightly. The Visual tab strips iframe code on save. The Text tab does not.
The Text tab method
Open the page or post. In the editor toolbar, click the Text tab (not Visual). Position your cursor where the form should appear. Paste the iframe code. Save.
That is the entire process. The common mistake is working in the Visual tab first and then switching to Text. That sequence can corrupt the iframe. Start in Text, stay in Text for pages that contain embedded iframes.
A known limitation with some configurations
Some WordPress setups with aggressive security plugins strip iframe tags regardless of which tab you use. If the form disappears after saving, the problem is almost certainly a plugin like Wordfence or iThemes Security filtering the output. Whitelist docs.google.com in those plugins' settings, or switch to the Gutenberg Custom HTML block method.
The WordPress mixed content issue can also affect iframe display if your site runs on HTTPS but the iframe source is HTTP. Google Forms uses HTTPS by default, so this is rare, but worth checking if the form is invisible despite the code saving correctly.
How to Embed a Google Form Using a Plugin
Plugin-based embedding suits anyone who wants a repeatable, no-code workflow for placing forms across multiple pages. Colorlib data shows approximately 60% of WordPress sites now use some form of page builder or visual editor, and the same logic applies here: tools that reduce friction get used more consistently.
How to Use the GreenTreeLabs Google Forms Plugin
GreenTreeLabs makes the most widely used dedicated Google Forms plugin for WordPress. Installation is standard: Plugins > Add New > search "Google Forms" > Install > Activate.
Once active, the plugin adds a Google Forms block to Gutenberg and a shortcode option for the Classic Editor. You paste the form URL (not the iframe code) into the block settings. The plugin generates the embed automatically.
This matters for sites with multiple forms. You manage the URL in one place rather than hunting through page HTML to update iframe code manually.
Plugin vs. Manual Iframe: When Each Makes Sense
| Scenario | Better approach |
|---|---|
| One form on one page | Manual iframe (Custom HTML block) |
| Multiple forms across the site | Plugin |
| Non-technical editors maintaining the site | Plugin |
| Minimal plugin count is a priority | Manual iframe |
| Shortcode in sidebar widget or footer | Plugin |
The tradeoff with plugins is maintenance. Every plugin added to a WordPress site is a dependency that needs updates. If the plugin is abandoned or breaks after a WordPress core update, the form disappears until it is fixed.
How to Embed a Google Form in a Page Builder (Elementor, Divi)
Page builders override the default WordPress editor. If you are running Elementor or Divi, the Gutenberg and Classic Editor methods above do not apply. Both builders have their own module for inserting raw HTML, and both handle Google Forms iframe code without issues.
Elementor controls 13.1% of all WordPress sites and holds 40-50% of the page builder market (Colorlib, 2025). Divi maintains a stable 10-12% share. Between them, they cover a significant portion of all WordPress installations.
How to Embed Using Elementor's HTML Widget
Open the page in Elementor's visual editor. In the left panel, search for HTML. Drag the HTML widget into the section where the form should appear.
Click the widget to open its settings. Paste the Google Forms iframe code into the HTML field. The form renders in the Elementor preview. If the form appears cut off, increase the height value in the iframe code directly inside that field.
Width set to 100% inside the iframe tag works reliably inside Elementor's column system. No additional CSS wrapper is usually needed.
How to Embed Using Divi's Code Module
In the Divi Builder, add a new row or open an existing section. Click the + to insert a module. Search for Code and select the Code module.
Paste the iframe code into the code field. Save the module. Divi renders the form in its visual preview. Divi's container widths generally handle width="100%" cleanly, so the form adjusts to the column it sits in.
One thing to check: if the form appears but has horizontal scroll on mobile, the column padding in Divi may be adding extra width. Reducing the section padding or adjusting the column gutter usually fixes it without touching the iframe code itself.
How to Make an Embedded Google Form Responsive on Mobile
Mobile accounts for 62.73% of global website traffic as of Q2 2025 (Statista). A Google Form iframe using a fixed pixel width will overflow its container on any screen smaller than the value you set.
The fix is not complicated. It is just not obvious from the default embed code Google generates.
Changing the fixed width to a percentage
Default behavior: Google Forms generates an iframe with width="640" by default. That is fine on desktop. On a 375px phone screen, the form overflows its column and causes horizontal scrolling.
Open the iframe code and replace the fixed width value with width="100%". The form will then span the full width of whatever container it sits in, whether that is a Gutenberg column, an Elementor section, or a full-width page layout.
The height problem and the CSS wrapper fix
Width is easy. Height is the tricky part. Iframes cannot auto-adjust their height based on content from a different origin, which is exactly what a Google Form is.
Wrapping the iframe in a responsive CSS container solves this for consistent aspect ratios:
.form-wrap { position: relative; padding-bottom: 120%; height: 0; overflow: hidden; }
.form-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }Adjust the padding-bottom percentage based on your form length. Short forms work at 80-100%. Multi-question forms often need 120-150%. Test in Chrome DevTools mobile simulation at 375px and 768px breakpoints before publishing.
Checking your work before you publish
Three things to verify:
- No horizontal scroll at 375px screen width
- Full form visible without an inner scrollbar on the iframe
- Confirmation message visible after submission (not hidden behind a fixed-height cutoff)
That last one is the most commonly missed. The thank-you message Google shows after submission often pushes the page taller than the fixed iframe height, making it invisible to users who just submitted. Increase height or use the CSS wrapper approach if this happens.
How to Fix Common Google Form Embedding Issues in WordPress
Most embedding problems fall into 4 categories. Each has a direct fix.
WordPress stripping the iframe code on save
This is the most frequent issue. You paste the iframe, save, reload the editor, and the code is gone or replaced with plain text.
Root cause: WordPress' TinyMCE editor (Classic Editor) strips iframe tags for security when switching between Visual and Text tabs. Some security plugins like Wordfence and iThemes Security also filter iframe output at the page level.
Two fixes, depending on your setup:
- Gutenberg users: keep the Custom HTML block in HTML mode, never switch to preview mode before saving
- Classic Editor users: work only in the Text tab; never switch to Visual on pages with iframes
- Security plugin users: whitelist
docs.google.comin the plugin's iframe or content filter settings
If the stripping persists, add this to your active theme's functions.php to stop TinyMCE from removing valid iframe attributes: add_filter('tiny_mce_before_init', 'allow_iframe_tinymce'); with the corresponding function that includes iframe in the extended_valid_elements list.
Form showing blank or cut off
Blank white space where the form should be usually means one of 3 things.
Access is restricted: The form is set to accept responses only from specific Google accounts. You see it fine when signed in. Everyone else sees a blank iframe. Fix: open Google Forms Settings and set the form to accept responses from anyone.
Height is too short: The iframe height is set lower than the form content. Increase the height value in the code until the full form and the submit button are visible.
For sites with the WordPress mixed content error, the iframe may fail to load entirely if the browser blocks a resource served over HTTP on an HTTPS page. Google Forms uses HTTPS by default, so check the browser console for any mixed content warnings before assuming it is a form access issue.
Google Form access and sharing settings
Google Drive's sharing settings affect embedded form behavior. 3 settings to check:
Responses > Accept responses: Must be toggled on, or the form shows a closed message.
Share settings in Google Drive: The form file itself should not be restricted. A restricted Drive file can cause an "unable to open" error inside the iframe even when the form itself is published.
Sign-in requirement: In Settings > Responses, if "Limit to 1 response" is enabled, Google requires sign-in. That forces visitors to authenticate with a Google account before they can see or submit the form. Disable this unless you specifically need it.
How to Style an Embedded Google Form to Match Your WordPress Site
Google Forms styling options are limited by design. Cross-origin browser restrictions block any CSS from your WordPress theme reaching inside the iframe. That is not a bug or a WordPress limitation. It is how all iframes work for security reasons (Google Developers documentation).
What you can and cannot control breaks down cleanly:
| What you control | Where it is set | What you cannot control |
|---|---|---|
| Background color | Google Forms theme editor | Font family (beyond 3 options) |
| Header image | Google Forms theme editor | Button styles or colors |
| Accent color | Google Forms theme editor | Field spacing or padding |
| Iframe border, shadow, margin | WordPress CSS (container) | Google branding in the form footer |
Using the Google Forms theme editor
Click the palette icon in the top-right corner of Google Forms. 3 font options are available: Default, Decorative, and Formal. Background color and header image changes carry over directly into the embedded version.
These changes apply to every embed of the form everywhere. There is no way to have different styling in different embed locations.
Styling the container in WordPress
You can style the div or wrapper around the iframe using your WordPress theme's custom CSS. This includes border radius, box shadow, background color outside the form, and margin or padding.
For sites where brand consistency matters, this approach closes some of the gap. But the form fields themselves remain in Google's styling. If form design needs to match your site's typography and button style precisely, a native WordPress form plugin is the right tool for that job.
How to Collect Google Form Responses from a WordPress-Embedded Form
Embedding a Google Form in WordPress does not connect the form to WordPress in any way. Responses go to Google, not to the WordPress database. This surprises a lot of people the first time they check their WordPress dashboard looking for submission data.
Accessing responses in Google Forms
As of 2025, 552,173 verified companies actively use Google Forms for data collection (Landbase), and the majority access their data through the Responses tab in Google Forms directly.
Open the form in Google Forms. Click the Responses tab at the top. The summary view shows automatic charts and percentage breakdowns for each question. The individual view shows each submission separately. Both update in real time as new responses come in.
Linking to Google Sheets for ongoing data management
The Responses tab is fine for a quick check. For anything involving regular review, analysis, or sharing with a team, link the form to a Google Sheet.
Click the green Sheets icon in the Responses tab. Select "Create a new spreadsheet." Every response becomes a new row, with each question as a column header. New submissions populate automatically without any manual export step.
From Google Sheets, you can filter by date, sort by response value, build pivot tables, and share the data with collaborators without giving them access to the form itself.
Setting up email notifications
Google Forms sends notification emails when new responses come in. The setup is in Responses, under the three-dot menu, labeled "Get email notifications for new responses." Enable it, and Google sends a summary email to the form owner's Gmail address for each submission.
For team workflows where responses need to trigger actions in other tools like Slack, a CRM, or a project management platform, Zapier and Make both support Google Forms as a trigger source. Neither tool requires code to configure.
What Are the Alternatives to Embedding Google Forms in WordPress?
Google Forms is free, fast to set up, and requires no WordPress plugins. For simple internal surveys and basic data collection, it is hard to beat. But 3 specific needs signal that a native WordPress form plugin is the better choice.
When native WordPress form plugins make more sense
WPForms reached 6 million active installs and over 245 million total downloads in 2024 (WPForms Year in Review), making it the most widely used dedicated WordPress form plugin. Contact Form 7, despite being older and simpler, holds over 10 million active installations (OOPSpam, 2026).
Those numbers reflect a real need: native form plugins store submission data inside the WordPress database. That matters for GDPR compliance, data portability, and keeping client data within your own infrastructure rather than inside a Google account you may not always control.
3 situations where a native plugin is clearly the right call:
- Payment collection required (Google Forms has no native payment processing)
- Form styling needs to match the WordPress theme precisely
- Submission data must live in the WordPress database, not Google Workspace
Comparing Google Forms vs native WordPress plugins
| Feature | Google Forms | WPForms / Gravity Forms |
|---|---|---|
| Cost | Free | Free tier + paid plans |
| Data storage | Google account | WordPress database |
| Styling control | Limited (iframe sandbox) | Full CSS access |
| Payment processing | Not available | Stripe, PayPal built in |
| Conditional logic | Section-level only | Field-level, advanced |
Google Forms wins on cost and speed. Native plugins win on control and compliance.
Choosing based on your actual use case
Use Google Forms if: the form is simple (contact, survey, event registration), your team already works inside Google Workspace, and visual branding of the form itself is not a priority.
Use a native WordPress plugin if: you need the form to look like part of your site, accept payments, store data locally, or integrate with a CRM without a third-party automation tool in between.
For a practical look at Contact Form 7 vs Gravity Forms, both are strong options on opposite ends of the complexity and cost spectrum. WPForms sits comfortably between them for most small business use cases.
FAQ on How To Embed A Google Form In WordPress
Do I need a plugin to embed a Google Form in WordPress?
No. The Custom HTML block in Gutenberg handles the iframe embed code directly. No plugin required. Plugins like GreenTreeLabs Google Forms are optional and useful mainly if you manage multiple forms across a site.
Why does my Google Form disappear after saving in WordPress?
WordPress strips iframe tags when you switch between the Visual and Text tabs in the Classic Editor. Stay in the Text tab only when working with iframe code. In Gutenberg, keep the Custom HTML block in HTML mode, not preview mode.
How do I get the Google Form embed code?
Open your form in Google Forms. Click Send in the top-right corner, then select the embed icon (angle brackets). Copy the full iframe snippet. Change the width to 100% before copying for better mobile responsiveness.
Why is my embedded Google Form not showing on mobile?
The default iframe uses a fixed pixel width, typically 640px, which overflows on smaller screens. Replace it with width="100%" inside the iframe tag. For height, use a CSS wrapper with percentage-based padding to maintain proper display across devices.
Does WordPress store Google Form responses?
No. All submission data goes to your Google Forms Responses tab, not the WordPress database. Link the form to a Google Sheet for ongoing access and team sharing. WordPress has no record of any submission made through an embedded Google Form.
Can I style an embedded Google Form to match my WordPress theme?
Only partially. Cross-origin browser restrictions block your theme's CSS from reaching inside the iframe. You can adjust background color, header image, and accent color inside Google Forms' theme editor. The iframe container itself can be styled with WordPress custom CSS.
How do I embed a Google Form in Elementor?
Drag the HTML widget into your Elementor section. Paste the Google Forms iframe code into the widget's HTML field. Set width to 100% inside the code. Adjust the height value until the full form displays without an inner scrollbar.
Why does my Google Form show a blank white space in WordPress?
Three common causes: the form's access is restricted to specific Google accounts, the iframe height is too short for the form content, or a security plugin is filtering the iframe output. Check each in that order before adjusting your embed code.
Can I embed a Google Form in the WordPress Classic Editor?
Yes. Switch to the Text tab in the Classic Editor and paste the iframe code directly. Do not switch back to the Visual tab after pasting. Doing so can corrupt or strip the iframe code before the page saves.
When should I use a native WordPress form plugin instead of Google Forms?
Use a native plugin like WPForms or Gravity Forms when you need payment processing, full styling control, or submission data stored in the WordPress database. Google Forms works well for simple surveys and internal data collection inside the Google Workspace ecosystem.
Conclusion
This conclusion is for an article on how to embed a Google Form in WordPress, and the core takeaway is straightforward: the right method depends entirely on your editor and setup.
Gutenberg users paste the Google Forms iframe code into a Custom HTML block. Elementor and Divi users rely on their HTML or Code module. Classic Editor users work exclusively in the Text tab.
Responsiveness comes down to one change: replacing the fixed pixel width with width="100%".
For simple surveys and internal data collection, Google Forms handles the job well. When you need WordPress database storage, payment processing, or full design control, native plugins like WPForms or Gravity Forms are the better fit.
Pick the method that matches your site. The form submission process handles itself from there.
