How to Embed Google Docs Forms on your WordPress Blog

title1 How to Embed Google Docs Forms on your WordPress Blog

Forms, We all know think they aren’t easy… right?

If you’re like most avid bloggers, making your blogs isn’t a big problem, but making forms and getting data feedback from your users in an easy and efficient way is not. If you are familiar with Windows Office or OpenOffice, I am about to rock your world. With Google Docs you can create a form and all the feedback (results from users submitting) will be exported into a spreadsheet similar to Excel (in fact you can even save the file to your computer and open it in Excel).

Watch the Screencast

First Stop: Google Docs

Before you can start you need a Google Account. If you have a Gmail account or YouTube Account you will already have an account. If you don’t, go ahead and create one. After you have created your account go to http://docs.google.com. If this is your 1st visit you will be greeted with a “Welcome to Google Docs” page with some helpful tips. Once you are past that screen click on the button at the top left corner of the screen that says “Create new” and then click on “Form”.

screen1 How to Embed Google Docs Forms on your WordPress Blog

Create Your Form

Now you have a new window/tab in which you can create your form. Fill the information out and create your form to your liking. You can make your form as large or as small as you like. Note that your form may have a theme. You can change your theme to have a more fancy design, but in most cases you should not change the theme as it will look odd in your blog. After you have your form created click “Save” at the upper right hand corner.

Get The Embed Code

Next, whist still in the Create Form page, click on “More Actions” and then click on “Embed” from the drop down. This will give you one line of HTML you need to paste into your post. In WordPress you will have use the “HTML” editor instead of the Visual Editor. Its recommended you save this for last when creating your Post or Page as wordpress likes to edit your HTML and break things. You might have to change the width and height of the code so you don’t have to scroll and so the form fills the design of your site. Save/Publish your Post or Page and you are ready to roll!

embed How to Embed Google Docs Forms on your WordPress Blog

Start Getting Data

Now that you have your form you can access who has posted in your form by returning to Google Docs and clicking on your form and clicking “See responses”. You have two options: “Summary” and “Spreadsheet”. Summary gives you Dashboard with stats and more simplied results where Spreadsheet gives you all of the data in a big spreadsheet.

spreadsheet How to Embed Google Docs Forms on your WordPress Blog

Troubleshooting

Sometimes the form can give you problems…. lets solve them:

It removes my iframe and leaves only “Loading …”

By Default WordPress doesn’t allow iframes in the post (which is what the code given to you by Google Docs is). Use the Embed Iframe plugin and their syntax: [iframe SUPERLONGURL 760 800] Replace SUPERLONGURL with the url starting with https://spreadsheets… in the iframe tag and ending before the “. 760 is Width and 800 is height of the iframe.

The Form overlaps parts of my blog/website

The Width is too much you need to make it smaller until it fits into the area designated for the post/page content.

email


I am a young entrepreneur that strives to create the next generation of website applications and design. Fueled by the passion I have for creativiy I am blazing new trails in Web Developent and Design industry. This year has become a focus in the design and development of WordPress as it is becoming one of the most powerful platforms available.

Share This Post

Related Articles

  • Anonymous

    Hey Jonathan. Thanks for this amazing post. I never knew you can do that with Google docs and wordpress. This is so cool.

  • http://www.AlinaNavarro.com AlinaNavarro.com

    Wayyyy toooo cool Jonathan. I love your detailed instructions. You made it easy to follow and apply. I am just begining to get my ‘Blogtude’ on, so I’d love to know if this is to be used for surveys or just doc shares. I’d love to see an example of a blog using one. Any recommends?
    Thanks Kiddo!! xo

  • http://www.facebook.com/people/Imi-Chitterman/765700383 Imi Chitterman

    Hi i am wondering if you can do a video where the data that comes through the form is also displayed on to a the word press page.
    Regards

  • http://www.taxi4hire.com Sharif

    Thanks for this post very simple instructions.

  • http://twitter.com/sbhsbh Steve Hughes

    Thanks Jonathan.  Followed to a T, but preview shows as blank.  When I go back to the Visual tab it shows the box, with a very small folder in middle.  Any thoughts?

  • John Anderson

    Great.

    Try also this tech tip on how to embed Webforms to your WordPress

    http://blog.caspio.com/tech_tips/tech-tip-how-to-embed-web-forms-in-wordpress/

Facebook

Twitter

Google Plus

YouTube