Skip to main content

Multiple Instances of the Same FormImproved in 5.9.15+

It's possible to load multiple Freeform forms on the same page. However, you may encounter issues such as certain features or field types not behaving correctly. You may also see form attributes duplicating in some cases.

​Instructions

If you encounter any problems, or wish to prevent potential issues, you can do so by following these best practices:

  • Enable AJAX for the form if you haven't already.
  • Set the id value under the attributes parameter for the Form query in your template with unique values.
  • Use the fieldIdPrefix parameter for the Form query in your template with unique values. This will add a prefix value to the id attribute on field labels and inputs, which prevents issues with forms having the same field handles, etc.
  • Specify a third argument (or second if not specifying custom attributes) in the form with a unique value. This will tell Freeform to create an entirely separate form instance with its own configurations that can be overridden. For example:
    • With custom attributes: {{ freeform.form("myForm", { whatever ... }, "two").render }}
    • Shorthand (no custom attributes): {{ freeform.form("myForm", "two").render }}

​Common Example

The below example will render the same form twice inside a template, but will assign each of them a custom form ID, form class, and prefix each field's input and label ID's with a unique prefix value:

<html>
<head></head>
<body>

{{ freeform.form(
  "myForm",
  {
    attributes: {
        id: "form-one",
        class: "class-one",
    },
    fieldIdPrefix: "form-one-",
  },
  "first-form"
  ).render
}}

<hr />

{{ freeform.form(
  "myForm",
  {
    attributes: {
        id: "form-two",
        class: "class-two",
    },
    fieldIdPrefix: "form-two-",
  },
  "second-form"
  ).render
}}

</body>
</html>

​Non AJAX Example

When AJAX is disabled for your form, you may run into issues where form ID's and other attributes may get overwritten by the first form instance's values. A workaround for this is to use the "=attribute": "whatever" approach on successive instances of the form.

<html>
<head></head>
<body>

{{ freeform.form(
  "myForm",
  {
    attributes: {
        id: "form-one",
        class: "class-one",
    },
    fieldIdPrefix: "form-one-",
  },
  "first-form"
  ).render
}}

<hr />

{{ freeform.form(
  "myForm",
  {
    attributes: {
        "=id": "form-two",
        "=class": "class-two",
    },
    fieldIdPrefix: "form-two-",
  },
  "second-form"
  ).render
}}

</body>
</html>
Page Feedback