fredericalpers commented 2 weeks ago

Script Loading issue for onoffice-captchacontrol.min.js when form is placed in the footer

User Story

As a website administrator, I want to ensure that all scripts required for the proper functioning of forms load correctly regardless of their placement within the website, so that users can interact with forms seamlessly, even when they are placed in the footer section of the site.

The website utilizes the onOffice for WP-Websites plugin that includes a script called onoffice-captchacontrol.min.js, which is responsible for handling reCAPTCHA functionality. This script is essential to ensure form submissions are protected from spam and automated submissions. The issue arises when a form created with the plugin is embedded in the footer of the website. While forms placed in the main body of the page function correctly, forms placed in the footer do not load the script as expected, resulting in errors.

Current behavior

When a form is placed outside of the footer section (e.g., in the main body of the page), the onoffice-captchacontrol.min.js script loads without issue.
When the same form is placed within the footer section of the site the script onoffice-captchacontrol.min.js does not load correctly.
Errors such as "onOffice is not a function" or "onOffice is not defined" are displayed in the browser's console.

This prevents the form from functioning properly, particularly regarding the reCAPTCHA verification.

Steps to Reproduce:

Navigate to the plugin interface and create a new form. Ensure that reCAPTCHA is enabled both in the plugin settings and in the specific form configuration.
Place the generated shortcode for the form in the footer section of the website.
Load the webpage and inspect the console for JavaScript errors. Note the presence of errors such as "onOffice is not a function" or "onOffice is not defined."

Expected Behavior:

The onoffice-captchacontrol.min.js script should load properly, regardless of whether the form is embedded in the main content or the footer.
The reCAPTCHA functionality should work seamlessly, ensuring the form's usability and security.

fredericalpers commented 2 weeks ago

Update: For some of our clients the script is also not loaded on the property detail page inquiry form.

dai-eastgate commented 2 weeks ago

Update: For some of our clients the script is also not loaded on the property detail page inquiry form.

I will check and fix it. Thanks!

yeneastgate commented 2 weeks ago

@fredericalpers If you want the file "onoffice-captchacontrol.min.js" to function properly when placing the form in the footer, it currently cannot be loaded as needed because it requires checking the shortcode in the page content. If you want it to load in the footer, we would have to revert to the previous method of loading all CSS and JS files. Please let me know your thoughts on this issue.

fredericalpers commented 2 weeks ago

@yeneastgate Thank you for investigating this issue!

We'll need to discuss this internally to ensure we address it in the best way possible. I'll follow up with you once we've had a chance to review.

yeneastgate commented 2 weeks ago

@yeneastgate Thank you for investigating this issue!

We'll need to discuss this internally to ensure we address it in the best way possible. I'll follow up with you once we've had a chance to review.

I got it, thanks!

fredericalpers commented 2 weeks ago

@yeneastgate I'm assuming this is the same problem for the property detailpage?

yeneastgate commented 2 weeks ago

@yeneastgate I'm assuming this is the same problem for the property detailpage?

Yes. The bug (script onoffice-captchacontrol.min.js does not load properly.) will occur if we place the shortcode for the details in the footer section

andernath commented 1 week ago

@yeneastgate @dai-eastgate

What about loading the scripts which are required for a form, when the template of the form is rendered? I tried it on branch: https://github.com/onOffice-Web-Org/oo-wp-plugin/tree/Bugfix/P%23121511-load-form-scripts-in-footer

It is not final and I still have Issues with captcha, but what do think? Any Pros or Cons?

yeneastgate commented 1 week ago

@andernath This appears to be an effective solution. Loading scripts when the form template is rendered seems like a reasonable approach to address the issue. This method eliminates the need to check shortcodes to load scripts. Pros: Reduces unnecessary script loading and ensures that script dequeueing is done correctly. Cons: So far, I've tested everything, and it all works well. So, I will refactor the loading script based on your suggestion. Thanks.

fredericalpers commented 1 week ago

@yeneastgate please go ahead, thank you :)

dai-eastgate commented 2 days ago

@fredericalpers Please take a look at my demo video and let me know your opinions. Thanks!

https://github.com/user-attachments/assets/21ab2fd7-da8a-416b-8df3-26c47dd395cf

fredericalpers commented 2 days ago

@dai-eastgate thank you! we will review this as soon as possible :)

onOffice-Web-Org / oo-wp-plugin