CLS Problem

Hello @klingbeil

Thank you very much for using our plugin. Our plugin renders the forms on the client side, and for this reason, there may be CLS problems. However, there are two alternatives:

You can activate the form cache on the plugin settings page.
Or, if the form cache is not an option in your case, you can estimate the height and pass it explicitly.

To activate the forms cache, go to the menu option “Calculated Fields Form > Troubleshoot Area & General Settings”, tick the “Form cache” checkbox, and press the “Update” button. After enabling the feature in the plugin settings page, press the “Settings” button corresponding to the form and then press the “Preview” button.

If the form cache is not available on your plugin copy, please, indicate the URL to the page that contains the form to get its height.

Best regards.

Form height 565px how do I define it to get around the cls issue. How to use this feed?

Hello @klingbeil

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

.cff-form{min-height:570px;}

Best regards.

Thank you for solving both our CLS issue and our style button issue. I am fascinated with this plugin more and more every day.

Thank you very much.

Best regards.

Hello,
Can we expand this code?
800px on mobile, 500px on desktop…
In some of our forms, while the query takes up less space on the desktop, it creates a problem because it comes together on mobile.

.cff-form{min-height:850px;}

Hello @klingbeil

Yes, of course.

You can enter the style definition as follows:

.cff-form{min-height:500px;}
@media (max-width:710px){
.cff-form{min-height:850px;}
}

Best regards.

Thank you

Where exactly is the form cache located on the plugin settings page? So what should we activate to get rid of the CLS problem?
Thanks

Hello @klingbeil

You can activate it in the “Calculated Fields Form > Troubleshoots Area & General Settings” menu option by ticking the “Activate Forms Cache” checkbox and pressing the “Update” button.

Once you activate the form cache, go to the form settings and press the preview button.

Best regards.

I couldn’t see the Activate Forms Cache field. I posted a screenshot of which one is happening.

Hello @klingbeil

Please indicate the version number of your plugin copy.

Best regards.

Version : 1.2.33

Hello @klingbeil

I’m sorry, but the “Form Cache” feature is included in the commercial distributions of the plugin.

With the free plugin version, you can reserve the space the form will take using min-height.

For example, if your form takes around 700px height, you can enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder{min-height:700px;}

Best regards.

Is this feature sold additionally? in package.