Integrations not working when rendering forms

[TomDeSmet]

Describe the bug

When rendering forms by passing the form object to the renderForm() function instead of the form's handle, the integrations such as ReCaptcha and Javascript check aren't working.

So doing this:

{% set form = craft.formie.forms.handle('payByEmail').one() %}
{{ craft.formie.renderForm(form, { formClasses: ['form'] }) }}

does not work, but doing this: {{ craft.formie.renderForm('payByEmail', { formClasses: ['form'] }) }} is.

The issue is that the payloads such as __JSCHK aren't send when using the form object.

Steps to reproduce

As described above.

Form settings

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

Craft CMS version

3.7.54

Plugin version

1.6.15

Multi-site?

Yes

Additional context

No response

[engram-design]

So this 100% works for me. I wonder if it might be due to using Vue on your site? This does affect how Formie's JS is fired, and how the subsequent elements and manipulated (VDOM vs DOM).

Are you able to double check the payload being sent to the server? This should look something like the below (for a page reload form)

Particularly the g-recaptcha-response and __JSCHK_112895011 params. Do they simply not exist, or are they blank? If the latter, it would mean Formie's JS is not updating the values correctly. It might in fact be updating the real DOM, whereas if your site uses Vue, you'll need to update the VDOM, because that's what the user is interacting with.

If you're using Vue (and in particular using v-show to lazy-load the form), its worth initializing Formie's JS after Vue is loaded, or after v-show is fired.

mounted() {
    var $form = document.getElementById("formie-form-1");

    window.Formie.initForm($form);
}

[engram-design]

Closing due to lack of response.