Unload warning always triggers, even without touching the form

[white-willem]

Describe the bug

The warning triggers on every page that has a form, even without touching any of the fields of the form in the front end.

Steps to reproduce

1. Enable the setting ' enable unload warning' in the forms tab of the Formie settings.

Form settings

• Multi-page form: Yes or No
• Submission Method: Ajax or Page Reload
• Client-side Validation: Yes or No
• Custom Form Templates: Yes or No

Craft CMS version

5.8.21

Plugin version

3.1.6

Multi-site?

Yes

Additional context

No response

[engram-design]

Can you share an export of your form? Or let me know what fields and integrations you have enabled, as that's likely a factor.

[white-willem]

Hi @engram-design Thanks for the quick reply. Can I send this via e-mail? There are some things in the settings I don't want to share.

[engram-design]

Absolutely - web@verbb.io.

[white-willem]

Thank you, just sent you the form in JSON.

[engram-design]

Thanks for that - no unload warning for me sorry to say. I can see you have ReCAPTCHA enabled, although I actually can't tell what version and settings you have, if you're able to confirm that just in case?

[white-ruud]

We use ReCAPTCHA Enterprise :)

[engram-design]

Sure, what Type, Badge Type and Script Loading Method settings do you use?

[white-ruud]

Oh yeah, right.

• reCAPTCHA Type: reCAPTCHA Enterprise
• Type: Score Based (v3)
• Minimum Score: 0.5
• Badge Type: Bottom-right (but hidden with css)
• Language: Auto
• Script Loading Method: Async & Defer

Basically the default settings if I remember correctly

[engram-design]

Seems pretty standard to me, and not sure why that's not triggering an unload warning on my end. I'll keep at trying to replicate that...

[white-willem]

Hi @engram-design , Here is an example of the problem on a live web page, it does not happen always, but here the steps:

1. Go to in private tab(incognito) on chrome: https://www.bluepeople-it.nl/
2. Press the button 'Neem contact op' in the header
3. The form is displayed here, clicking on some other link (without touching the form) will give the warning
4. If this does not give a warning, click a random other page and repeat from step 2.

Hope this helps

[engram-design]

I see you have Blitz installed, and also a script for refreshing the CSRF token. Which Formie does ignore, but it also looks like you've changed the default CRAFT_CSRF_TOKEN name to CSRF_TOKEN, which Formie doesn't cater for.

Fixed for the next release. To get this early, run composer require verbb/formie:"dev-craft-5 as 3.1.10".

Just by the way, I can't see the usual cache handling script on your page, so you'll want to consider including that.

I see your script for refreshing the token below, but that won't work for Formie.

<script>
  (function() {
    fetch('https://www.bluepeople-it.nl/index.php?p=actions/users/session-info', {
      headers: {
        'Accept': 'application/json',
      }
    }).then(response => response.json())
      .then(data => {
        document.querySelectorAll('craft-csrf-input')
          .forEach(element => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = data.csrfTokenName;
            input.value = data.csrfTokenValue;
            element.replaceWith(input);
          });
      });
  })();
</script>

[white-willem]

Hi @engram-design ,

Thanks for the fix and extra information! We will check it out!

[engram-design]

Updated in 3.1.11.