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 practise 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 of 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”.
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 doing 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).
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”.
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 settings tab above our question box. Then in “Responses”, select the slider, “Limit to One Response”.


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 think 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 extend the “Presentation menu” and select “View results summary”.

Preview Edit
Go ahead and preview now and see what your Form would look like on its own. To do this, click the eye button in the top right.
Once the form loads in a new tab. Go through the survey and try it out.
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.”
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.
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.
Gutenberg WordPress Editor
In the new WordPress 5.0 Gutenberg Editor, create a new block. Add “Custom HTML” and paste in the iframe
HTML.
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.
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 instalment!
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.