How To Embed A Google Docs Form Into A WordPress Page

Google Docs Logo ImageEmbedding Google Docs Spreadsheet Forms
On Your Website

Google Docs Web Forms are a free, fast and powerful way to collect information from your readers and community.

While I make avid use of the hosted forms option, sometimes we want to embed them somewhere for ease of use!

Fortunately, Google and WordPress play nice together and it’s super easy to embed the form with no special plugin needed. 

(There are plugins available. However, because of how easy this is, like embedding YouTube videos, I do not recommend using a plugin.)

Start by simply opening your Google Doc Form editor for the form you wish to embed.

In the “More Actions” menu, open the drop-down and select “Embed”. 

This will give you a pop-up box with your embed code. Copy the embed code from the box. 

Now visit your WordPress Post/Page Editor and click over to HTML tab. 

Select the area where you would like the form to display and paste in the code. 

(I use the “show

and
tags” option in the TinyMCE Advanced plugin to give me better control of the HTML. It is not required however.) 

You may notice that the embed will not display for you on a preview. I don’t know why but it did not want to preview for me today. However, once I hit publish, it showed up just fine. 

Once you have your embedded Google Docs Form displaying, you likely notice that it’s too big (or too small) for the content area of your WordPress blog. 

Re-visit the html tab of your post and adjust the width and height numbers (and then re-publish) to get the effect you need. 

For me, I needed a width of about 600 and height of about 750 for my Google Docs embedded Contact Form. (You want it narrow enough to fit the width but long enough that you do not have any scroll bars.)

 

In the example above, you can get an idea of how an embeddable Google Docs Form can theoretically replace the Contact Form 7 plugin (although by default lacks utilities such as CAPTCHA and more).  For useages such as this, be sure to enable email notifications for Google Docs Forms.

 ~ Kim ~
Simple Tech Tips For Marketing 

PS: It is possible to do quite a few advanced things with these forms, including adding CAPTCHA, but these are not native features and are a lot more techy.  That is what I have done for this blog. 

Get The Inside Scoop!
social tripletKeep up with all the latest social marketing changes!


After Post Widget

This is where you can place your after content optin

Relevant Posts

This is the widget for relevant posts

Leave a Reply

11 Comments on "How To Embed A Google Docs Form Into A WordPress Page"


Guest
2 years 10 months ago

Kimberly,

I am just blown away by how up to date you are about all things online and techy. You explain it all so clearly. Even though I don’t always take you up on it and implement what you are teaching, there are times when you shared just the one thing I needed and voila – it was done.

Thanks for all your offer to all of us.

Warmly,

Dr. Erica

Guest
2 years 10 months ago

Thanks for this tip Kim,
Google Docs are very handy especially for people starting out on a limited budget. I know some people do not like to use them feeling that the BIG G has enough usage and power! I was told Google owns all the content added to it’s Docs… is this true? Google Drive is said to be that way but other services such as Dropbox the user retains the ownership of the content he uploads. Thanks for sharing :)

Guest
2 years 10 months ago

Hi Kim,

I will definitely look into Google Docs now. You really explain things in a way that we can decide if they are of use to us, saving valuable time testing all of these new things out.

Thanks again.

Guest
2 years 10 months ago

Great tutorial. A helpful word of advice for WordPress users: when you paste in the HTML content of the iframe in “HTML Mode”, be sure that you DO NOT change back to the WYSIWYG editor mode. If you do, WordPress’ content filters can/will break you iframe code! So just paste the iframe in HTML mode and hit update/publish and do not go back to the visual editor mode!

Guest
2 years 10 months ago

That’s super handy! I was thinking of putting a few feedback forms up, and this seems a lot more flexible for a one-shot deal than researching and testing an entirely new plugin.

Thanks!