Freeform AJAX submission not working when two forms are on same page

Question

I have two Mailchimp subscribe forms on the same page – one in the sidebar and one in the footer. They are created as separate forms in the admin, albeit one a duplicate of the other, with different IDs on the forms and different IDs on the Mailchimp field. "Enable AJAX" is selected on both forms.

When I submit the first form from the sidebar, it submits successfully but reloads the page (No AJAX). The second form works correctly, submitting via AJAX.

Is this a known limitation of Freeform Pro or simply a matter of a duplicate ID or class that I'm missing somewhere? I'd like to have AJAX work on both.

Answer 1

Im running into the same issue. In my case they are completely different forms but both with "Enable AJAX" set to true. Could not find anything in the docs either.

This is the error I am seeing. I think I have it narrowed down to the honey pot field not being unique per form. Removing the honey pot setting, fixes the issue.

[DOM] Found 2 elements with non-unique id #freeform_form_handle:

Answer 2

You certainly can have more than 1 Freeform form loaded in the same page without issue. However, in some cases you may run into issues when doing so, such as AJAX not working correctly or some special fields not loading correctly. But it can be easily corrected by following these best practices:

• Be sure to specify the id parameter for the freeform.form template functions in your template with unique values.
• Be sure to use the fieldIdPrefix parameter for the freeform.form template functions in your template with unique values. This will automatically insert unique prefix values to field ID's rendered with field.render so you don't have to manually do this.