How do I embed a Google Form into a WordPress page?

Question

WordPress doesn't support iframe embeds on its free sites, but it does provide a Shortcode option for Google Apps. It seems to automatically convert the iframe code from the older version of Google Drive into the Shortcode snippet, but it doesn't seem to work anymore now that Google has changed the form of its form URLs.

Is there an easier way to do this? Am I missing something here?

The old form looks like this:

<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=MyFormKey" frameborder="0" width="760" height="500" marginheight="0" marginwidth="0"></iframe>

and the new form looks like this:

<iframe src="https://docs.google.com/forms/d/MyFormKey/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

They work fine when tested at the W3 school HTML sandbox.

Answer 1

It's just a matter of pasting the iframe code. The following

<iframe src="https://docs.google.com/forms/d/DOC-ID/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

is converted to this after saving the post

[googleapps domain="docs" dir="forms/d/DOC-ID/viewform" query="embedded=true" width="760" height="500" /]

So, it's possible to just copy the document ID and write the shortcode directly.

Documentation.

Answer 2

Ok.. the iframe's would only be visible after you Publish the content, if you view the page while editing via the preview option, the iframe's would not be rendered on the page. If for any reason the iframes aren't rendering after you publish then you may consider an alternative option below.

If you would like to embed iframe of Google Form into a WordPress page here are two options:

1. Use Advanced iFrame WP plugin
2. the idea is to get the <form></form> element from the src of an iframe. here's how you can do that:

copy the src url & open link in browser https://docs.google.com/forms/d/MyFormKey/viewform? rt-click & view page src... copy everything from <form> to </form> clean the code by removing extra <br> <div> & styles.. so in the end you will have a simple striped up version of the form from iframe & there you go you can now you the <form> </form>in your site.

Hope this would help.

Bonus: add google recaptcha to google docs form