How to embed form with amp-iframe?

  • privacykumarforme
    Asked on February 18, 2020 at 10:29 AM

    Hey devs,

    I have an amp webpage with jotform embedded with iframe, now while submitting my page URL for google indexing and using test live URL service I met error saying "URL is available to Google, but has issues"

    and under this, I found error for "The tag 'iframe' should be replaced with an equivalent 'amp-iframe' tag."

    Now, this is what hindering only my page from submitting it for google crawling.

     

    How can I change the iframe to amp-iframe?

    I tried changing the tags to "amp-iframe' but JotForm disappeared and doesn't  loads, also if such a problem is happening with amp pages there must be any solution?

    Wating for your response, Thanks!

    Jotform Thread 2168318 Screenshot
  • privacykumarforme
    Replied on February 18, 2020 at 11:39 AM

    Since there was no reply! I have fixed the problem now and found the best solution for amp pages to integrate jotform easily. 

    SOLUTION?

    1>FOR ERROR REGARDING CUSTOM SCRIPT ON GOOGLE SEARCH CONSOLE

    :==> Just delete the part of javascript (2nd part) from the code provided for iframe integration


    2>FOR AMP-IFRAME TAG ISSUE

    :==> You need to convert your iframe to amp-iframe, but that may simply cause an error or your jotform may not be displayed.

    for this just copy-paste below code 

    <amp-iframe width=300 height=300

        layout="responsive"

        sandbox="allow-scripts allow-same-origin"

        resizable

        src="https://form.jotform.com/200452886345458"><!--put your jotform link in src value-->

      <div overflow tabindex=0 ></div>


    </amp-iframe>

  • Albert_G
    Replied on February 18, 2020 at 2:38 PM

    Hi privacykumarforme,

    Please accept our apologies for just responding now.

    We do our best to answer all questions on the form as soon as possible in the order they are received.

    We do not have an option to get AMP version of the form. Which-Form-Embed-Code-Should-I-Use

    But like you mentioned, you can just remove the script part and embed the form using the iFrame code.

    Getting-the-Form-iFrame-Code

    How to embed form with amp iframe? Image 1 Screenshot 20

    Hope this helps! But, please get back to us if you need further assistance. 

    Thank you.

  • privacykumarforme
    Replied on February 19, 2020 at 1:46 AM

    It's alright , we really love your services.


    Btw for amp pages I guess I have found the solution for jotform integration , as you can see above I have made use of <amp-iframe>

    Not a regular <iframe> 

    And this way amp pages loads as usually fast and Google search console doesn't throws any error amp-pages. So I did for my site here

    Thanks 

  • jherwin
    Replied on February 19, 2020 at 4:20 AM

    Awesome, thanks for sharing the solution with us!

    Let us know if you need any further assistance. We will be happy to help :)