アンケート用のTwigテンプレート

index.twig

{% extends 'default_frame.twig' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block stylesheet %}
    <style>
        li.craue_formflow_done_step {
            background-color: pink;
        }
    </style>
{% endblock %}

{% block main %}

    <div class="ec-contactRole">
        <div class="ec-pageHeader">
            <h1>アンケート</h1>
        </div>
        <div class="ec-off1Grid">
            <div class="ec-off1Grid__cell">
                ステップ: {% include '@CraueFormFlow/FormFlow/stepList.html.twig' %}
                <form method="post" action="{{ url('questionnaire') }}" novalidate>
                    {{ form_widget(form._token) }}
                    <div class="ec-borderedDefs">
                        {% if flow.getCurrentStepNumber() == 1 %}
                            <dl>
                                <dt>
                                    {{ form_label(form.q1, '性別', { 'label_attr': { 'class': 'ec-label' }}) }}
                                </dt>
                                <dd>
                                    <div
                                        class="ec-checkbox{{ has_errors(form.q1) ? ' error' }}">
                                        {{ form_widget(form.q1) }}
                                        {{ form_errors(form.q1) }}
                                    </div>
                                </dd>
                            </dl>
                        {% endif %}
                        {% if flow.getCurrentStepNumber() == 2 %}
                            <dl>
                                <dt>
                                    {{ form_label(form.q2, '年代', { 'label_attr': { 'class': 'ec-label' }}) }}
                                </dt>
                                <dd>
                                    <div class="ec-input{{ has_errors(form.q2) ? ' error' }}">
                                        {{ form_widget(form.q2) }}
                                        {{ form_errors(form.q2) }}
                                    </div>
                                </dd>
                            </dl>
                        {% endif %}
                        {% if flow.getCurrentStepNumber() == 3 %}
                            <dl>
                                <dt>
                                    {{ form_label(form.q3, 'ご意見・ご要望', { 'label_attr': { 'class': 'ec-label' }}) }}
                                </dt>
                                <dd>
                                    <div class="ec-input{{ has_errors(form.q3) ? ' error' }}">
                                        {{ form_widget(form.q3) }}
                                        {{ form_errors(form.q3) }}
                                    </div>
                                    <p>ご意見・ご要望がございましたら、ご自由にお書きください</p>
                                </dd>
                            </dl>
                        {% endif %}
                        {% if flow.getCurrentStepNumber() == 4 %}
                            <dl>
                                <dt>
                                    {{ '性別'|trans }}
                                </dt>
                                <dd>
                                    {{ form.vars.data.q1 }}
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    {{ '年代'|trans }}
                                </dt>
                                <dd>
                                    {{ form.vars.data.q2 }}
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    {{ 'ご意見・ご要望'|trans }}
                                </dt>
                                <dd>
                                    {{ form.vars.data.q3|nl2br }}
                                </dd>
                            </dl>
                        {% endif %}
                    </div>
                    <div class="ec-RegisterRole__actions">
                        {% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
                            craue_formflow_button_class_last: 'ec-blockBtn--action',
                            craue_formflow_button_class_back: 'ec-blockBtn',
                            craue_formflow_button_label_next: '次へ',
                            craue_formflow_button_label_finish: '送信',
                            craue_formflow_button_label_back: '戻る',
                            craue_formflow_button_render_reset: false
                        } %}
                    </div>

                    {{ form_rest(form) }}
                </form>
            </div>
        </div>
    </div>

{% endblock %}