How To Embed Google Forms In WordPress: Manually Or With A Plugin
Looking for a way to embed Google Forms in WordPress?
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.
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).
Step 2: Generate Embed Code
Once you’ve finished creating your form, click on the Send button in the top-right corner:
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:
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:
Now, when you publish or update the post, you should see your embedded Google Form on the front-end of your site:
Yup! It’s that easy.
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:
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:
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:
- 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:
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:
Then, copy the link:
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:
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:
Then, add that shortcode to the post or page where you want the form to appear:
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:
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!