Forms: adjust checkboxes output

Archive
1

Checkboxes output displayed in thankyou message and alert email is not user-friendly.

form email screen-grab

What should be displayed is to end-user is the value chosen on the form. For example:

What is your favorite ice cream flavor?: Chocloate, Chunky Monkey

Is there a suggestion as to what the code edit might be? And where that file is located?

This is what the headmatter for checkboxes looks like on form.md:

        - name: check
          type: checkboxes
          label: What is your favorite ice cream flavor?
          options:
            chocolate: Chocolate 
            monkey: Chunky Monkey
2

Edit your theme templates/forms/data.html.twig with

{% for field in form.fields %}
{% block field %}
    <div>
        {% block field_label %}
            <strong>{{ field.label }}</strong>
        {% endblock %}:

        {% block field_value %}
            {% if field.type == 'checkboxes' %}
                <ul>
                {% for value in form.value(field.name) %}
                    <li>{{ field.options[value] }}</li>
                {% endfor %}
                </ul>
        {{ dump(field) }}
            {% else %}
                {{ string(form.value(field.name)|e)|nl2br }} 
            {% endif %}
        {% endblock %}</div>
{% endblock %}
{% endfor %}

should do. Test it out, might be a default behavior.

3

@flaviocopes. Thanks. The code above did solve the immediate checkboxes issue. However, an earlier issue has re-surfaced as a result.

The re-captcha code is once-again being displayed in the thankyou page and email. I’ll try to work through this but my lack of understanding of twig syntax is getting in my way. When I combine your fix with the re-capthca fix a nasty Twig_Error_Syntax page is displayed.

If you have a moment, here is my code at /user/themes/myTheme/templates/forms/data.html.twig

{% extends "forms/default/data.html.twig" %}

{% for field in form.fields %}
{% block field %}
    <div>
        {% block field_label %}
            <strong>{{ field.label }}</strong>
        {% endblock %}:

        {% block field_value %}
            {% if field.type == 'checkboxes' %}
                <ul>
                {% for value in form.value(field.name) %} 
                    <li>{{ field.options[value] }}</li>
                {% endfor %}
                </ul>
        {{ dump(field) }}
            {% else %}
                {{ string(form.value(field.name)|e)|nl2br }}
            {% endif %}
        {% endblock %}</div>

        {% block field %}
            {% if field.name!='g-recaptcha-response' %}
            <div>{% block field_label %}<strong>{{ field.label }}</strong>{% endblock %}: {% block field_value %},{{ string(form.value(field.name)|e) }},{% endblock %}</div>
            {% endif %}
        {% endblock %}

{% endblock %}
{% endfor %}

The code at /user/plugins/form/templates/forms/default/data.html.twig
is vanilla default (if relevant):

{% for field in form.fields %}
{% block field %}
    <div>{% block field_label %}<strong>{{ field.label }}</strong>{% endblock %}: {% block field_value %},{{ string(form.value(field.name)|e) }},{% endblock %}</div>
{% endblock %}
{% endfor %}

Thanks for your help. Extremely useful forum.

4

This should do

{% extends "forms/default/data.html.twig" %}

{% for field in form.fields %}
    {% block field %}
        {% if field.name!='g-recaptcha-response' %}
            <div>
                {% block field_label %}
                <strong>{{ field.label }}</strong>
                {% endblock %}:

                {% block field_value %}
                    {% if field.type == 'checkboxes' %}
                        <ul>
                            {% for value in form.value(field.name) %}
                                <li>{{ field.options[value] }}</li>
                            {% endfor %}
                        </ul> 
                    {% else %}
                        {{ string(form.value(field.name)|e)|nl2br }}
                    {% endif %}
                {% endblock %}
            </div>
        {% endif %}
    {% endblock %}
{% endfor %}
1 Like
5

Perfect! Thanks.

Now to wrap my head around the twig code you wrote. :wink:

6

You had put the {% block field %} inside itself. I just put the field.name check on top.