<p>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. :)</p>

CC BY-SA 3.0
2017-10-21T09:16:27.707Z
Ok thanks, is there somewhere I can add a feature request? Grouping and showing/hiding fields would be amazing!
MikeeBee
CC BY-SA 3.0
2017-10-23T02:54:45.603Z
I already have it on our internal feature requests list :)
Solspace
CC BY-SA 3.0
2017-10-24T06:37:47.263Z
Fantastic! Any rough idea on when it might be available?
MikeeBee
CC BY-SA 3.0
2017-10-25T22:56:47.247Z
Not sure... we still have to decide if we will actually add it to Freeform in the future. Unfortunately it's something that won't happen soon.
Solspace
CC BY-SA 3.0
2017-10-17T03:26:13.263Z
2017-10-17T03:26:13.263Z
Solspace
<p>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.</p>

<p>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.</p>

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

<pre><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 %}
            &lt;h3 class="c-form__subheading"&gt;{{ groupHeadings[handle] }}&lt;/h3&gt;
        {% endif %}

        {#
         # Output fields with JavaScript hooks
         # and dynamically generated classes.
         #}
    {% endfor %}
{% endfor %} 
</code></pre>

CC BY-SA 3.0
2017-10-21T09:22:37.523Z
Aaaah that looks pretty clever. I'll give that a try! Much neater than the conditional mess I was getting myself into. Although, it turns out now the client wants to be able to control this themselves, similar to the Wordpress plugin they had on the site before I rebuilt it so I'm not sure what I can do! Thanks for the suggestion.
MikeeBee
CC BY-SA 3.0
2017-10-27T03:50:38.420Z
Do you know a way you could wrap that group of fields in this way? I'm using some JS at the moment and curious if it can be done at the template level.
MikeeBee
CC BY-SA 3.0
2017-10-17T07:33:59.697Z
2017-10-17T12:33:10.920Z
2017-10-17T12:33:10.920Z
carlcs
<p>I'm using <a href="https://solspace.com/craft/freeform/" rel="nofollow noreferrer">Freeform</a> 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 <em>all</em> without the Composer.</p>

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

<p>I don't see how I can add this to the middle of the <code>{% for row in form %}</code> 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.</p>

<p>I'd love to hear any suggestions so I can still leverage <em>some</em> of the form builder :)</p>

<p>Many thanks.</p>

<plugin-freeform><solspace><freeform>
Freeform - Grouping fields from the form builder
# Freeform - Grouping fields from the form builder

(Asked by: username_0 on 2017-10-16)

I'm using [Freeform](https://solspace.com/craft/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  or  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.

**Tags:** plugin-freeform, solspace, freeform


---

## 2 answers

### Answer by username_1 on 2017-10-17. Score: 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. :)

> **Comments:**
> **username_0**: Ok thanks, is there somewhere I can add a feature request? Grouping and showing/hiding fields would be amazing!  
> **username_1**: I already have it on our internal feature requests list :)  
> **username_0**: Fantastic! Any rough idea on when it might be available?  
> **username_1**: Not sure... we still have to decide if we will actually add it to Freeform in the future. Unfortunately it's something that won't happen soon.  

---

### Answer by username_2 on 2017-10-17. Score: 0

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 %}
            {{ groupHeadings[handle] }}
        {% endif %}

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

> **Comments:**
> **username_0**: Aaaah that looks pretty clever. I'll give that a try! Much neater than the conditional mess I was getting myself into. Although, it turns out now the client wants to be able to control this themselves, similar to the Wordpress plugin they had on the site before I rebuilt it so I'm not sure what I can do! Thanks for the suggestion.  
> **username_0**: Do you know a way you could wrap that group of fields in this way? I'm using some JS at the moment and curious if it can be done at the template level.  

---

