Same form, multiple times on same page, not working / flagged as spam, duplicates not flagged correctly

[mnlmaier]

Describe the bug

Hello,

I've got an issue with multiple embeds of the same form on one single page (I've checked past issues, closest match could be #1450, though I do not get an error).

What's happening:

• Newsletter Form is displayed multiple times on same landing page
• User enters their email address in the first newsletter form
• Form is submitted via AJAX
• User is trying to use the second form, too (probably just "to be safe")
• Second form is either not sent at all, or will be flagged as spam because of CSRF mismatch

I got around this issue using this script / workaround, but this feels like something which should work out of the box — are there any plans to implement this?

Steps to reproduce

See above

Form settings

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

Craft CMS version

Craft Pro 4.11.1

Plugin version

2.1.23

Multi-site?

Yes

Additional context

No response

[engram-design]

Out of interest, are you using the newer, simplified cache-busting JS, or the more advanced on you linked to?

{% set form = craft.formie.forms.handle('contactForm').one() %}

{{ craft.formie.renderForm(form) }}

{% js %}
    // Wait until Formie has been loaded and initialized
    document.addEventListener('onFormieInit', (event) => {
        // Fetch the Form Factory once it's been loaded
        let Formie = event.detail.formie;

        // Refresh the necessary bits that are statically cached (CSRF inputs, captchas, etc)
        Formie.refreshForCache(event.detail.formId);
    });
{% endjs %}

Do note that needs to be included alongside every craft.formie.renderForm() call, and not just once on the page. That's because when rendering a form, they'll always be given a unique identifier (formId), so that the proper form is refreshed.