Freeform - Grouping fields from the form builder

Question

I'm using Freeform for a fairly large form. I'm trying to use a combination of the form builder (Composer) feature and custom HTML and I'm not sure it's possible! I'll give you the scenario and you can tell me if I need to write it all without the Composer.

I want the desired layout I have in the form builder but I need to wrap some field rows (in a <fieldset> or <div> so I can hide them (so I can show them when certain radios are checked).

I don't see how I can add this to the middle of the {% for row in form %} loop as there will be 10+ rows that need wrapping, including custom HTML field for the legend. i.e. there is no grouping mechanism I can check against that I can see.

I'd love to hear any suggestions so I can still leverage some of the form builder :)

Many thanks.

Answer 1

It sounds like what you would ultimately need here is some sort of grouping of fields feature, which Freeform currently does not have. So I would lean towards saying there isn't a way you can do this purely in Composer, unless of course you had a very stripped down Formatting template, and relied heavily on HTML blocks inside Composer to simulate what you're after. :)

Answer 2

Not very proud of my way of approaching it, but I had similar requirements and what I ended up with is a bunch of arrays that I define in the template before looping through the form’s rows and fields.

Those arrays are simple key-value pairs, where I map values for field group headings, JavaScript hooks for conditional fields, rules for frontend validation to a key that’s composed from the form handle and field handle. Basically allows me to conditionally modify my markup for each individual field.

Basic forms can still be setup with the Composer alone, but to enhanced in this fashion we need to write code.

{% set groupHeadings = {
    offerBav_employerName: 'foo',
    offerBav_titles: 'bar',
    contact_titles: 'bar',
    contact_message: 'baz',
} %}

{% set validationRulesMap = {
    email: 'email',
    birthday: 'date_format:DD.MM.YYYY',
    employerZip: 'digits:5',
    inceptionDate: 'date_format:MM.YYYY',
} %}

{% for row in form %}
    {% for field in row %}
        {% set handle = form.handle ~ '_' ~ field.handle %}

        {% if handle in groupHeadings|keys %}
            <h3 class="c-form__subheading">{{ groupHeadings[handle] }}</h3>
        {% endif %}

        {#
         # Output fields with JavaScript hooks
         # and dynamically generated classes.
         #}
    {% endfor %}
{% endfor %}