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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% form_theme form 'Form/form_div_layout.twig' %}
  5. {% set body_class = 'contact mypage_change mypage' %}
  7. {% block javascript %}
  8.   <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  9.   <script>
  10.     document.addEventListener('DOMContentLoaded', function () {
  11.       // 同意チェックボックスと送信ボタンの要素を取得
  12.       const privacyCheckbox = document.getElementById('privacy_policy_check');
  13.       const submitButton = document.querySelector('button[type="submit"]');
  15.       // 初期状態では送信ボタンを無効化
  16.       submitButton.disabled = true;
  18.       // チェックボックスの状態が変わったときのイベントリスナー
  19.       privacyCheckbox.addEventListener('change', function () {
  20.         // チェックボックスがチェックされていれば送信ボタンを有効化、そうでなければ無効化
  21.         submitButton.disabled = !this.checked;
  22.       });
  23.     });
  24.   </script>
  25. {% endblock javascript %}
  27. {% block main %}
  29.   <div class="ec-contactRole">
  30.     <div class="ec-pageHeader">
  31.       <h1>{{ 'お問い合わせ'|trans }}</h1>
  32.     </div>
  33.     <div class="ec-off1Grid">
  34.       <div class="ec-off1Grid__cell">
  35.         <form method="post" action="{{ url('contact') }}" class="h-adr" novalidate>
  36.           <span class="p-country-name" style="display:none;">Japan</span>
  37.           {{ form_widget(form._token) }}
  38.           <p class="ec-para-normal">
  39. 【注意事項】<br>
  40. ・営業時間内（10:00～17:00）に順次返信いたします。<br>
  41. ・お時間を頂戴する場合がございますので、ご了承ください。<br>
  42. ・お問い合わせ内容により、お電話で連絡させていただく場合がございます。<br>
  43. ・お問い合わせの前に必ず『よくあるご質問』をご確認ください。<br>
  44. <br>
  45. 【領収書】<br>
  46. 「発送完了メールのURL」または「マイページ（会員のお客様のみ）」よりPDFデータがダウンロード可能です。<br>
  47. ※代金引換の領収書につきましては、ヤマト運輸が発行する送り状（伝票）の控えを領収書とさせていただきます。<br>
  48. ※その他詳細につきましては『<a href="{{ url('user_data', {'route': 'faq'}) }}">よくあるご質問</a>』をご確認ください。<br>
  49. <br>
  50. 【ご注文（オンラインショップ）に関するお問い合わせ】<br>
  51. 必ず「ご注文番号」をご記載ください。<br>
  52. <br>
  53. 【大口注文（請求書支払）に関するお問い合わせ】<br>
  54. 請求書支払いご希望の場合は『<a href="{{ url('homepage') }}contact_bulk_orders">大口注文のお客様</a>』を必ずご確認ください。
  56.           </p>
  57.           <div class="ec-borderedDefs">
  58.             <p class="ec-borderedDefsAlert">「※」印は入力必須項目</p>
  59.             <dl>
  60.               <dt>
  61.                 {{ form_label(form.type, 'お問合せ窓口', { 'label_attr': { 'class': 'ec-label' }}) }}
  62.               </dt>
  63.               <dd>
  64.                 <div class="ec-input{{ has_errors(form.type) ? ' error' }}">
  65.                   {{ form_widget(form.type) }}
  66.                   {{ form_errors(form.type) }}
  67.                 </div>
  68.               </dd>
  69.             </dl>
  70.             <dl>
  71.               <dt>
  72.                 {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
  73.               </dt>
  74.               <dd>
  75.                 <div class="ec-input{{ has_errors(form.company_name) ? ' error' }}">
  76.                   {{ form_widget(form.company_name) }}
  77.                   {{ form_errors(form.company_name) }}
  78.                 </div>
  79.               </dd>
  80.             </dl>
  81.             <dl>
  82.               <dt>
  83.                 {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  84.               </dt>
  85.               <dd>
  86.                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  87.                   {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' }}) }}
  88.                   {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' }}) }}
  89.                   {{ form_errors(form.name.name01) }}
  90.                   {{ form_errors(form.name.name02) }}
  91.                 </div>
  92.               </dd>
  93.             </dl>
  94.             <dl>
  95.               <dt>
  96.                 {{ form_label(form.kana, 'お名前(フリガナ)', {'label_attr': {'class': 'ec-label'}}) }}
  97.               </dt>
  98.               <dd>
  99.                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  100.                   {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' }}) }}
  101.                   {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' }}) }}
  102.                   {{ form_errors(form.kana.kana01) }}
  103.                   {{ form_errors(form.kana.kana02) }}
  104.                 </div>
  105.               </dd>
  106.             </dl>
  107.             <dl class="ec-telInputWrap">
  108.               <dt>
  109.                 {{ form_label(form.phone_number, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  110.               </dt>
  111.               <dd>
  112.                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  113.                   {{ form_widget(form.phone_number) }}
  114.                   {{ form_errors(form.phone_number) }}
  115.                 </div>
  116.               </dd>
  117.             </dl>
  118.             <dl class="ec-mailInputWrap">
  119.               <dt>
  120.                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  121.               </dt>
  122.               <dd>
  123.                 <div class="ec-input{{ has_errors(form.email) ? ' error' }}">
  124.                   {{ form_widget(form.email) }}
  125.                   {{ form_errors(form.email) }}
  126.                 </div>
  127.               </dd>
  128.             </dl>
  129.             <dl>
  130.               <dt>
  131.                 {{ form_label(form.title, '件名', { 'label_attr': { 'class': 'ec-label' }}) }}
  132.               </dt>
  133.               <dd>
  134.                 <div class="ec-input{{ has_errors(form.title) ? ' error' }}">
  135.                   {{ form_widget(form.title) }}
  136.                   {{ form_errors(form.title) }}
  137.                 </div>
  138.               </dd>
  139.             </dl>
  140.             <dl>
  141.               <dt>
  142.                 {{ form_label(form.order_id, 'ご注文番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  143.               </dt>
  144.               <dd>
  145.                 <div class="ec-input{{ has_errors(form.order_id) ? ' error' }}">
  146.                   {{ form_widget(form.order_id) }}
  147.                   {{ form_errors(form.order_id) }}
  148.                 </div>
  149.               </dd>
  150.             </dl>
  151.             <dl>
  152.               <dt>
  153.                 {{ form_label(form.contents, 'お問い合わせ内容', { 'label_attr': { 'class': 'ec-label' }}) }}
  154.               </dt>
  155.               <dd>
  156.                 <div class="ec-input{{ has_errors(form.contents) ? ' error' }}">
  157.                   {{ form_widget(form.contents) }}
  158.                   {{ form_errors(form.contents) }}
  159.                 </div>
  160.                 {#<p>{{ 'ご注文に関するお問い合わせには、必ず「ご注文番号」をご記入くださいますようお願いいたします。'|trans }}</p>#}
  161.               </dd>
  162.             </dl>
  165.             {# エンティティ拡張の自動出力 #}
  166.             {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  167.               {% if f.vars.eccube_form_options.form_theme %}
  168.                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  169.                 {{ form_row(f) }}
  170.               {% else %}
  171.                 <dl>
  172.                   <dt>
  173.                     {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  174.                     {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  175.                   </dt>
  176.                   <dd>
  177.                     <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  178.                       {{ form_widget(f) }}
  179.                       {{ form_errors(f) }}
  180.                     </div>
  181.                   </dd>
  182.                 </dl>
  183.               {% endif %}
  184.             {% endfor %}
  185.           </div>
  187.           <!-- 個人情報保護方針同意チェックボックス -->
  188.           <div class="ec-registerRole__actions">
  189.             <div class="ec-checkbox">
  190.               <label>
  191.                 <input type="checkbox" id="privacy_policy_check">
  192.                 <a href="{{ url('help_privacy') }}">個人情報保護方針</a>に同意してお進みください
  193.               </label>
  194.             </div>
  195.           </div>
  197.           <div class="ec-RegisterRole__actions">
  198.             <div class="ec-off4Grid">
  199.               <div class="ec-off4Grid__cell">
  200.                 <button type="submit" class="ec-blockBtn--action" name="mode" value="confirm">{{ '確認ページへ'|trans }}
  201.                 </button>
  202.               </div>
  203.             </div>
  204.           </div>
  205.         </form>
  206.       </div>
  207.     </div>
  208.     <div class="ec-contactBottom">
  209.       <div class="ec-contactBottomHead">
  210.         <p>お電話でのお問合せ</p>
  211.       </div>
  212.       <div class="ec-contactBottomBody">
  213.         <div class="ec-contactBottomInfo">
  214.           <p>0120-1971-21<br>
  215. <br>
  216. 受付時間：10:00～17:00（平日）<br>
  217. 定休日：土・日・祝日・年末年始
  218. </p>
  219.         </div>
  220.         {#<div class="ec-contactBottomDesc">#}
  221.         {#  <p>・お客様とのお電話は、内容を正確に承るために録音させていただいております。<br>・お客様に電話番号の通知をお願いしております。<br>　非通知設定の場合は、恐れ入りますが電話番号の最初に「186」をつけておかけください。</p>#}
  222.         {#</div>#}
  223.       </div>
  224.     </div>
  225.   </div>
  227.   <style>
  228.     .ec-checkbox {
  229.       margin-bottom: 20px;
  230.       text-align: center;
  231.     }
  233.     .ec-checkbox label {
  234.       display: inline-flex;
  235.       align-items: center;
  236.       cursor: pointer;
  237.     }
  239.     .ec-checkbox input[type="checkbox"] {
  240.       margin-right: 5px;
  241.       cursor: pointer;
  242.       position: relative;
  243.       width: 16px;
  244.       height: 16px;
  245.     }
  246.   </style>
  247. {% endblock %}