Form not loading

Hello @pexel

The behavior you’re experiencing may be related to how you’ve configured the WP Rocket plugin. Specifically, caching and combining/minifying JavaScript files can cause issues if:

• Files requiring jQuery fail to load due to caching.
• Minification breaks generated JavaScript files that lack semicolons at the end of each line.

Also, check if you’ve enabled background preloading of cached resources. This process may struggle to identify dynamically loaded resources.

What option do you have selected in the “Script load method” attribute in the “Troubleshoots Area & General Settings” section on our plugin? You can change the option selected and try again.

Best regards.

Hi,
My WP Rocket configuration file is installed, and my CFF configuration file is set up as shown in the image. I really want to find a permanent solution to this issue because it has become extremely frustrating. I’m tired of clearing the cache every hour. I hope we can find a lasting solution.

Wp-rcoket settings folder link

Hello @pexel

You can try the following options. Exclude the URLs with jquery from any delaying, deferring, or other optimization process. If the issue persists, you can include the iframe="1" attribute in the form shortcode. Finally, you can exclude the page that contains the form from the WP Rocket cache.

Best regards.

Hello,

I’ve tried every possible method, but I don’t want to use an iframe because it creates an additional link.

• I added all JS files to the JavaScript delay exclusion list, but it didn’t work.
• I excluded CSS files, but the issue persisted.
• I added htaccess rules to exclude CFF form paths from caching, but that didn’t help either.

It seems there is an incompatibility between WP Rocket and the form plugin. However, I’m wondering: Are the JS files delayed, or is the CSS not loading first, preventing the form from appearing?

How can we find a permanent solution to this issue?

Hello @pexel

I’m offering you permanent solutions, such as using iframes or excluding the page from the cache, but you prefer not to use them.

I’ve configured our plugin on multiple clients’ websites using WP Rocket with no problems. Note it can be related to third-party plugins when WP Rocked generates the automatic cached JS files.

If you need personalized technical support, you can contact us through the plugin website. Contact Us.

Best regards.

Your technical support is undoubtedly excellent—you provide assistance in every aspect, and we also make mistakes. I’m trying to solve this issue through collective reasoning.

All my pages contain a CFF form. If I remove them, the cache system becomes meaningless. However, when I use an IFRAME, a new resource link is generated each time. If I disable JS defer, delay, and minification options, the page speed drops significantly (Google PageSpeed).

To find a more reasonable solution, I need to determine which JS files should be excluded from defer, delay, and minification settings. In your opinion, which JS files should I exclude to resolve this issue definitively? JS defer, delay, and minification should work, but CFF-related JS files should be excluded. This might also apply to CSS. Honestly, I’ve tried every possible method.

Hello @pexel

The iframe alternative generates a unique additional URL per form. Based on previous experience, we only needed to configure WP Rocket to not combine, delay, or defer the jQuery API. In our plugin, we have selected the “Direct” option for the “Script load method” attribute, which is accessible through the “Troubleshoots Area & General Settings” section. After editing the field’s settings, you need to purge the WP Rocket and browser caches.

Best regards.

I am activating the “Direct” option and then monitoring the site to check if the forms load smoothly. I will update you on the progress. Thank you.

Right now, the forms are not loading at all when I select this option.

Hello @pexel

I recommended not delaying or deferring the jQuery library, but if you check the page source, you are deferring its files:

I have removed the defer attribute from the two files as you suggested. I will follow up and keep you updated on the progress. Thank you!

Hello,
After removing defer from two JS libraries, I initially observed that the mobile score dropped from 88 to 56. Additionally, the error shown in the image below is present.
For your information.

Unfortunately, this solution did not work, and some forms are still not loading.

Therefore, I reverted the settings back to their original state. ??

• This reply was modified 1 month ago by pexel.
• This reply was modified 1 month ago by pexel.

Hello @pexel

The error you mention is not caused by the plugin, but by your form implementation. You entered the following piece of code into an HTML Content field in the form:

fbuilderjQuery(document).on('formReady', function(){
  // Set the value of fieldname19 to the first day of January (01-01-yyyy)
  getField('fieldname19').setVal('01-01-' + TODAY().getFullYear());

  // Set the value of fieldname20 to January (01)
  getField('fieldname20').jQueryRef().find('option:eq(0)').prop('selected', true);

  // Set the value of fieldname21 to the current year (e.g., 2023)
  getField('fieldname21').setVal(TODAY().getFullYear());
});

But your form does not have a fieldname19 field.

If you remove a field from the form, you must edit the code you entered using it.

Best regards.

Yes, it was my mistake. You were right.

I would just like to ask you one thing, and I don’t want to take up too much of your time. Which JS files should not have defer enabled for the forms to load properly? If necessary, I will manually disable them within the theme.

Thank you.