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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% form_theme form 'Form/form_div_layout.twig' %}
  3. {% block stylesheet %}
  4.     <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.css">
  5.     <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css">
  6.     {% set errorFields = [
  7.         {'field': form.name.name01, 'id': 'contact_name_name01'},
  8.         {'field': form.name.name02, 'id': 'contact_name_name02'},
  9.         {'field': form.kana.kana01, 'id': 'contact_kana_kana01'},
  10.         {'field': form.kana.kana02, 'id': 'contact_kana_kana02'},
  11.         {'field': form.postal_code, 'id': 'contact_postal_code'},
  12.         {'field': form.address.pref, 'id': 'contact_address_pref'},
  13.         {'field': form.address.addr01, 'id': 'contact_address_addr01'},
  14.         {'field': form.address.addr02, 'id': 'contact_address_addr02'},
  15.         {'field': form.phone_number, 'id': 'contact_phone_number'},
  16.         {'field': form.email.first, 'id': 'contact_email_first'},
  17.         {'field': form.email.second, 'id': 'contact_email_second'}
  18.     ] %}
  19.     {% if type == "other_confirm" %}
  20.         {% set errorFields = errorFields|merge([
  21.             {'field': form.order_number, 'id': 'contact_order_number'},
  22.             {'field': form.contents, 'id': 'contact_contents'},
  23.         ]) %}
  24.     {% endif %}
  25.     {% if type == "coordinate_confirm" %}
  26.         {% set errorFields = errorFields|merge([
  27.             {'field': form.coordinate_product, 'id': 'contact_coordinate_product'},
  28.             {'field': form.enshrine_place_size, 'id': 'contact_enshrine_place_size'},
  29.             {'field': form.contact_content, 'id': 'contact_contact_content'}
  30.         ]) %}
  31.     {% endif %}
  32.     {% if type == "showroom_confirm" %}
  33.         {% set errorFields = errorFields|merge([
  34.             {'field': form.date1, 'id': 'contact_date1_month'},
  35.             {'field': form.date1, 'id': 'contact_date1_day'},
  36.             {'field': form.date1, 'id': 'contact_date1_time'},
  37.             {'field': form.date2, 'id': 'contact_date2_month'},
  38.             {'field': form.date2, 'id': 'contact_date2_day'},
  39.             {'field': form.date2, 'id': 'contact_date2_time'},
  40.         ]) %}
  41.     {% endif %}
  42.     <style>
  43.         {% for errorField in errorFields %}
  44.             {% if form_errors(errorField.field) %}
  45.             #{{ errorField.id }} {
  46.                 background-color: #FDF1F0;
  47.                 border: 1px solid #C73C3C !important;
  48.             }
  49.             {% endif %}
  50.         {% endfor %}
  51.     </style>
  52.     <style>
  53.         {# MEMO: form_widgetのattrを使い、Tailwindのクラスでスタイリングすると
  54.             郵便番号のライブラリで不具合が起きた為、stylesheetを使ってスタイリングしている #}
  55.         #contact_address_pref{
  56.             width:184px;
  57.             padding:8px 16px;
  58.             border-radius: 0.375rem;
  59.             border: 1px solid #CCC;
  60.             @media (max-width: 768px) {
  61.                 width:100%;
  62.             }
  63.         }
  64.     </style>
  65.     <style>
  66.     #contact_which_showroom_0 + label{
  67.         margin-right: 24px;
  68.     }
  69.     #contact_contact_method_0 + label{
  70.         margin-right: 24px;
  71.     }
  72.     </style>
  73. {% endblock %}
  74. {% block javascript %}
  75.     {{ include("Contact/form_js.twig") }}
  76.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  77.     <script>
  78.         $(function() {
  79.             function toggleTextareaState() {
  80.                 if ($('#contact_what_you_want_4').is(':checked')) {
  81.                     $('textarea[name="contact[textArea_for_what_you_want]"]').removeAttr('disabled');
  82.                 } else {
  83.                     $('textarea[name="contact[textArea_for_what_you_want]"]').attr('disabled', 'disabled');
  84.                 }
  85.             }
  86.             $('input[name="contact[what_you_want]"]').on('change', toggleTextareaState);
  87.             toggleTextareaState();
  88.         });
  89.     </script>
  90.     <script>
  91.         $(document).ready(function() {
  92.             var currentYear = new Date().getFullYear();
  93.             $('#contact_date2_month, #contact_date2_day, #contact_date2_time').on('change', function() {
  94.                 if ($('#contact_date2_month').val() === '' && $('#contact_date2_day').val() === '' && $('#contact_date2_time').val() === '') {
  95.                     // 全て--の場合、contact_date2_yearも--に設定
  96.                     $('#contact_date2_year').val('--');
  97.                 } else {
  98.                     // いずれかが選択されている場合、contact_date2_yearの値を現在の年に設定
  99.                     $('#contact_date2_year').val(currentYear);
  100.                 }
  101.             });
  102.         });
  103.         $(document).ready(function() {
  104.             // ショールームの選択肢を変更する関数
  105.             function updateTimeOptions(showroom) {
  106.                 var date1TimeSelect = $('#contact_date1_time');
  107.                 var date2TimeSelect = $('#contact_date2_time');
  108.                 // 初期化
  109.                 date1TimeSelect.empty().append('<option value="">--</option>');
  110.                 date2TimeSelect.empty().append('<option value="">--</option>');
  111.                 if (showroom === '銀座ショールーム予約') {
  112.                     date1TimeSelect.append('<option value="10:00">10:00</option>');
  113.                     date1TimeSelect.append('<option value="13:30">13:30</option>');
  114.                     date1TimeSelect.append('<option value="16:00">16:00</option>');
  115.                     date2TimeSelect.append('<option value="10:00">10:00</option>');
  116.                     date2TimeSelect.append('<option value="13:30">13:30</option>');
  117.                     date2TimeSelect.append('<option value="16:00">16:00</option>');
  118.                     // もし選択されている値が10:30なら解除
  119.                     if (date1TimeSelect.val() === '10:30') {
  120.                         date1TimeSelect.val('');
  121.                     }
  122.                     if (date2TimeSelect.val() === '10:30') {
  123.                         date2TimeSelect.val('');
  124.                     }
  125.                 } else if (showroom === '横浜ショールーム予約') {
  126.                     date1TimeSelect.append('<option value="10:30">10:30</option>');
  127.                     date1TimeSelect.append('<option value="13:30">13:30</option>');
  128.                     date1TimeSelect.append('<option value="16:00">16:00</option>');
  129.                     date2TimeSelect.append('<option value="10:30">10:30</option>');
  130.                     date2TimeSelect.append('<option value="13:30">13:30</option>');
  131.                     date2TimeSelect.append('<option value="16:00">16:00</option>');
  132.                     // もし選択されている値が10:00なら解除
  133.                     if (date1TimeSelect.val() === '10:00') {
  134.                         date1TimeSelect.val('');
  135.                     }
  136.                     if (date2TimeSelect.val() === '10:00') {
  137.                         date2TimeSelect.val('');
  138.                     }
  139.                 }
  140.             }
  141.             // ショールームの変更イベント
  142.             $('input[name="contact[which_showroom]"]').change(function() {
  143.                 var selectedShowroom = $(this).val();
  144.                 updateTimeOptions(selectedShowroom);
  145.             });
  146.             // 初期表示時に選択されているショールームの選択肢を設定
  147.             var initialShowroom = $('input[name="contact[which_showroom]"]:checked').val();
  148.             if (initialShowroom) {
  149.                 updateTimeOptions(initialShowroom);
  150.             } else {
  151.                 $('#contact_date1_time').empty().append('<option value="">--</option>');
  152.                 $('#contact_date2_time').empty().append('<option value="">--</option>');
  153.             }
  154.         });
  155.     </script>
  156. {% endblock %}
  157. {% block main %}
  158.     <div class="w-[720px] md:w-full lg:px-4 mt-10 md:mt-6 mx-auto font-light">
  159.         <div class="tt">
  160.             <h1 class="text-[26px] md:text-[18px] mb-[20px]">お問い合わせ</h1>
  161.         </div>
  162.         <div class="mb-6 text-[15px] md:text-[12px]">
  163.             <p class="">商品・サービスについてなど、お気軽にお問い合わせください。</p>
  164.             <p class="font-[700] text-[#BE5255]">※ は必須項目です。</p>
  165.         </div>
  166.         <div class="mb-6 bg-[#f7f7f0] py-10 md:py-5 text-center">
  167.             <dl class="">
  168.                 <dt class="text-2xl md:text-lg leading-tight mb-4">お電話でも商品のご注文・ご相談</dt>
  169.                 <dt class="text-2xl md:text-lg leading-tight mb-4">ショールームのご予約を承ります。</dt>
  170.                 <dt class="text-2xl md:text-lg leading-tight mb-4">お気軽にお問い合わせください。</dt>
  171.                 <dd class="flex justify-center items-center">
  172.                     <img src="{{ asset('assets/img/contact/tel_new.png') }}" class="w-72 md:w-7/10">
  173.                 </dd>
  174.                 <a href="tel:0355795671" class="w-fit px-20 py-3 rounded-full border-2 border-[#DDDDDD] bg-white gap-1 mx-auto mt-4 md:flex hidden items-center">
  175.                     <i class="fas fa-phone fa-flip-horizontal fa-md" style="color: #999999;"></i>
  176.                     <p class="text-sm text-[#666666] font-extralight">電話をかける</p>
  177.                 </a>
  178.             </dl>
  179.         </div>
  180.             <div class="flex flex-col justify-center items-center gap-2 pb-8 md:pb-6 w-full max-w-[592px] mx-auto">
  181.                 <div class="flex items-center w-full justify-between md:text-sm">
  182.                     <div class="w-11 h-11 bg-manakaProgress flex items-center justify-center rounded-full">
  183.                         <p class="text-white font-bold font-notoserif leading-none">1</p>
  184.                     </div>
  185.                     <div class="w-[33vw] flex-1 h-[6px] bg-[#CCC]"></div>
  186.                     <div class="w-11 h-11 bg-[#CCC] flex items-center justify-center rounded-full">
  187.                         <p class="text-white font-bold font-notoserif leading-none">2</p>
  188.                     </div>
  189.                     <div class="w-[33vw] flex-1 h-[6px] bg-[#CCC]"></div>
  190.                     <div class="w-11 h-11 bg-[#CCC] flex items-center justify-center rounded-full">
  191.                         <p class="text-white font-bold font-notoserif leading-none">3</p>
  192.                     </div>
  193.                 </div>
  194.                 <div class="flex w-full items-center text-sm font-bold text-[#666666] md:text-xs mx-auto max-w-[800px] justify-between">
  195.                     <p class=" w-[26vw] pl-1">入力</p>
  196.                     <p class="text-center w-[18vw]">送信内容の確認</p>
  197.                     <p class="text-end w-[27.8vw]">送信完了</p>
  198.                 </div>
  199.             </div>
  200.         <form method="post" action="
  201.                     {% if type == 'showroom_confirm' %}
  202.                         {{ path('showroom_confirm') }}
  203.                     {% elseif type == 'catalog_confirm' %}
  204.                         {{ path('catalog_confirm') }}
  205.                     {% elseif type == 'other_confirm' %}
  206.                         {{ path('other_confirm') }}
  207.                     {% elseif type == 'coordinate_confirm' %}
  208.                         {{ path('coordinate_confirm') }}
  209.                     {% else %}
  210.                         {{ path('contact') }}
  211.                     {% endif %}
  212.                 " class="h-adr" novalidate>
  213.             <span class="p-country-name" style="display:none;">Japan</span>
  214.             {{ form_widget(form._token) }}
  215.             {{ form_widget(form.contact_type, {'attr': { 'class': 'hidden'}}) }}
  216.             <div class="flex flex-col">
  217.                 {% if type == "showroom_confirm" %}
  218.                 <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col md:items-start">
  219.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  220.                         <p class="md:text-sm leading-8 font-bold">● 会場</p>
  221.                         <p class="text-sm md:text-xs text-manakaRed">※</p>
  222.                     </dt>
  223.                         <dd class="w-3/5 md:w-full">
  224.                             <div class="ec-halfInput{{ has_errors(form.which_showroom) ? ' error' }} w-full">
  225.                                 {{ form_widget(form.which_showroom) }}
  226.                                 <div class="flex flex-col gap-1 mt-1">
  227.                                     {% if form_errors(form.which_showroom) %}
  228.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  229.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  230.                                             <span class="flex">
  231.                                                 {{ form_errors(form.which_showroom) }}
  232.                                             </span>
  233.                                         </div>
  234.                                     {% endif %}
  235.                                 </div>
  236.                             </div>
  237.                         </dd>
  238.                     </dl>
  239.                 {% endif %}
  240.                 <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
  241.                     <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  242.                         <p class="md:text-sm leading-8 font-bold">● お名前</p>
  243.                         <p class="text-sm md:text-xs text-manakaRed">※</p>
  244.                     </dt>
  245.                     <dd class="w-3/5 md:w-full">
  246.                         <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  247.                             <div class="flex gap-2">
  248.                                 <div class="flex flex-col gap-1 md:w-full">
  249.                                     {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  250.                                     {% if form_errors(form.name.name01) %}
  251.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  252.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  253.                                             <span class="flex ">
  254.                                                 姓:{{ form_errors(form.name.name01) }}</span>
  255.                                         </div>
  256.                                     {% endif %}
  257.                                 </div>
  258.                                 <div class="flex flex-col gap-1 md:w-full">
  259.                                     {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  260.                                     {% if form_errors(form.name.name02) %}
  261.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  262.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  263.                                             <span class="flex ">
  264.                                                 名:{{ form_errors(form.name.name02) }}
  265.                                             </span>
  266.                                         </div>
  267.                                     {% endif %}
  268.                                 </div>
  269.                             </div>
  270.                         </div>
  271.                     </dd>
  272.                 </dl>
  273.                 <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
  274.                     <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  275.                         <p class="md:text-sm leading-8 font-bold">● お名前(フリガナ)</p>
  276.                         <p class="text-sm md:text-xs text-manakaRed">※</p>
  277.                     </dt>
  278.                     <dd class="w-3/5 md:w-full">
  279.                         <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  280.                             <div class="flex gap-2">
  281.                                 <div class="flex flex-col gap-1 md:w-full">
  282.                                     {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  283.                                     {% if form_errors(form.kana.kana01) %}
  284.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  285.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  286.                                             <span class="flex ">
  287.                                                 セイ:{{ form_errors(form.kana.kana01) }}</span>
  288.                                         </div>
  289.                                     {% endif %}
  290.                                 </div>
  291.                                 <div class="flex flex-col gap-1 md:w-full">
  292.                                     {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  293.                                     {% if form_errors(form.kana.kana02) %}
  294.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  295.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  296.                                             <span class="flex ">
  297.                                                 メイ:{{ form_errors(form.kana.kana02) }}
  298.                                             </span>
  299.                                         </div>
  300.                                     {% endif %}
  301.                                 </div>
  302.                             </div>
  303.                         </div>
  304.                     </dd>
  305.                 </dl>
  306.                 <dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
  307.                     <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  308.                         <p class="md:text-sm leading-8 font-bold">● 住所</p>
  309.                     </dt>
  310.                     <dd class="w-3/5 md:w-full">
  311.                         <div class="flex flex-col gap-4">
  312.                             <div>
  313.                                 <div>
  314.                                     <div class="flex gap-x-4 items-center md:flex-col w-full gap-y-4 md:items-start">
  315.                                         <div class="flex gap-x-2 items-center">
  316.                                             <span>{{ 'common.postal_symbol'|trans }}</span>
  317.                                             <div class="w-[160px] ec-zipInput">
  318.                                                 {{ form_widget(form.postal_code, {'attr':{'class': 'w-full border-[#CCC] border rounded px-4 py-2 p-postal-code'}}) }}
  319.                                             </div>
  320.                                         </div>
  321.                                     </div>
  322.                                     {% if form_errors(form.postal_code) %}
  323.                                         <div class="!text-red text-xs flex items-center gap-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.postal_code) }}
  327.                                             </span>
  328.                                         </div>
  329.                                     {% endif %}
  330.                                 </div>
  331.                                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="text-sm border-b w-fit leading-7 tracking-wider hover">郵便番号を検索する(外部サイトへ)</a>
  332.                             </div>
  333.                             <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  334.                                 {{ form_widget(form.address.pref) }}
  335.                                 {% if form_errors(form.address.pref) %}
  336.                                     <div class="!text-red text-xs flex items-center gap-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.pref) }}
  340.                                         </span>
  341.                                     </div>
  342.                                 {% endif %}
  343.                             </div>
  344.                             <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  345.                                 <div class=" w-full ">
  346.                                 {{ form_widget(form.address.addr01, { 'attr': {'placeholder': '市区町村名 (例:千代田区神田神保町)', 'class': 'p-locality p-street-address w-full border-[#CCC] border rounded px-4 py-2'}}) }}</div>
  347.                                 {% if form_errors(form.address.addr01) %}
  348.                                     <div class="!text-red text-xs flex items-center gap-2 ">
  349.                                         <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  350.                                         <span class="flex">
  351.                                             市区町村:{{ form_errors(form.address.addr01) }}
  352.                                         </span>
  353.                                     </div>
  354.                                 {% endif %}
  355.                             </div>
  356.                             <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  357.                                 <div class="w-full">
  358.                                     {{ form_widget(form.address.addr02,  { 'attr': {'placeholder': '番地・ビル名(例:1-3-5 まなかマンション908)', 'class': 'w-full border-[#CCC] border rounded px-4 py-2 p-extended-address'}}) }}</div>
  359.                                 {% if form_errors(form.address.addr02) %}
  360.                                     <div class="!text-red text-xs flex items-center gap-2 ">
  361.                                         <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  362.                                         <span class="flex ">
  363.                                             番地・ビル名:{{ form_errors(form.address.addr02) }}
  364.                                         </span>
  365.                                     </div>
  366.                                 {% endif %}
  367.                             </div>
  368.                         </div>
  369.                     </dd>
  370.                 </dl>
  371.                 <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
  372.                     <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  373.                         <p class="md:text-sm leading-8 font-bold">● 電話番号</p>
  374.                         <p class="text-sm md:text-xs text-manakaRed">※</p>
  375.                     </dt>
  376.                     <dd class="w-3/5 md:w-full">
  377.                         <div class="ec-halfInput{{ has_errors(form.phone_number, form.phone_number) ? ' error' }}">
  378.                                 <div class="flex flex-col gap-1">
  379.                                     {{ form_widget(form.phone_number, {'attr': {'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  380.                                     {% if form_errors(form.phone_number) %}
  381.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  382.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  383.                                             <span class="flex ">
  384.                                                 電話番号: {{ form_errors(form.phone_number) }}</span>
  385.                                         </div>
  386.                                     {% endif %}
  387.                                 </div>
  388.                         </div>
  389.                     </dd>
  390.                 </dl>
  391.                 <dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
  392.                     <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  393.                         <p class="md:text-sm leading-8 font-bold">● メールアドレス</p>
  394.                         <p class="text-sm md:text-xs text-manakaRed">※</p>
  395.                     </dt>
  396.                     <dd class="w-3/5 md:w-full">
  397.                         <div class="ec-halfInput{{ has_errors(form.email.first, form.email.first) ? ' error' }}">
  398.                             <div class="flex flex-col gap-3">
  399.                                 <div class="flex flex-col gap-1">
  400.                                     {{ form_widget(form.email.first, {'attr': { 'placeholder': 'メールアドレス' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  401.                                     {% if form_errors(form.email.first) %}
  402.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  403.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  404.                                             <span class="flex ">
  405.                                                 メールアドレス: {{ form_errors(form.email.first) }}</span>
  406.                                         </div>
  407.                                     {% endif %}
  408.                                 </div>
  409.                                 <div class="flex flex-col gap-1 ">
  410.                                     {{ form_widget(form.email.second, {'attr': { 'placeholder': 'メールアドレス(確認用)' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  411.                                     {% if form_errors(form.email.second) %}
  412.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  413.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  414.                                             <span class="flex ">
  415.                                                 メールアドレス(確認用):{{ form_errors(form.email.second) }}
  416.                                             </span>
  417.                                         </div>
  418.                                     {% endif %}
  419.                                 </div>
  420.                                 <p class="text-[#666] pt-4 text-xs whitespace-normal font-normal">
  421.                                         ※『itsukushi@manaka-net.com』からのメールを受信できる設定になっていることをご確認下さい。<br><br>
  422.                                     ※MMSはご利用になれません。キャリアメールは極力お控え頂けますようお願い申し上げます。<br><br>
  423.                                     ※@outlook.jp / @outlook.com / @hotmail.co.jp / @live.jp のメールアドレスをご使用のお客様へはメールが届かない場合がございます。ほかにお持ちのメールアドレスのご登録をお願いいたします。
  424.                                 </p>
  425.                             </div>
  426.                         </div>
  427.                     </dd>
  428.                 </dl>
  429.                 {% if type == 'other_confirm' %}
  430.                     <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
  431.                         <dt class="w-2/5 flex items-center gap-2 md:w-full">
  432.                             <p class="md:text-sm leading-8 font-bold">● 注文番号</p>
  433.                         </dt>
  434.                         <dd class="w-3/5 md:w-full">
  435.                             {{ form_widget(form.order_number, {'attr': { 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  436.                             {% if form_errors(form.order_number) %}
  437.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  438.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  439.                                     <span class="flex ">
  440.                                         注文番号:{{ form_errors(form.order_number) }}
  441.                                     </span>
  442.                                 </div>
  443.                             {% endif %}
  444.                         </dd>
  445.                     </dl>
  446.                     <dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
  447.                         <dt class="w-2/5 flex items-center gap-2 md:w-full">
  448.                             <p class="md:text-sm leading-8 font-bold">● お問い合わせ内容</p>
  449.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  450.                         </dt>
  451.                         <dd class="w-3/5 md:w-full">
  452.                             {{ form_widget(form.contents, {'attr': { 'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}}) }}
  453.                             {% if form_errors(form.contents) %}
  454.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  455.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  456.                                     <span class="flex ">
  457.                                         お問い合わせ内容:{{ form_errors(form.contents) }}
  458.                                     </span>
  459.                                 </div>
  460.                             {% endif %}
  461.                         </dd>
  462.                     </dl>
  463.                 {% endif %}
  464.                 {% if type == 'coordinate_confirm' %}
  465.                     <dl class="flex items-start border-t-2 border-[#CCC] pt-4 md:flex-col">
  466.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  467.                             <p class="md:text-sm leading-8 font-bold">● ご希望の連絡方法</p>
  468.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  469.                         </dt>
  470.                         <dd class="w-3/5 md:w-full mb-2">
  471.                             {{ form_widget(form.contact_method) }}
  472.                             {% if form_errors(form.contact_method) %}
  473.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  474.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  475.                                     <span class="flex ">
  476.                                         {{ form_errors(form.contact_method) }}
  477.                                     </span>
  478.                                 </div>
  479.                             {% endif %}
  480.                         </dd>
  481.                     </dl>
  482.                     <p class="text-[#666] text-xs whitespace-normal font-normal pb-4">
  483.                         ※電話をご希望の場合は、一両日中にこちらから、ご連絡いたします。お急ぎの方は、大変恐れ入りますが、お電話にてご連絡をお願いいたします。
  484.                     </p>
  485.                     <dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
  486.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  487.                             <p class="md:text-sm leading-8 font-bold">● コーディネートをご希望の商品</p>
  488.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  489.                         </dt>
  490.                         <dd class="w-3/5 md:w-full">
  491.                             {{ form_widget(form.coordinate_product,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
  492.                             {% if form_errors(form.coordinate_product) %}
  493.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  494.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  495.                                     <span class="flex ">
  496.                                         {{ form_errors(form.coordinate_product) }}
  497.                                     </span>
  498.                                 </div>
  499.                             {% endif %}
  500.                         </dd>
  501.                     </dl>
  502.                     <dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
  503.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  504.                             <p class="md:text-sm leading-8 font-bold">● お祀りする場所の寸法</p>
  505.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  506.                         </dt>
  507.                         <dd class="w-3/5 md:w-full">
  508.                             {{ form_widget(form.enshrine_place_size,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
  509.                             {% if form_errors(form.enshrine_place_size) %}
  510.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  511.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  512.                                     <span class="flex ">
  513.                                         {{ form_errors(form.enshrine_place_size) }}
  514.                                     </span>
  515.                                 </div>
  516.                             {% endif %}
  517.                         </dd>
  518.                     </dl>
  519.                     <dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
  520.                         <dt class="w-2/5 flex items-center gap-2 md:w-full md:mb-4">
  521.                             <p class="md:text-sm font-medium leading-8">● 画像のアップロード</p>
  522.                         </dt>
  523.                         <dd class="w-3/5 md:w-full">
  524.                             <p>
  525.                                 お祀りをお考えのお部屋や、<br/>
  526.                                 イメージされている参考写真などがありましたら、<br/>
  527.                                 こちらからアップロードしてください。
  528.                             </p>
  529.                             <div id="upload-zone">
  530.                                 {{ form_widget(form.coordinate_image, { attr : { style : 'display:none;' } }) }}
  531.                             </div>
  532.                         </dd>
  533.                     </dl>
  534.                     <dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
  535.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  536.                             <p class="md:text-sm leading-8 font-bold">● 商品等に関するご案内</p>
  537.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  538.                         </dt>
  539.                         <dd class="w-3/5 md:w-full">
  540.                             {{ form_widget(form.guidance_for_product) }}
  541.                             {% if form_errors(form.guidance_for_product) %}
  542.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  543.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  544.                                     <span class="flex ">
  545.                                         {{ form_errors(form.guidance_for_product) }}
  546.                                     </span>
  547.                                 </div>
  548.                             {% endif %}
  549.                         </dd>
  550.                     </dl>
  551.                     <dl class="flex items-start border-b-2 border-[#CCC] py-4 md:flex-col">
  552.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  553.                             <p class="md:text-sm leading-8 font-bold">● お問い合わせ内容</p>
  554.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  555.                         </dt>
  556.                         <dd class="w-3/5 md:w-full">
  557.                             {{ form_widget(form.contact_content,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
  558.                             {% if form_errors(form.contact_content) %}
  559.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  560.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  561.                                     <span class="flex ">
  562.                                         {{ form_errors(form.contact_content) }}
  563.                                     </span>
  564.                                 </div>
  565.                             {% endif %}
  566.                         </dd>
  567.                     </dl>
  568.                 {% endif %}
  569.                 {% if type == "showroom_confirm" %}
  570.                     <dl class="showroom-item flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
  571.                         <dt class="w-2/5 flex items-center gap-2 md:w-full">
  572.                             <p class="md:text-sm leading-8 font-bold">● 希望日程</p>
  573.                             <p class="text-sm md:text-xs text-manakaRed">※</p>
  574.                         </dt>
  575.                         <dd class="w-3/5 md:w-full flex flex-col gap-4">
  576.                                 <div>
  577.                                     第一希望:
  578.                                     <div class="form-inline form-group date-select flex items-center">
  579.                                         {{ form_widget(form.date1.year, {'attr': {'style': 'display: none;'}}) }}
  580.                                         {{ form_widget(form.date1.month, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 月
  581.                                         {{ form_widget(form.date1.day, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 日
  582.                                         {{ form_widget(form.date1_time, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }}
  583.                                     </div>
  584.                                     {% if form_errors(form.date1) %}
  585.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  586.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  587.                                             <span class="flex flex-col">
  588.                                                 {{ form_errors(form.date1) }}
  589.                                             </span>
  590.                                         </div>
  591.                                     {% endif %}
  592.                                 </div>
  593.                                 <div>
  594.                                     第二希望:
  595.                                     <div class="form-inline form-group date-select flex items-center">
  596.                                         {{ form_widget(form.date2.year, {'attr': {'style': 'display: none;'}}) }}
  597.                                         {{ form_widget(form.date2.month, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 月
  598.                                         {{ form_widget(form.date2.day, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 日
  599.                                         {{ form_widget(form.date2_time, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }}
  600.                                     </div>
  601.                                     {% if form_errors(form.date2) %}
  602.                                         <div class="!text-manakaRed text-xs flex items-center gap-2">
  603.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  604.                                             <span class="flex flex-col">
  605.                                                 {{ form_errors(form.date2) }}
  606.                                             </span>
  607.                                         </div>
  608.                                     {% endif %}
  609.                                 </div>
  610.                             </div>
  611.                         </dd>
  612.                     </dl>
  613.                     <dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
  614.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  615.                             <p class="md:text-sm leading-8 font-bold">● その他、気になる点がありましたらご記入ください。<br/>( フリーワード )</p>
  616.                         </dt>
  617.                         <dd class="w-3/5 md:w-full">
  618.                             {{ form_widget(form.showroom_freetext,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2 resize-none'}},{id: 'wysiwyg-area'}) }}
  619.                             {% if form_errors(form.showroom_freetext) %}
  620.                                 <div class="!text-manakaRed text-xs flex items-center gap-2">
  621.                                     <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  622.                                     <span class="flex ">
  623.                                         {{ form_errors(form.showroom_freetext) }}
  624.                                     </span>
  625.                                 </div>
  626.                             {% endif %}
  627.                         </dd>
  628.                     </dl>
  629.                 {% endif %}
  630.                 {% if type == 'catalog_confirm' %}
  631.                     <dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
  632.                         <dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
  633.                             <p class="md:text-sm leading-8 font-bold">● よろしければアンケートにご協力ください。</p>
  634.                         </dt>
  635.                         <dd class="w-3/5 md:w-full">
  636.                             <div class="flex flex-col">
  637.                                 <dl class="flex flex-col">
  638.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  639.                                         Q1.商品等に関するご案内
  640.                                     </dt>
  641.                                     <dd>
  642.                                         <div>
  643.                                             <ul class="flex flex-wrap md:flex-col gap-6 py-5">
  644.                                                 {% for child in form.is_send_email %}
  645.                                                     <li class="flex items-center">
  646.                                                         {{ form_widget(child) }}
  647.                                                         {{ form_label(child) }}
  648.                                                     </li>
  649.                                                 {% endfor %}
  650.                                             </ul>
  651.                                         </div>
  652.                                         {{ form_errors(form.is_send_email) }}
  653.                                     </dd>
  654.                                 </dl>
  655.                                 <dl class="flex flex-col">
  656.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  657.                                         Q2.まなかを知ったきっかけ
  658.                                     </dt>
  659.                                     <dd>
  660.                                         <div>
  661.                                             <ul class="flex flex-wrap md:flex-col gap-6 py-5">
  662.                                                 {% for child in form.where_did_you_know %}
  663.                                                     <li class="flex items-center">
  664.                                                         {{ form_widget(child) }}
  665.                                                         {{ form_label(child) }}
  666.                                                     </li>
  667.                                                 {% endfor %}
  668.                                             </ul>
  669.                                         </div>
  670.                                         {{ form_errors(form.where_did_you_know) }}
  671.                                     </dd>
  672.                                 </dl>
  673.                                 <dl class="flex flex-col">
  674.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  675.                                         Q3. ご検討中の商品 ※複数可
  676.                                     </dt>
  677.                                     <dd>
  678.                                         <div>
  679.                                             <ul class="flex flex-wrap flex-col gap-4 py-5">
  680.                                                 {% for child in form.purchase_plan %}
  681.                                                     <li class="flex items-center">
  682.                                                         {{ form_widget(child) }}
  683.                                                         {{ form_label(child) }}
  684.                                                     </li>
  685.                                                 {% endfor %}
  686.                                             </ul>
  687.                                         </div>
  688.                                         {{ form_errors(form.purchase_plan) }}
  689.                                     </dd>
  690.                                 </dl>
  691.                                 <dl class="flex flex-col">
  692.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  693.                                         Q4. ご予算
  694.                                     </dt>
  695.                                     <dd>
  696.                                         <div>
  697.                                             <ul class="flex flex-wrap md:flex-col gap-6 py-5">
  698.                                                 {% for child in form.budget %}
  699.                                                     <li class="flex items-center">
  700.                                                         {{ form_widget(child) }}
  701.                                                         {{ form_label(child) }}
  702.                                                     </li>
  703.                                                 {% endfor %}
  704.                                             </ul>
  705.                                         </div>
  706.                                         {{ form_errors(form.budget) }}
  707.                                     </dd>
  708.                                 </dl>
  709.                                 <dl class="flex flex-col">
  710.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  711.                                         Q5. ご供養される場所
  712.                                     </dt>
  713.                                     <dd>
  714.                                         <div>
  715.                                             <ul class="flex flex-wrap md:flex-col gap-6 py-5">
  716.                                                 {% for child in form.enshrine_place %}
  717.                                                     <li class="flex items-center">
  718.                                                         {{ form_widget(child) }}
  719.                                                         {{ form_label(child) }}
  720.                                                     </li>
  721.                                                 {% endfor %}
  722.                                             </ul>
  723.                                         </div>
  724.                                         {{ form_errors(form.enshrine_place) }}
  725.                                     </dd>
  726.                                 </dl>
  727.                                 <dl class="flex flex-col">
  728.                                     <dt class="px-4 py-2.5 bg-[#EEE]">
  729.                                         Q6. その他お問合せ
  730.                                     </dt>
  731.                                     <dd>
  732.                                         {{ form_widget(form.other_contact,{'attr': {'placeholder':'例) その他お問合せ' ,'class': 'h-[120px] w-full border-[#CCC] border rounded mt-4 px-4 py-2 resize-none'}},{id: 'wysiwyg-area'}) }}
  733.                                         {{ form_errors(form.other_contact) }}
  734.                                     </dd>
  735.                                 </dl>
  736.                             </div>
  737.                         </dd>
  738.                     </dl>
  739.                 {% endif %}
  740.             </div>
  741.             <div class="flex flex-col items-center mt-10 md:mt-8">
  742.                 <p class="text-sm mb-6 md:mb-4">
  743.                     <a class="border-b border-black hover" href="{{ url('help_privacy') }}" target="_blank">プライバシーポリシー</a>
  744.                     に同意の上、</p>
  745.                 <button type="submit" class="w-[327px] py-3 rounded-[3px] bg-[#333] text-sm text-white mb-10 md:mb-4 hover" name="mode" value="form">確認画面へ
  746.                 </button>
  747.                 <div class="flex flex-col gap-2 text-xs max-w-[384px] md:max-w-none text-[#999]">
  748.                     <p class="leading-4">※内容によっては、回答をさしあげるのにお時間を頂くこともございます。</p>
  749.                     <p class="leading-4">※休業日は翌営業日以降の対応となりますので、ご了承ください。</p>
  750.                     <p class="leading-4">※inori@manaka-net.comからのメールが受信できるように設定をお願いします。</p>
  751.                 </div>
  752.             </div>
  753.             {# エンティティ拡張の自動出力 #}
  754.             {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  755.                 {% if f.vars.eccube_form_options.form_theme %}
  756.                     {% form_theme f f.vars.eccube_form_options.form_theme %}
  757.                     {{ form_row(f) }}
  758.                 {% else %}
  759.                     <dl>
  760.                         <dt>
  761.                             {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  762.                             {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  763.                         </dt>
  764.                         <dd>
  765.                             <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  766.                                 {{ form_widget(f) }}
  767.                                 {{ form_errors(f) }}
  768.                             </div>
  769.                         </dd>
  770.                     </dl>
  771.                 {% endif %}
  772.             {% endfor %}
  773.         </form>
  774.     </div>
  775.     {% set breadcrumbs = [{'name': 'お問い合わせ(入力ページ)'}] %}
  776.     {{ include('Block/breadcrumbs.twig') }}
  777. {% endblock %}