Forum Moderators: open

Message Too Old, No Replies

Google embed form not working on AMP

         

mg100

5:19 am on Nov 15, 2019 (gmt 0)

5+ Year Member



I am trying to put an embed Google Form on my AMP page but when I go to the AMP page the form shows a blank box(where the form suppose to be).

Anyone know how to fix this?

phranque

5:55 am on Nov 15, 2019 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



welcome to WebmasterWorld [webmasterworld.com], mg100!

are you using an <amp-iframe> [amp.dev] element?

jane_eyre

3:24 pm on Nov 15, 2019 (gmt 0)

5+ Year Member



Can you share your code? Also, did you check your console for error messages ?

mg100

4:19 pm on Nov 15, 2019 (gmt 0)

5+ Year Member



I am actually not using the amp-iframe.

Here's the code that I am putting in. The only thing I adjust is the width="100%". It usually says something like 640.

<iframe src="https://docs.google.com/forms/d/e/arbitraryalphanumericstring/viewform?embedded=true" width="100%" height="678" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Also, console has not picked it up yet because it didn't crawl yet. I was actually trying to avoid it being crawled like this so I don't get hit if some penalty or something.

[edited by: phranque at 11:35 pm (utc) on Nov 16, 2019]
[edit reason] exemplifying url [/edit]

phranque

11:33 pm on Nov 16, 2019 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I am actually not using the amp-iframe.

that would explain why you aren't seeing anything.
you should start here:
Include iframes [amp.dev]
Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

The basics

You can display an iframe in your page by using the amp-iframe element.

mg100

12:16 am on Nov 17, 2019 (gmt 0)

5+ Year Member



Thanks for the reply. So, I just added the AMP iframe code the header and edit the code below to this:

<amp-iframe src="https://docs.google.com/forms/d/e/arbitraryalphanumericstring/viewform?embedded=true" width="100%" height="678" frameborder="0" marginheight="0" marginwidth="0">Loading…</amp-iframe>

So, now the big white box is gone but all I see is "Loading.." where the Google form suppose to be.

mg100

12:19 am on Nov 17, 2019 (gmt 0)

5+ Year Member



I noticed this from the page you linked to.
Requirements for amp-iframe
Can only request resources via HTTPS, and they must not be in the same origin as the container, unless they do not specify allow-same-origin.

My AMP is not https. Does that mean this wont work?

phranque

8:07 am on Nov 17, 2019 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I would read and follow all the requirements specified in the doc.
Did you include the necessary amp script in the document head?
You can find the full amp-iframe specification here:
[amp.dev...]

mg100

4:35 pm on Nov 17, 2019 (gmt 0)

5+ Year Member



Yes, I read the whole document. It just says "Loading..." where the Google Form suppose to be: http://example.com/amp/purple-widget-coupon.html (see on mobile)

Steps I took so far. 1. I put this code in the header of the AMP page

<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

I put this Google Form code on the page.

<amp-iframe src="https://docs.google.com/forms/d/e/arbitraryalphanumericstring/viewform?embedded=true" width=“100%” height="678" frameborder="0" marginheight="0" marginwidth="0">Loading…</amp-iframe>




[edited by: not2easy at 6:37 pm (utc) on Nov 17, 2019]

[edited by: phranque at 12:20 am (utc) on Nov 18, 2019]
[edit reason] Terms of Service [webmasterworld.com] [/edit]

NickMNS

6:02 pm on Nov 17, 2019 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



According to the terms of WW you are not supposed to post specifics of your site (eg: url)
But since you did I checked it out real quick and the console is showing a several relevant errors that need to be addressed.
The most relevant being the error
"refused to be displayed https://accounts.google.... ... in a frame because it is set 'X-Frame-Options' to 'deny'. "

I'm not sure how you can overcome this. Google is preventing the form from being included in an IFrame, this is not specific to AMP this for any IFrame. I suppose the only choice you would have would be to include a link to the Google Form page. Alternately, you would have to build your own form using the AMP forms.

There are some other errors, so you need to check your console in Chrome or other browser.