2

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.

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

  • Ok thanks, is there somewhere I can add a feature request? Grouping and showing/hiding fields would be amazing! – MikeeBee Oct 21 '17 at 9:16
  • 1
    I already have it on our internal feature requests list :) – Solspace Oct 23 '17 at 2:54
  • Fantastic! Any rough idea on when it might be available? – MikeeBee Oct 24 '17 at 6:37
  • 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 Oct 25 '17 at 22:56
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 %}
            <h3 class="c-form__subheading">{{ groupHeadings[handle] }}</h3>
        {% endif %}

        {#
         # Output fields with JavaScript hooks
         # and dynamically generated classes.
         #}
    {% endfor %}
{% endfor %} 
  • 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 Oct 21 '17 at 9:22
  • 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 Oct 27 '17 at 3:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.