High Cumulative Layout Shift (CLS)

Hello @tuempelkoenig

If the form cache setting is enabled on the plugin settings page, the form is generated on the server-side by reducing the CLS.

The free plugin version does not include this feature, but you have the alternative of assigning a class name to the form to apply a minimum height.

You can assign a class name to the form through its shortcode, for example:

[CP_CALCULATED_FIELDS id="1" class="form-a"]

And define the new class name through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png) as follows:

.form-a{min-height:950px;}

Best regards.

Hello @tuempelkoenig

Please, try the following modification:

1. Enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

#fbuilder{visibility:hidden;}

2. Insert an “HTML Content” field in the form with the following piece of code as its content:

<script>fbuilderjQuery(document).one('showHideDepEvent', function(){
fbuilderjQuery('#fbuilder').css('visibility', 'visible');
})</script>

3. Finally, press the “preview” button to update the form cached copy.

Best regards.

Hello @tuempelkoenig

You can change the event to window.onload

<script>fbuilderjQuery(window).on('load', function(){
fbuilderjQuery('#fbuilder').css('visibility', 'visible');
})</script>

Best regards.

Hello @tuempelkoenig

I’m sorry, I’m trying to solve your issue without checking it because the form is private.

Actually, the previous solution should work even if you reload the page:

<script>fbuilderjQuery(document).one('showHideDepEvent', function(){
fbuilderjQuery('#fbuilder').css('visibility', 'visible');
})</script>