CFF customization on AMP pages

Hello @itexilion

Please, try entering the new style definition through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

If the issue persists, please, send me the link to the page to check your styles in detail.

Best regards.

Hello, yes, i have it both in style css and form css
#fbuilder *{font-family: ‘Cinzel RU’ !important;}

here is a test page
/test-page-amp-cff/
/test-page-amp-cff/?amp=1

• This reply was modified 3 years, 3 months ago by Jan Dembowski.

Hello @itexilion

You are not defining the styles in the correct way for AMP pages. Please, enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab:

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700;800&display=swap');
#fbuilder *{font-family: 'Cinzel', serif;}

Best regards.

As I said, i’m using custom font (modified Ciznel with cyrillic support). What should then be in url section? Link to ttf?

Hello @itexilion

Do you have tried the styles block I sent you previously? The AMP pages have some restrictions and requirements.

The forms in the AMP pages are loaded into iframe tags. So, you should import the font files as part of the form (from the “Customize Form Design” attribute). Furthermore, you must load the font files from a different domain than the website.

Best regards.

Ok, i understood. The code above worked, but had to change to font that support cyrillic.
Is there any workaround to set amp_iframe_height to fit the content height automatically?

Hello @itexilion

You can configure the height to apply through the form shortcode by using the amp_iframe_height attribute. More information by reading the following entry of the plugin FAQ:

https://cff.dwbooster.com/faq#q325

Best regards.

Maybee I described it wrong…
I know about amp_iframe_height attribute, which sets fixed height,
I need to show the whole form without scrolling iframe on both mobile and desktops. So the iframe height needs to be automatically ajusted to document height

Hello @itexilion

No, I’m sorry, that’s not possible. On the AMP pages, the page contained in the amp-iframe cannot modify the height of the container tag.

Best regards.

hello, I reached AMP plugin support and got following answer

It looks like it would be straightforward to do. All that is needed is to add resizable to the amp-iframe output in \CPCFF_AMP::get_iframe(), add the overflow button, and then inside of \CPCFF_AMP::amp_init() add the necessary postMessage call.

Maybe you could navigate me where can i modify this functions in plugin files?
Or add a ticket for the future funcions implementation.
For now i have disabled amp on pages with calculators, this are not primary pages.

Hello @itexilion

Thank you very much. I’ll take a look at the AMP support recommendation.

Best regards.

Hello @itexilion

We have published a plugin update that adjusts the form’s height on AMP pages.

Best regards.

Hello, i tried to enable AMP on page with CFF form, there is no scrollbar now, but only limited part of form is shown, it looks like overflow button to “show more” is missing.
Here are examples of AMP, there is a resizable example which works for me as well
AMP
and my test-page with this code
test-page

Hello @itexilion

There is an error in your form’s code that stops the height resizing.

Please, contact me in private to check the error in detail Contact Us

Best regards.

Done)