Add form.formId and form.configJson shortcuts

docs/template-guides/rendering-fields.md

@@ -6,7 +6,7 @@ The `renderField()` reqiures both a [Form](docs:developers/form) object and a [F
 ```twig
 {% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}
 
-<form id="formie-form-{{ form.id }}" method="post" data-config="{{ form.getFrontEndJsVariables | json_encode }}">
+<form id="{{ form.formId }}" method="post" data-config="{{ form.configJson }}">
     {{ csrfInput() }}
     {{ actionInput('formie/submissions/submit') }}
     {{ hiddenInput('handle', form.handle) }}
@@ -24,15 +24,15 @@ Let's run through a few things of note:
 - Some additional Twig content in the `<form>` element, such as `csrfInput()`, `actionInput()`. This is to ensure Formie can process the content of the form and create a submission from it.
 
 :::tip
-Make sure to use `formie-form-{id}` in your `id` attribute, and `data-config`. These are the only two things Formie needs to hook us the JavaScript used to handle forms, and are required if you're writing the `<form>` element in your templates.
+Make sure to use `{{ form.formId }}` for the `id` attribute, and `{{ form.configJson }}` for the `data-config` attribute. These are the only two things Formie needs to hook us the JavaScript used to handle forms, and are required if you're writing the `<form>` element in your templates.
 :::
 
 You can also use the handle of the field, for direct-access to the field you require.
 
 ```twig
 {% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}
 
-<form id="formie-form-{{ form.id }}" method="post" data-config="{{ form.getFrontEndJsVariables | json_encode }}">
+<form id="{{ form.formId }}" method="post" data-config="{{ form.configJson }}">
     {{ csrfInput() }}
     {{ actionInput('formie/submissions/submit') }}
     {{ hiddenInput('handle', form.handle) }}
@@ -62,7 +62,7 @@ You can also render fields in the layout you build in the form builder, with pag
 ```twig
 {% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}
 
-<form id="formie-form-{{ form.id }}" method="post" data-config="{{ form.getFrontEndJsVariables | json_encode }}">
+<form id="{{ form.formId }}" method="post" data-config="{{ form.configJson }}">
     {{ csrfInput() }}
     {{ actionInput('formie/submissions/submit') }}
     {{ hiddenInput('handle', form.handle) }}

docs/template-guides/rendering-pages.md

@@ -18,7 +18,7 @@ This may be particularly useful if you want control over the `<form>` element of
 ```twig
 {% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}
 
-<form id="formie-form-{{ form.id }}" method="post" data-config="{{ form.getFrontEndJsVariables | json_encode }}">
+<form id="{{ form.formId }}" method="post" data-config="{{ form.configJson }}">
     {{ csrfInput() }}
     {{ actionInput('formie/submissions/submit') }}
     {{ hiddenInput('handle', form.handle) }}
@@ -38,7 +38,7 @@ Let's run through a few things of note:
 - Some additional Twig content in the `<form>` element, such as `csrfInput()`, `actionInput()`. This is to ensure Formie can process the content of the form and create a submission from it.
 
 :::tip
-Make sure to use `formie-form-{id}` in your `id` attribute, and `data-config`. These are the only two things Formie needs to hook us the JavaScript used to handle forms, and are required if you're writing the `<form>` element in your templates.
+Make sure to use `{{ form.formId }}` for the `id` attribute, and `{{ form.configJson }}` for the `data-config` attribute. These are the only two things Formie needs to hook us the JavaScript used to handle forms, and are required if you're writing the `<form>` element in your templates.
 :::
 
 If you are using custom templates, you can also pass in a number of options to the rendering function. These don't have any effect on the default templates, but provide a means to pass additional data to your templates.
@@ -61,7 +61,7 @@ You can render rows for a page, rather than relying on the render function to ou
 ```twig
 {% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}
 
-<form id="formie-form-{{ form.id }}" method="post" data-config="{{ form.getFrontEndJsVariables | json_encode }}">
+<form id="{{ form.formId }}" method="post" data-config="{{ form.configJson }}">
     {{ csrfInput() }}
     {{ actionInput('formie/submissions/submit') }}
     {{ hiddenInput('handle', form.handle) }}

src/elements/Form.php

@@ -440,6 +440,22 @@ public function getFormConfig(): array
         ]);
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function getFormId()
+    {
+        return "formie-form-{$this->id}";
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getConfigJson()
+    {
+        return Json::encode($this->getFrontEndJsVariables());
+    }
+
     /**
      * Returns the form’s pages.
      *

src/templates/_special/form-template/form.html

@@ -17,7 +17,7 @@
     {% set defaultLabelPosition = create(form.settings.defaultLabelPosition) %}
 
     {% set attributes = {
-        id: "formie-form-#{form.id}",
+        id: form.formId,
         class: [
             'fui-form',
             "fui-labels-#{defaultLabelPosition}",
@@ -34,7 +34,7 @@
             'loading-indicator': form.settings.loadingIndicator ?: false,
             'loading-text': form.settings.loadingIndicatorText ?: false,
             'redirect': form.getRedirectUrl() ?: false,
-            'config': form.getFrontEndJsVariables() | json_encode,
+            'config': form.configJson,
         },
     } %}