app/template/default/Contact/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% form_theme form 'Form/form_div_layout.twig' %}
  15. {% block stylesheet %}
  16.     <style>
  17.         {% if form_errors(form.contents) %}
  18.         #contact_contents {
  19.             background-color: #FDF1F0;
  20.             border: 1px solid #C73C3C !important;
  21.         }
  22.         {% endif %}
  23.         {% if form_errors(form.name.name01) %}
  24.         #contact_name_name01 {
  25.             background-color: #FDF1F0;
  26.             border: 1px solid #C73C3C !important;
  27.         }
  28.         {% endif %}
  29.         {% if form_errors(form.name.name02) %}
  30.         #contact_name_name02 {
  31.             background-color: #FDF1F0;
  32.             border: 1px solid #C73C3C !important;
  33.         }
  34.         {% endif %}
  35.         {% if form_errors(form.kana.kana01) %}
  36.         #contact_kana_kana01 {
  37.             background-color: #FDF1F0;
  38.             border: 1px solid #C73C3C !important;
  39.         }
  40.         {% endif %}
  41.         {% if form_errors(form.kana.kana02) %}
  42.         #contact_kana_kana02 {
  43.             background-color: #FDF1F0;
  44.             border: 1px solid #C73C3C !important;
  45.         }
  46.         {% endif %}
  47.         {% if form_errors(form.address.pref) %}
  48.         #contact_address_pref {
  49.             width: 50%;
  50.             background-color: #FDF1F0;
  51.             border: 1px solid #C73C3C !important;
  52.             @media(max-width: 768px) {
  53.                 width:100%;
  54.             }
  55.         }
  56.         {% endif %}
  57.         {% if form_errors(form.phone_number) %}
  58.         #contact_phone_number {
  59.             background-color: #FDF1F0;
  60.             border: 1px solid #C73C3C !important;
  61.         }
  62.         {% endif %}
  63.         {% if form_errors(form.email.first) %}
  64.         #contact_email_first {
  65.             background-color: #FDF1F0;
  66.             border: 1px solid #C73C3C !important;
  67.         }
  68.         {% endif %}
  69.         {% if form_errors(form.email.second) %}
  70.         #contact_email_second {
  71.             background-color: #FDF1F0;
  72.             border: 1px solid #C73C3C !important;
  73.         }
  74.         {% endif %}
  76.         select {
  77.             -webkit-appearance: none;
  78.             appearance: none;
  79.             background-image: url("{{ asset('assets/img/common/icons/select-arrow.svg') }}");
  80.             background-repeat: no-repeat;
  81.             background-position: right 16px center;
  83.             padding: 12px 16px;
  84.             width: 100%;
  85.             border: solid 1px;
  86.             border-color: #CCCCCC;
  87.             border-radius: 3px;
  88.             background-color: #FFFFFF;
  89.         }
  90.         input[type="radio"],
  91.         input[type="checkbox"] {
  92.             accent-color: #666666;
  93.         }
  95.         #contact_name_name01,
  96.         #contact_name_name02,
  97.         #contact_kana_kana01,
  98.         #contact_kana_kana02,
  99.         #contact_postal_code,
  100.         #contact_address_addr01,
  101.         #contact_address_addr02,
  102.         #contact_phone_number,
  103.         #contact_order_number,
  104.         #contact_contents,
  105.         #contact_email_first,
  106.         #contact_email_second,
  107.         #contact_textArea_for_pet_type,
  108.         #contact_textArea_for_remains,
  109.         #contact_textArea_for_opinion {
  110.             padding: 12px;
  111.             width: 100%;
  112.             border-width: 1px;
  113.             border-color: #CCCCCC;
  114.             border-radius: 3px;
  115.             text: #BBBBBB;
  116.         }
  117.         input[type="radio"] {
  118.             width: 16px;
  119.             height: 16px;
  120.             border: 2px solid #CCCCCC;
  121.             background-color: #CCCCCC;
  122.             margin-right: 8px;
  123.         }
  124.         &:not(:first-child) {
  125.             margin: 0;
  126.         }
  127.         input[type="radio"]::after {
  128.             width: 8px;
  129.             height: 8px;
  130.             background-color: #CCCCCC;
  131.         }
  132.     </style>
  133. {% endblock %}
  136. {% block javascript %}
  137.      <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  138.      <script>
  139.         $(function () {
  140.             $("#{{ form.contact_type.vars.id }}").on('change', function () {
  141.                 if ($(this).val() === 'catalog') {
  142.                     window.location.href = "{{ url('contact', { type: 'catalog' }) }}";
  143.                 } else {
  144.                     window.location.href = "{{ url('contact', { type: 'other' }) }}";
  145.                 }
  146.             });
  147.         });
  148.     </script>
  149. {% endblock javascript %}
  151. {% block main %}
  152.     <div class="pb-20  bg-background-default gap-1 flex-wrap items-center md:pb-0">
  153.         <div>
  154.             <div class="flex gap-4 md:gap-2 items-start mx-auto w-full pl-[10.625vw] md:pl-6 pt-[120px] md:pt-20 pb-10 md:pb-1">
  155.                 <hr class="md:h-[64px] h-[120px] w-[2px] bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900] border-none">
  156.                 <h1 class="text-2xl md:text-xl font-light leading-9 tracking-widest">お問い合わせ</h1>
  157.             </div>
  158.             {% set breadcrumbs = [{'name': 'お問い合わせ(入力)'}] %}
  159.             {{ include('Block/breadcrumb.twig') }}
  160.         </div>
  161.         <div class="w-full items-center flex flex-col ">
  162.             <div class="w-[591px] bg-sub-beige-pale py-6 flex flex-col items-center mb-20 gap-5  text-sm md:w-full">
  163.                 <div class="flex flex-col items-center">
  164.                     <p class="leading-7 tracking-widest">お電話でもご相談を承ります。</p>
  165.                     <p class="leading-7 tracking-widest">お気軽にお問い合わせください。</p>
  166.                 </div>
  167.                 <a href="tel:03-5579-5671" class="text-2xl leading-9 font-notoseddf flex gap-2">
  168.                     <img src="{{asset('assets/icon/phone.svg')}}" alt="電話のアイコン" class="w-8 h-8">
  169.                     <p class="text-[32px] leading-9 font-notoserif">03-5579-5671</p>
  170.                 </a>
  171.                 <p>受付時間／10:00～18:00（年末年始除く）</p>
  172.             </div>
  173.             <div class="flex flex-col justify-center items-center gap-2 pb-20 md:pb-6 w-full max-w-[592px] mx-auto md:px-6 whitespace-nowrap">
  174.                 <div class="flex items-center w-full justify-between">
  175.                     <div class="w-11 h-11 bg-sub-blue flex items-center justify-center rounded-full">
  176.                         <p class="text-white font-bold font-notoserif leading-none">1</p>
  177.                     </div>
  178.                     <div class="w-[33vw] flex-1 h-[2px] bg-gray"></div>
  179.                     <div class="w-11 h-11 bg-gray flex items-center justify-center rounded-full">
  180.                         <p class="text-white font-bold font-notoserif leading-none">2</p>
  181.                     </div>
  182.                     <div class="w-[33vw] flex-1 h-[2px] bg-gray"></div>
  183.                     <div class="w-11 h-11 bg-gray flex items-center justify-center rounded-full">
  184.                         <p class="text-white font-bold font-notoserif leading-none">3</p>
  185.                     </div>
  186.                 </div>
  187.                 <div class="flex w-full items-center text-xs mx-auto max-w-[800px] justify-between">
  188.                     <p class="font-bold w-[27.8vw] pl-[10px]">入力</p>
  189.                     <p class="text-center">登録内容の確認</p>
  190.                     <p class="text-end w-[27.8vw]">登録完了</p>
  191.                 </div>
  192.             </div>
  193.         </div>
  194.         <div class="max-w-[592px] mx-auto pb-20">
  195.             <div class="ec-off1Grid__cell">
  196.                 <form method="post" action="{{ url('contact', { type: type }) }}" class="h-adr" novalidate>
  197.                     <span class="p-country-name" style="display:none;">Japan</span>
  198.                     {{ form_widget(form._token) }}
  199.                     <div class="mb-10 md:px-6 md:text-sm">
  200.                         <p class="leading-7">商品・サービスについてなど、お気軽にお問い合わせください。</p>
  201.                         <p class="leading-7 text-red font-bold">※ は必須項目です。</p>
  202.                     </div>
  203.                     <div class="flex flex-col gap-10 mb-20 md:px-6">
  204.                         {# FIXME:必要な時に非表示戻す #}
  205.                         <dl class="hidden">
  206.                             <dt class="flex items-center gap-2 pb-4">
  207.                                 <p class="text-xl font-medium leading-8">{{ form_label(form.contact_type, '', { 'label_attr': { 'class': 'ec-label' }}) }}</p>
  208.                                 <p class="text-sm text-red">※</p>
  209.                             </dt>
  210.                             <dd>
  211.                                 <div>
  212.                                     {{ form_widget(form.contact_type) }}
  213.                                     {% if form_errors(form.contact_type) %}
  214.                                         <div class="!text-red text-xs flex items-center gap-2">
  215.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  216.                                             <span class="flex ">
  217.                                                 お問い合わせ種類が{{ form_errors(form.contact_type) }}</span>
  218.                                         </div>
  219.                                     {% endif %}
  220.                                 </div>
  221.                             </dd>
  222.                         </dl>
  223.                         <dl>
  224.                             <dt class="flex items-center gap-2 pb-4">
  225.                                 <p class="text-xl font-medium leading-8">お名前</p>
  226.                                 <p class="text-sm text-red">※</p>
  227.                             </dt>
  228.                             <dd>
  229.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  230.                                     <div class="flex gap-2">
  231.                                         <div class="w-1/2">{{ form_widget(form.name.name01, {'attr': { 'placeholder': '山田' }}) }}</div>
  232.                                         <div class="w-1/2">
  233.                                             {{ form_widget(form.name.name02, {'attr': { 'placeholder': '太郎' }}) }}
  234.                                         </div>
  235.                                     </div>
  236.                                     <div class="flex flex-col gap-1 pt-2">
  237.                                         {% if form_errors(form.name.name01) %}
  238.                                             <div class="!text-red text-xs flex items-center gap-2">
  239.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  240.                                                 <span class="flex ">
  241.                                                     姓：{{ form_errors(form.name.name01) }}</span>
  242.                                             </div>
  243.                                         {% endif %}
  244.                                         {% if form_errors(form.name.name02) %}
  245.                                             <div class="!text-red text-xs flex items-center gap-2">
  246.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  247.                                                 <span class="flex ">
  248.                                                     名前：{{ form_errors(form.name.name02) }}
  249.                                                 </span>
  250.                                             </div>
  251.                                         {% endif %}
  252.                                     </div>
  253.                                 </div>
  254.                             </dd>
  255.                         </dl>
  256.                         <dl>
  257.                             <dt class="flex items-center gap-2 pb-4">
  258.                                 <p class="text-xl font-medium leading-8">お名前(フリガナ)</p>
  259.                                 <p class="text-sm text-red">※</p>
  260.                             </dt>
  261.                             <dd>
  262.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  263.                                     <div class="flex gap-2">
  264.                                         <div class="w-1/2">{{ form_widget(form.kana.kana01, { attr: { placeholder: 'ヤマダ' } }) }}</div>
  265.                                         <div class="w-1/2">
  266.                                             {{ form_widget(form.kana.kana02, { attr: { placeholder: 'タロウ' } }) }}
  267.                                         </div>
  268.                                     </div>
  269.                                     <div class="flex flex-col gap-1 pt-2">
  270.                                         {% if form_errors(form.kana.kana01) %}
  271.                                             <div class="!text-red text-xs flex items-center gap-2">
  272.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  273.                                                 <span class="flex ">
  274.                                                     姓(カタカナ)：{{ form_errors(form.kana.kana01) }}
  275.                                                 </span>
  276.                                             </div>
  277.                                         {% endif %}
  278.                                         {% if form_errors(form.kana.kana02) %}
  279.                                             <div class="!text-red text-xs flex items-center gap-2">
  280.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  281.                                                 <span class="flex ">
  282.                                                     名(カタカナ)：{{ form_errors(form.kana.kana02) }}
  283.                                                 </span>
  284.                                             </div>
  285.                                         {% endif %}
  286.                                     </div>
  287.                                 </div>
  288.                             </dd>
  289.                         </dl>
  290.                         <dl>
  291.                             <dt class="flex items-center gap-2  pb-4">
  292.                                 <p class="text-xl font-medium leading-8">住所</p>
  293.                             </dt>
  294.                             <dd>
  295.                                 <div class="flex flex-col gap-6">
  296.                                     <div>
  297.                                         <div class="pb-4 md:pb-2">
  298.                                             <p class="pb-2 text-sm font-medium">郵便番号</p>
  300.                                             <div class="flex gap-x-4 items-center md:flex-col w-full gap-y-4 md:items-start">
  301.                                                 <div class="flex gap-x-2 items-center">
  302.                                                     <span>{{ 'common.postal_symbol'|trans }}</span>
  303.                                                     <div class="w-[160px] ec-zipInput  {% if form_errors(form.postal_code) %} border-red bg-rose-50 {% endif %}">
  304.                                                         {{ form_widget(form.postal_code, {'attr':{'placeholder':'ハイフンなし'}}) }}
  305.                                                     </div>
  306.                                                 </div>
  307.                                             </div>
  308.                                             {% if form_errors(form.postal_code) %}
  309.                                                 <div class="!text-red text-xs flex items-center gap-2 pt-2">
  310.                                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  311.                                                     <span class="flex ">
  312.                                                         郵便番号：{{ form_errors(form.postal_code) }}
  313.                                                     </span>
  314.                                                 </div>
  315.                                             {% endif %}
  316.                                         </div>
  317.                                         <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="text-sm border-b w-fit leading-7 tracking-wider hover">郵便番号を検索する(外部サイトへ)</a>
  318.                                     </div>
  319.                                     <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  320.                                         <p class="pb-2 text-sm font-medium">都道府県</p>
  321.                                         {{ form_widget(form.address.pref) }}
  322.                                         {% if form_errors(form.address.pref) %}
  323.                                             <div class="!text-red text-xs flex items-center gap-2 pt-2">
  324.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  325.                                                 <span class="flex ">
  326.                                                     都道府県：{{ form_errors(form.address.pref) }}
  327.                                                 </span>
  328.                                             </div>
  329.                                         {% endif %}
  330.                                     </div>
  331.                                     <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  332.                                         <p class="pb-2 text-sm font-medium">市区町村</p>
  333.                                         <div class=" w-full ">
  334.                                             {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '千代田区神田神保町' }}) }}</div>
  335.                                         {% if form_errors(form.address.addr01) %}
  336.                                             <div class="!text-red text-xs flex items-center gap-2 pt-2">
  337.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  338.                                                 <span class="flex ">
  339.                                                     市区町村：{{ form_errors(form.address.addr01) }}
  340.                                                 </span>
  341.                                             </div>
  342.                                         {% endif %}
  343.                                     </div>
  344.                                     <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  345.                                         <p class="pb-2 text-sm font-medium">番地・ビル名</p>
  346.                                         <div class="w-full">
  347.                                             {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '1-3-5 まなかマンション908' }}) }}</div>
  348.                                         {% if form_errors(form.address.addr02) %}
  349.                                             <div class="!text-red text-xs flex items-center gap-2 pt-2">
  350.                                                 <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  351.                                                 <span class="flex ">
  352.                                                     番地・ビル名：{{ form_errors(form.address.addr02) }}
  353.                                                 </span>
  354.                                             </div>
  355.                                         {% endif %}
  356.                                     </div>
  357.                                 </div>
  358.                             </dd>
  359.                         </dl>
  360.                         <dl>
  361.                             <dt class="flex items-center gap-2  pb-4">
  362.                                 <p class="text-xl font-medium leading-8">電話番号</p>
  363.                                 <p class="text-sm text-red">※</p>
  364.                             </dt>
  365.                             <dd class="mb-4">
  366.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  367.                                     {{ form_widget(form.phone_number, {'attr': {'placeholder': '半角数字（ハイフンなし）'}}) }}
  368.                                     {% if form_errors(form.phone_number) %}
  369.                                         <div class="!text-red text-xs flex items-center gap-2 pt-2">
  370.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  371.                                             <span class="flex ">
  372.                                                 電話番号：{{ form_errors(form.phone_number) }}
  373.                                             </span>
  374.                                         </div>
  375.                                     {% endif %}
  376.                                 </div>
  377.                             </dd>
  378.                             <p class="text-xs">※携帯電話等の日中につながりやすいお電話番号をご入力ください。</p>
  379.                         </dl>
  380.                         <dl class="-mb-5">
  381.                             <dt class="flex items-center gap-2  pb-4">
  382.                                 <p class="text-xl font-medium leading-8">メールアドレス</p>
  383.                                 <p class="text-sm text-red">※</p>
  384.                             </dt>
  385.                             <dd>
  386.                                 <div class="ec-input{{ form_errors(form.email.first) ? ' error' }}">
  387.                                     <div class="w-full ">{{ form_widget(form.email.first, {'attr': { 'placeholder': 'mail@itsukushi.net' }}) }}</div>
  388.                                     {% if form_errors(form.email.first) %}
  389.                                         <div class="!text-red text-xs flex items-center gap-2 pt-2">
  390.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  391.                                             <span class="flex md:flex-col">
  392.                                                 メールアドレス：{{ form_errors(form.email.first) }}
  393.                                             </span>
  394.                                         </div>
  395.                                     {% endif %}
  396.                                 </div>
  397.                             </dd>
  398.                         </dl>
  399.                         <dl>
  400.                             <dt>
  401.                                 <p class="text-sm font-medium leading-8">確認のためもう一度入力してください</p>
  402.                             </dt>
  403.                             <dd class="ec-input{{ form_errors(form.email.second) ? ' error' }} mb-4">
  404.                                 <div class="w-full ">{{ form_widget(form.email.second, {'attr': { 'placeholder': 'mail@itsukushi.net' }}) }}</div>
  405.                                 {% if form_errors(form.email.second) %}
  406.                                     <div class="!text-red text-xs flex items-center gap-2 pt-2">
  407.                                         <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  408.                                         <span class="flex">
  409.                                             メールアドレス(確認) ：{{ form_errors(form.email.second) }}
  410.                                         </span>
  411.                                     </div>
  412.                                 {% endif %}
  413.                             </dd>
  414.                             <div class="flex flex-col gap-2">
  415.                                 <p class="text-xs">※ itsukushi@manaka-net.com からのメールを受信できる設定になっていることをご確認下さい。</p>
  416.                                 <p class="text-xs">※ SMSはご利用になれません。キャリアメールは極力お控え頂けますようお願い申し上げます。</p>
  417.                             </div>
  418.                         </dl>
  419.                         {% if type == constant('Customize\\Service\\ContactService::CONTACT_TYPE_OTHER') %}
  420.                         <dl>
  421.                             <dt>
  422.                                 <div class="flex flex-col gap-4 mb-2">
  423.                                     <p class="text-xl font-medium leading-8">{{ form_label(form.order_number, '', { 'label_attr': { 'class': 'ec-label' }}) }}</p>
  424.                                     <p class="text-sm tracking-wider">（ご注文済みの場合のみ）</p>
  425.                                 </div>
  426.                             </dt>
  427.                             <dd>
  428.                                 <div>
  429.                                     {{ form_widget(form.order_number, {'attr': { 'placeholder': '注文番号' }}) }}
  430.                                     {{ form_errors(form.order_number) }}
  431.                                 </div>
  432.                             </dd>
  433.                         </dl>
  434.                         <dl>
  435.                             <dt>
  436.                                 <div class="flex items-center gap-2 mb-4">
  437.                                     <p class="text-xl font-medium leading-8">お問い合わせ内容</p>
  438.                                     <p class="text-sm text-red">※</p>
  439.                                 </div>
  440.                             </dt>
  441.                             <dd>
  442.                                 <div class="ec-input{{ has_errors(form.contents) ? ' error' }}">
  443.                                     <div class=" w-full text-sm">
  444.                                         {{ form_widget(form.contents, {'attr': { 'placeholder': 'お問い合わせ内容', 'rows': 10 }}) }}</div>
  445.                                     {% if form_errors(form.contents) %}
  446.                                         <div class="!text-red text-xs flex items-center gap-2 pt-2">
  447.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  448.                                             <span class="flex ">
  449.                                                 お問い合わせ内容：{{ form_errors(form.contents) }}
  450.                                             </span>
  451.                                         </div>
  452.                                     {% endif %}
  453.                                 </div>
  454.                             </dd>
  455.                         </dl>
  456.                         {% endif %}
  457.                     </div>
  458.                     <div class="text-sm flex flex-col pb-10 md:px-6">
  459.                         <p class="text-xl mb-4">よろしければアンケートにご協力ください。</p>
  460.                         <div class="flex flex-col gap-10 mb-20">
  461.                             <dl class="flex flex-col gap-4">
  462.                                 <dt class="font-medium p-2 bg-sub-beige-pale">
  463.                                     {{ form_label(form.is_send_email, '', { 'label_attr': { 'class': 'ec-label' }}) }}
  464.                                 </dt>
  465.                                 <dd>
  466.                                     <ul class="flex flex-wrap md:flex-col gap-3 md:gap-6">
  467.                                         {% for child in form.is_send_email.children %}
  468.                                             <li class="flex items-center">
  469.                                                 {{ form_widget(child) }}
  470.                                                 {{ form_label(child) }}
  471.                                             </li>
  472.                                         {% endfor %}
  473.                                     </ul>
  474.                                     {{ form_errors(form.is_send_email) }}
  475.                                 </dd>
  476.                             </dl>
  477.                             <dl class="flex flex-col gap-4">
  478.                                 <dt class="font-medium p-2 bg-sub-beige-pale">
  479.                                     {{ form_label(form.where_did_you_know, '', { 'label_attr': { 'class': 'ec-label' }}) }}
  480.                                 </dt>
  481.                                 <dd>
  482.                                     <div>
  483.                                         <ul class="flex flex-wrap md:flex-col gap-6">
  484.                                             {% for child in form.where_did_you_know %}
  485.                                                 <li class="flex items-center">
  486.                                                     {{ form_widget(child) }}
  487.                                                     {{ form_label(child) }}
  488.                                                 </li>
  489.                                             {% endfor %}
  490.                                         </ul>
  491.                                     </div>
  492.                                     {{ form_errors(form.where_did_you_know) }}
  493.                                 </dd>
  494.                             </dl>
  495.                             <dl class="flex flex-col gap-4">
  496.                                 <dt class="font-medium p-2 bg-sub-beige-pale">
  497.                                     {{ form_label(form.pet_type, '', { 'label_attr': { 'class': 'ec-label' }}) }}
  498.                                 </dt>
  499.                                 <dd>
  500.                                     <ul class="flex md:flex-col gap-6 mb-6">
  501.                                         {% for child in form.pet_type.children %}
  502.                                             {% if child.vars.value != 'その他' %}
  503.                                             <li class="flex items-center gap-[3px]">
  504.                                                 {{ form_widget(child) }}
  505.                                                 {{ form_label(child) }}
  506.                                             </li>
  507.                                             {% endif %}
  508.                                         {% endfor %}
  509.                                     </ul>
  510.                                     <div class="flex flex-col">
  511.                                         <div class="mb-2 flex items-center gap-[3px]">
  512.                                             {{ form_widget(form.pet_type[4]) }}
  513.                                             {{ form_label(form.pet_type[4]) }}
  514.                                         </div>
  515.                                         {{ form_widget(form.textArea_for_pet_type, {'attr': { 'placeholder': '入力してください', 'rows': 1 }}) }}
  516.                                         {{ form_errors(form.textArea_for_pet_type) }}
  517.                                     </div>
  518.                                 </dd>
  519.                             </dl>
  520.                             <dl class="flex flex-col gap-4">
  521.                                 <dt class="font-medium p-2 bg-sub-beige-pale">
  522.                                     {{ form_label(form.remains, '', { 'label_attr': { 'class': 'ec-label' }}) }}
  523.                                 </dt>
  524.                                 <dd>
  525.                                     <ul class="flex md:flex-col gap-6 md:gap-6 mb-6">
  526.                                         {% for child in form.remains.children %}
  527.                                             {% if child.vars.value != 'その他' %}
  528.                                             <li class="flex items-center gap-[3px]">
  529.                                                 {{ form_widget(child) }}
  530.                                                 {{ form_label(child) }}
  531.                                             </li>
  532.                                             {% endif %}
  533.                                         {% endfor %}
  534.                                     </ul>
  535.                                     <div class="flex flex-col">
  536.                                         <div class="mb-2 flex items-center gap-[3px]">
  537.                                             {{ form_widget(form.remains[3]) }}
  538.                                             {{ form_label(form.remains[3]) }}
  539.                                         </div>
  540.                                         {{ form_widget(form.textArea_for_remains, {'attr': { 'placeholder': '入力してください', 'rows': 1 }}) }}
  541.                                         {{ form_errors(form.textArea_for_remains) }}
  542.                                     </div>
  543.                                 </dd>
  544.                             </dl>
  545.                             <dl class="flex flex-col gap-4">
  546.                                 <dt class="font-medium p-2 bg-sub-beige-pale">
  547.                                     {{ form_label(form.textArea_for_opinion, '', { 'label_attr': { 'class': 'ec-label' }}) }}
  548.                                 </dt>
  549.                                 <dd>
  550.                                     {{ form_widget(form.textArea_for_opinion, {'attr': { 'placeholder': '入力してください', 'rows': 6 }}) }}
  551.                                     {{ form_errors(form.textArea_for_opinion) }}
  552.                                 </dd>
  553.                             </dl>
  554.                         </div>
  555.                         <div class="flex flex-col items-center">
  556.                             <p class="text-sm mb-8">
  557.                                 <a class="border-b border-black hover" href="{{ url('help_privacy') }}" target="_blank">プライバシーポリシー</a>
  558.                                 に同意の上、</p>
  559.                             <button type="submit" class="w-[327px] py-3 rounded-[3px] bg-black text-sm font-bold text-white mb-10 md:mb-4 hover" name="mode" value="confirm">確認画面へ
  560.                             </button>
  561.                             <div class="flex flex-col gap-2 text-xs max-w-[384px]">
  562.                                 <p class="leading-4">※内容によっては、回答をさしあげるのにお時間を頂くこともございます。</p>
  563.                                 <p class="leading-4">※休業日は翌営業日以降の対応となりますので、ご了承ください。</p>
  564.                                 <p class="leading-4">※itsukushi@manaka-net.comからのメールが受信できるように設定をお願いします。</p>
  565.                             </div>
  566.                         </div>
  567.                     </div>
  568.                     {# エンティティ拡張の自動出力 #}
  569.                     {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  570.                         {% if f.vars.eccube_form_options.form_theme %}
  571.                             {% form_theme f f.vars.eccube_form_options.form_theme %}
  572.                             {{ form_row(f) }}
  573.                         {% else %}
  574.                             <dl>
  575.                                 <dt>
  576.                                     {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  577.                                     {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  578.                                 </dt>
  579.                                 <dd>
  580.                                     <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  581.                                         {{ form_widget(f) }}
  582.                                         {{ form_errors(f) }}
  583.                                     </div>
  584.                                 </dd>
  585.                             </dl>
  586.                         {% endif %}
  587.                     {% endfor %}
  588.                 </form>
  589.             </div>
  590.         </div>
  591.     </div>
  592. {% endblock %}