Creating a Short Google Form Survey and Embedding it into a WordPress Post – Part 1 of Google Forms in WordPress with Live Chart Project

Google Forms, WordPress,  HTML5

Note: This is the beginning of a larger project. Each part of the project is self contained if you wish to reference just one particular aspect. Alternatively, you can follow along with the project to practice workflow and learn about Google Forms, Sheets, WordPress integration and a little HTML5 and Javascript.

Intro

Welcome to Part 1 in our Google Forms in WordPress with Live Chart Project. By the end our project our goal is to embed a Google Form survey into a WordPress post.

In this post, we will look at how to create a simple Google Form to run a survey asking my viewers what paid version of Google Suite they use or if they simply use the free Google Apps services like Google Sheets, Gmail, Google Docs, Google Drive, etc.

The end result of this stage will look like this:

Feel free and complete the survey for fun and happiness.

Creating a Form

To create a form your best option is to create a working folder in Google Drive. This way everything is in one place (We’ll also be adding a Google Sheet in future episodes of this project).

Once you have created your folder, mouse right-click in the empty folder space and a selection menu will appear. Move your mouse down to hover over “More” and a child menu will expand with the option to select “Form”.

Create Google Form

Creating a Question

Once your new blank form loads, you will see a title bar with “Untitled Form” on it and an untitled multiple choice question with one question option ready.

First we will change the title. When do this, we can go up and click the Form file name in the top right and it should automatically change to the title name (You can edit this if you want, too).

Google Form Title

Next, well will add our question and our four options – one for each Google Suite Package and one for the free users.

We also want to force the user to answer the question so we will set the toggle down the bottom right of the question to “Required”.

Google Forms Question Editing

Editing our Question Page

We only have one question for our users so now we are going to edit our page.

Theme Edit

First, that Purple theme does not really go with my website theme so I’ll go ahead and change it. There is a little artist’s palette symbol up in the top right of the page. Click on that and you will get the Themes sidebar. I’m gonna change my theme colour to Blue. All the secondary and tertiary colours will be automatically adjusted. You can also pick a background image if you wish too.

Settings Edit

We will also go ahead and change the settings so that our users can only take the survey one time. To do this, we click on the cog in the to right of the screen. Then in “General Setting”, select the check box marked, “Limit to One Response”.

Google Form Edit Settings

Note here that if you limit users to one response then they will be required to log into Google. This is fine for our case because we are conducting a survey of Google users, but it might not be useful your case if you thing most of your users don’t have a Google account.

Summary Chart

For now we will give our users the opportunity to review the summary chart to see what everyone else selected.

Thinking ahead, the Summary Chart is not an ideal way for our users to review the results of the survey in an embedded page in our WordPress page. Why? Because it takes them away from our website with an extra browser tab.

In Part 2 of Google Forms in WordPress with Live Chart Project we will change this and add a live chart under our survey for our readers so that everything is in one place for them.

Go back into Edit Settings and check “See summary charts and text responses” and then save.

Google Form See Summary Chart and Text Responses

Preview Edit

Go ahead and preview now and see what your Form would look like on it’s own. To do this, click the eye button in the top right.

Google Form preview

Once the form loads in a new tab. Go through the survey and try it out.

Google Forms Preview

If you want to preview again, you will need to go back to your Google Forms edit page and click the “Responses” tab then click on the vertical ellipses on the top right and click “Delete all responses.”

Google Forms Delete Responses

Embedding our Google Form into a WordPress post.

When we are happy with our form, we can embed our little Survey into our WordPress post.

In our Google Forms editor we first click the Send button in the top right. A pop-up window will appear. In the top tabs click the embed icon “< >”. Select the iframe html and click copy.

Google Form Get Embed HTML

Next, go into your WordPress post editor.

WordPress Classic Editor

Click from the ‘Visual’ tab to the ‘Text’ tab and paste in your iframe code where you want it in your post.

Wordpress embed google Form

Gutenberg WordPress Editor

In the new WordPress 5.0 Gutenberg Editor, create a new block. Add “Custom HTML”and paste in the iframe HTML.

Embed Google Form in WordPress Post Gutenberg

Go ahead and save your draft and preview that Google Form in your WordPress post! I’ll use the classic editor for the GIF below.

Preview Google Form in WordPress Post

Conclusion

There you have it! You’ve just created a Google Form and embedded into a WordPress post.

In Part 2 of Google Forms in WordPress with Live Chart Project we are going to add an interactive Pie Chart showing the responses from our users of the survey. We’ll even get that Pie Chart to update every 30 seconds.

Subscribe so you don’t miss the next installment!

So what do you think you will use this for? I love to hear what projects you are all up to and how you are using these tutorials. Let me know in the comments below.

 

~Yagi.

2 thoughts on “Creating a Short Google Form Survey and Embedding it into a WordPress Post – Part 1 of Google Forms in WordPress with Live Chart Project”

Leave a Reply