WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How To Embed Google Forms In WordPress: Manually Or With A Plugin

Last Updated on July 17th, 2019

Tags: , ,

Looking for a way to embed Google Forms in WordPress?

Google Forms is great because of how easy it makes it to create complex forms, as well as the detailed analysis options you get for viewing responses.

But it’s not very user-friendly to link your visitors to an external site just to fill out a form, so it makes sense that you’re looking for a way to bring those Google Forms onto your WordPress site.

Good news:

You have options. Two good ones, specifically:

  • Manually embedding a Google Form using Google’s Embed HTML
  • Using a plugin to embed a Google Form

For basic uses, the manual method is fine. But the plugin method offers a unique twist in that it lets you embed Google Forms as an actual HTML form on your site, which gives you more options for customizing how your form looks and functions.

If you’re a beginner, I recommend you stick with the manual method (that’s the first one I’ll show you). But if you want more control than the manual method offers, the plugin is a good option, it just has some quirks.

I’ll cover tutorials for both methods below…

How To Manually Embed A Google Form In WordPress

You don’t actually need a plugin to embed a Google Form in WordPress, all you need is the Google Forms embed code. Here’s how to find it:

Step 1: Create Your Google Form

If you haven’t already, get started by creating a Google Form just like you normally would (you can do that by going here).

Article Continues Below

Step 2: Generate Embed Code

Once you’ve finished creating your form, click on the Send button in the top-right corner:

google forms wordpress interface

Then, choose the < > symbol on the Send via line. This should generate an Embed HTML code snippet. Copy that code snippet because you’ll need it in the next step. You can also adjust the width and height if desired before copying the code:

google forms embed html

Step 3: Add Embed HTML To Text Tab In WordPress Editor

To finish things out, go to the post or page where you want to embed your Google Form.

Click on the Text tab and then paste in the Google Form Embed HTML that you generated in the previous step. It should look something like this:

how to embed google forms in wordpress

Now, when you publish or update the post, you should see your embedded Google Form on the front-end of your site:

example of embedded google form

Yup! It’s that easy.

Article Continues Below

If you don’t like how the default Google Forms styling looks on your site, you can customize your form’s looks from the Google Forms interface. Just open the Theme Options interface when you’re editing your form in the Google Forms interface:

change google forms style

The styles on your embedded form will automatically update.

Why Does My Embedded Form Look Weird On Mobile Devices?

If the embedded form looks wrong on mobile devices, one easy fix is to change the width of the form in the embed code to 100%. For example:

make google forms responsive

It still won’t look perfect, but that can help make the sizing better, at least.

How To Embed Google Forms In WordPress With A Free Plugin

As an alternative to the manual method, there’s also a popular free plugin named…Google Forms.

This plugin handles the process a bit differently. It:

  • Grabs the Google Form as a custom post type
  • Removes the Google wrapper HTML
  • Renders the Google Form as an HTML form on your site.

In general, it gives you a lot of control over your forms. But the downside is that you have to use the old version of Google Forms if you want to use the plugin.

Here’s how to use it. To get started, all you’ll need is:

Article Continues Below

  • A Google Forms form
  • The Google Forms plugin installed and activated at your site

Step 1: Make Sure You’re Using The Old Version Of Google Forms

Like I said, the plugin will not work with the newest version of Google Forms. Instead, you’ll need to manually revert to the old version. To do that, click on the question mark in the bottom-right corner of the Google Forms interface. Then, select Back to the old Forms:

access old version of google forms

Step 2: Get Link To Form

Once you’re in the old Google Forms interface, click on the View live form button to get the direct link to the form:

get form link

Then, copy the link:

the url

Step 3: Add Form To Plugin

Now, go to Google Forms → Add New Google Form in your WordPress dashboard. Enter the form link that you just copied into the Form URL field:

google forms custom post type

Now, you can customize your form using the plugin’s many options. This is the biggest advantage of using the plugin over the manual embed.

There are a lot of options, so I recommend you go through them in detail. But in general, you can:

  • Add your own custom confirmation page
  • Use custom CSS classes
  • Override the default Google Forms text
  • Exclude certain elements
  • Split the form into multiple columns
  • Add a CAPTCHA

Once you’re finished, make sure to Publish your form.

Step 4: Get Form Shortcode And Embed Form

To actually embed your form, you’ll use a shortcode. To get this shortcode, click on the Google Forms option in your WordPress dashboard. Then, copy the value in the Short Code column:

google forms shortcode

Then, add that shortcode to the post or page where you want the form to appear:

embed shortcode

And once you edit or update your content, you should see your form on the front-end. Remember – it will use regular HTML – not Google Forms’ styles:

google forms example as html

Even though it uses your own HTML styles – form responses will still show up in the Google Forms interface.

And that’s it!

Unfortunately, your form will stop working if you ever go back to the new version of Google Forms.

But as long as you keep using the old version, you can continue to use the plugin and take advantage of its many customization options.

Final Thoughts On How To Embed Google Forms In WordPress

For most people, I think the best option is to just use the regular Google Forms embed code. While there are some issues with responsive design using that method, you can mitigate them a bit by setting the form width equal to 100%.

The plugin is an interesting option, but I don’t like being forced to use the old version of Google Forms (which isn’t nearly as nice as the new one). Mike Walsh, the developer of the plugin, has mentioned making it support the new version, though. If he does that, I think the plugin would be a much more viable option. But right now, it seems like that’s unlikely to happen in the near future.

Have any other questions about how to embed a Google Form in WordPress? Leave a comment and we’ll try to help out!

Would you like to learn more about WordPress?

Sign up for our Weekly WordPress Newsletter.

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.