[4.x] Add support for looping over blueprint sections in frontend forms

[jesseleite]

Some have expressed wanting to render sections of fields in frontend forms. Now that we have blueprint sections within blueprint tabs, this is very doable...

This PR adds a sections array to the form tag, so that users can render <fieldset> blocks (for example, as per Mozilla's docs here)...

{{ form:contact }}
    {{ sections }}
        <fieldset>
            <legend>{{ display }}</legend>
            {{ if instructions }}
                <p class="instructions">{{ instructions }}</p>
            {{ /if }}
            {{ fields }}
                <label>
                    {{ display }}
                    {{ if validate | contains:required }}
                        <sup class="text-red">*</sup>
                    {{ /if }}
                </label>
                <div class="p-1">{{ field }}</div>
                {{ if error }}
                    <p class="text-gray-500">{{ error }}</p>
                {{ /if }}
            {{ /fields }}
        </fieldset>
    {{ /sections }}
    <button>Submit</button>
{{ /form:contact }}

Which allows for styled rendering of sections (pardon my crude css)...

[aerni]

Thank you! This is awesome! Support for tabs would be great too. Then we could use tabs to build a multi-step form and still use sections for each step.

[jesseleite]

Good feedback thanks! We're going to hold off on supporting both blueprint sections AND tabs for now, as that would add yet another layer of complexity/confusion for users.

That said, this PR is very much a step in that direction; To give people more options in the front end for rendering sections of fields (whether that be <fieldset> groups, or multi-step via custom JS driver, etc).

We have aspirations of circling back and providing native multi-step support in the default alpineJS form driver, at which point blueprint tabs or "form steps" on the CP side might feel much more palpable.

Until then, multi-step is still very doable without this PR even, as the form:create tag doesn't limit what kind of markup you wish to render 🙂

[aerni]

I figured. Just wanted to place the idea here. Thanks again! This is going to be great!

[robdekort]

This is great!

[robdekort]

Hey @jesseleite is it an idea to make the section instructions available as well to Antlers? Currently you can set one in the form builder, but not use it in the frontend.

[robdekort]

Another issue I just noticed is you can't seem to not give a section a display name. This results in an Undefined array key "display" error on the frontend.

Ideally you could leave it empty, for example if you only use one section you probably don't want to render the display name of that section. The blueprint builder seems to support this currently and it seems the default behaviour.

[what-the-diff]

PR Summary

• New method for field sections
  Added a new method that retrieves sections of fields based on the blueprint definitions.
• Updated getFields method
  The getFields method now supports accepting an array of fields optionally, which is utilized by the new section-retrieving functionality.
• Improved form creation for tests
  Optimized the form creation process in tests by allowing customization of blueprints and handles per test case, reducing redundancy and enhancing scalability.

[robdekort]

Lovely. This fixes all the issues I found regarding this PR. Have a good weekend all!