Categories: FormsGeneralSheets

Embed Google Form, Sheet, Chart and Doc in WordPress

You have a plugin for that too, but adding more plugins to your WordPress site can make it slower, and trust me, you don’t need one for this. It’s easy and you don’t have to be an expert to throw in a Google Form or a chart from a Google Spreadsheet to your WordPress post.

Embed a Google Form in WordPress post (classic and block editor)

First, you need to get the embed code of the Form from the Google Form application. SO, go to your Form, click on the “Send” button. From the “Send form” dialog select the embed option “<>” and copy the code from the “Embed HTML” line.

As you can see from the dialog box, you can even set the Wight and the Hight of the embed window. You don’t have to worry about the width of the embed window, but you can adjust the height to fit your needs.

Embed Google Form using the classic editor

Next, if you are using the classic editor, you can’t just paste the code directly into the Visual editor, it won’t work. Go to the “Text” editor, where you can edit HTML code, and paste the embed code there.

Now, go back to the Visual editor and you will see your Google Form. You can also click on the “Preview” and check how your post is going to look. If the embed space is shorter than your form, and you want to get rid of the scroll just go back to the Text editor, locate the embed code and add a bigger number for the “height”.

Embed Google Form using the Block editor

Block editor is easier to work with, especially if you want to copy and paste things, it will auto-select the block that you need. But in this case, it won’t work, WordPress will inform you that it can’t embed: “Sorry, this content could not be embedded.”

The workaround is to add a “custom HTML” block and to paste the embed code there:

And here is the embed code:

You can also adjust the height of your Form here.

Here is an example of an embed form, as you can see I have adjusted the height of the embed window to fit the form and get rid of the scroll bar:

Embed a Google Sheet in WordPress post

To get the embed code for the sheet you must first publish the Google Spreadsheet. To do that select the option “Publish to the web” from the File menu. In the “Publish to the web” dialog box, select the “Embed” tab:

From the dropdown box, select the sheet that you want to embed and click on the “Publish” button. Next, Google Sheets will ask you “Are you sure you want to publish this selection?”, select Ok and you will get the embed code. To insert this code in your post just refer to the previous section on how to insert “Embed Google Form using the classic editor

” and “Embed Google Form using the block editor“.

If you just copy and paste this code, you will get a very small embed window, and the sheet will be barely visible. Similar to what I get here:

To fix this you must add a height and width to the embed code. Here is a sample code, you can copy and paste it from here:

 width="700" height="700"

Insert this code in the iframe tag at the end, right before the closing bracket, here is an example:

You can adjust the height and the width to your needs, and the embedded sheet will look like this:

Embed a Chart from Google Sheets in WordPress post

Similar to embedding a Google sheet, you must select to publish the chart and then get the embed code. To do that, go to your spreadsheet, select the chart that you want to embed and from the three-dot menu select “Publish the chart”.

In the “Publish to the web” dialog select Embed and then click on the Publish button, your code will be displayed. The chart will be selected automatically:

You have an option to embed the chart “Interactive” or as an “Image”. If you want your chart to update with new values from the sheet, select “Interactive”.

Next, paste the embed code in the post and you will have your chart embedded. Please refer to the previous section “Embed Google Form using the classic editor” and “Embed Google Form using the block editor” on how to paste the embed code in the post.

Embed a Google Doc in WordPress post

Embedding a Google doc is similar to embedding a Google Sheet. Select “Publish to the web” from the “File” menu, select “Embed” and get the embed code by clicking on “Publish”. Similar to embedding a Google Sheet, the code won’t have a height and width, so make sure to add it as I did in embedding a sheet (check the instructions for embedding google sheet).

Next, paste the embed code in your post and you are good to go. Of course, use the example for embedding a Google For using classic/block editor.

Here is my doc embedded:

SavoE

I'm an IT Manager and a big Google fan. In my free time, I like to write articles for How to GApps and help people on Google help communities (My Profile) and Quora. Check the About page for more. If you appreciate my work, maybe you can help me pay my hosting bill on Buy Me a Coffee.

View Comments

Recent Posts

Google Form to Slides + Save to Drive and/or send it in email as a PDF

On your request, as an addition to the how-to: Google Form to PDF (save to Drive and/or send it in…

1 day ago

Google Form Script to Automatically Add New Choices from “Other:” Form Responses

Whit this Google Form Script you can Automatically Add the "Other:" response from the multiple-choice question or checkbox question to…

2 months ago

Google Form to PDF (save to Drive and/or send it in email)

This solution will create a PDF file from a Google Form submission using a Google Doc as a template. You…

3 months ago

Automated e-card sender – Google Spreadsheet Script to Send Birthday Cards via Email

Sending an email to wish your customers a happy birthday it's usually a thing that big companies do. There is…

4 months ago

Google Form Script to AutoFill and Email a Doc Template

I have used a similar solution for creating documents from a template, but it was a spreadsheet script and used…

10 months ago

Add Timer to Google Form Quiz

Finally, I fund a way to add a timer to a google form, and yes, it forces the user to…

10 months ago