AMP issue

Hello @greedymind,

Thank you very much for letting me know the issue with the wwww, I’ll publish an update to solve it. However, you can follow the steps below:

1. Open the “/wp-content/plugins/calculated-fields-form/inc/cpcff_auxiliary.inc.php” file with the text editor of your choice.

2. Go to the piece of code:

else $url = preg_replace('/^https:\/\//i', 'https://wwww.', $url);

and edit it as follows:

else $url = preg_replace('/^https:\/\//i', 'https://www.', $url);

Concerning to the use of https, it is a requirement of AMP, only URLs with https can be loaded into iframes.

An amp-iframe must only request resources via HTTPS, from a data-URI, or via the srcdoc attribute.

https://www.ampproject.org/docs/reference/components/amp-iframe

Best regards.

Thanks for the link to the AMP docs. And I guess you have published the update already, so I’ll just update it. Thank you for the time.

Hello again,

I just got myself an SSL cert and the pages are now assessible with https, but still the forms won’t load. I get this giant black pacman image, please see the screenshot: https://prntscr.com/hnqkz1. The URL, the plugin tries to load is working fine when I access it in a new tab. (URL: https://www.damnripped.com/?cff-form=45&cff-form-height=500#amp=1)

Ref page: https://damnripped.com/calculate-body-fat-calculator-included/amp/

Also, why is the height set to 500? can it be set to auto? meaning take up the height the form wants?

Thanks.

Hello @greedymind,

I’ve visited the AMP version of your webpage using different devices (an Android mobile and an iPad) and the form was loaded fine, please, look the screenshots in the following links:

https://wordpress.dwbooster.com/customdownloads/2017/12/15/android-mobile.png
https://wordpress.dwbooster.com/customdownloads/2017/12/15/ipad.png

However, as AMP loads the content of iframes when the tag is in the viewport it can take a little more than time.

Concerning to the height, convert it into an auto-height is not a simple process, but you can increase it including an additional attribute in the shortcode:

[CP_CALCULATED_FIELDS id="45" amp_iframe_height="800"]

Best regards.

Hello,

Thanks for looking into this. Yes, the forms loaded successfully but took a very long time. Is there a way to optimize this?

Also thanks for pointing out the additional shortcode attribute, I’m guessing including it won’t affect the form’s height when the page loads normally?

And I saw something in the AMP docs stating that it’s possible to resize an amp-iframe at runtime? Please see the screen shot: https://prntscr.com/hns62u

Maybe you’ll implement it in a future update, something to look forward to. ??

Hello again,

I just tried to view the form in a variety of mobile devices and the form is actually loading too too slow, takes almost 20 seconds after the web page loads completely. Is there anything we can do speed up the process?

Also, please let me know how to change the big pacman image to a text stating “Loading, Please wait” or to some other image. Because I don’t want the users to think that there is some kind of issue with the form and leave the site before the form loads.

Thanks.

• This reply was modified 6 years, 11 months ago by Damn!.

Hello @greedymind,

I’m working in an update trying to increase the loading speed.

Concerning the icon, it is included with the piece of code:

<amp-img src="data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjI0IDcuNzZDMTUuMDcgNi41OSAxMy41NCA2IDEyIDZ2NmwtNC4yNCA0LjI0YzIuMzQgMi4zNCA2LjE0IDIuMzQgOC40OSAwIDIuMzQtMi4zNCAyLjM0LTYuMTQtLjAxLTguNDh6TTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDIgMC04LTMuNTgtOC04czMuNTgtOCA4LTggOCAzLjU4IDggOC0zLjU4IDgtOCA4eiIvPjwvc3ZnPg==" placeholder layout="responsive" width="50" height="50" />

into the “/wp-content/plugins/calculated-fields-form/inc/cpcff_auxiliary.inc.php” file.

Best regards.

Hello,

I see you have released an update to imporve the form’s load time in AMP pages, I’m yet to install the update. However, I have another issue now. I received an email from google stating that

“Google systems have detected that some of your AMP pages do not meet our guidelines; therefore these pages are not eligible for AMP-related features in Google Search.”

“Invalid CSS stylesheet (Critical)”

Details:
The text (CDATA) inside tag ‘style amp-custom’ contains ‘CSS !important’, which is disallowed.
AMP URL:
https://damnripped.com/calculate-body-fat-calculator-included/amp/

Upon viewing the source I see this #cff-form-iframe{margin:0 !important;}

I guess this is what is causing the issue. Please look into this. Thanks.

PS: The error has occured only on this page which has a CFF form within it. All other AMP pages have been indexed without issues.

• This reply was modified 6 years, 11 months ago by Damn!.

Hello @greedymind,

I’ve published an update that should fix the issue with the !important declaration in the css rules.

Concerning to the resizable amp-iframes, I don’t have gotten create a resizable amp-iframe with the “Accelerated Mobile Pages” plugin installed in the website.

Best regards.

@codepeople

Thanks a lot. I just updated the plugin and although google might take a while to recrawl the page, I re-checked on google’s AMP test and the page came out with no errors. I guess now Pages with CFF forms are officially valid AMP pages. ??

Best,

• This reply was modified 6 years, 11 months ago by Damn!.

Hello @greedymind,

Thank you very much for letting me know the pages are now officially valid AMP pages.

Best regards.

One more quick question, I’m having a bit of a trouble replacing the pacman with text? Could use some pointers on that.

Hello @greedymind,

The pacman you are referring is the tag:

<amp-img layout="fill" src="..." placeholder></amp-img>

And it is required because I cannot ensure the amp-iframe tag appears in the location required by the amp restriction rules (more information in the following link:
https://ampbyexample.com/components/amp-iframe/)

Best regards.

Ok thank you. For now I have removed the image. Now the default AMP loader is being displayed. I just want to know if I’m breaking any AMP rules by removing that image, meaning leaving the source empty (src="").