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. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/ec_module.css', 'user_data') }}">
  15.     <link rel="stylesheet" href="{{ asset('assets/css/contact.css', 'user_data') }}">
  16. {% endblock %}
  18. {% form_theme form 'Form/form_div_layout.twig' %}
  20. {% block javascript %}
  21.     <script>
  22.         document.addEventListener('DOMContentLoaded', function() {
  23.             const form = document.querySelector('.h-adr'); // 対象のformを選ぶ
  24.             form.addEventListener('submit', function(event) {
  25.                 const agreeCheckbox = form.querySelector('input[name="privacy_agree"]');
  26.                 if (agreeCheckbox && !agreeCheckbox.checked) {
  27.                     alert('プライバシーポリシーに同意してください。');
  28.                     event.preventDefault(); // 送信ストップ
  29.                 }
  30.             });
  31.         });
  32.     </script>
  33.     </script>
  34. {% endblock javascript %}
  36. {% block main %}
  37. <style>
  38.     .contact-title {
  39.         white-space: nowrap;
  40.     }
  41. </style>
  42. <section class="contact-title-section">
  43.         <div class="contact-box">
  44.             <h1 class="contact-title">
  45.                <img src="/html/user_data/assets/img/title_ic_inquiry.svg" alt="backet" class="title-ic">
  46.                <span>お問い合わせ</span>
  47.               </h1>
  48.         
  49.             <!-- 四隅の角線 -->
  50.             <div class="corner corner-top-left"></div>
  51.             <div class="corner corner-top-right"></div>
  52.             <div class="corner corner-bottom-left"></div>
  53.             <div class="corner corner-bottom-right"></div>
  54.         
  55.             <div class="contact-content">
  56.                 <p>ご注文や発送に関するご質問などがございましたら、下記フォームよりお気軽にお問い合わせください。</p>
  57.                 <p>なお、当サイトに関するご意見は「ご意見箱」よりお寄せいただけますようお願いいたします。</p>
  58.                 <p>お問い合わせの前に、以下の注意事項をご確認ください。</p>
  59.                 <p class="note">※すべてのご連絡に対して個別に返信できない場合がございます。あらかじめご了承ください。</p>
  60.                 <p class="note">※お問い合わせ対応は、土・日曜・祝日および当社休業日を除く営業時間内となります。</p>
  61.             </div>
  62.         </div>
  63.     </section>
  65.     <section class="contact-section">
  66.         <div class="cart-progress">
  67.             <ul class="cart-progress-list">
  68.                 <li class="cart-progress-item">
  69.                     <div class="cart-progress-spot"></div>
  70.                 </li>
  71.                 <li class="cart-progress-item">
  72.                   <div class="cart-progress-spot"></div>
  73.                 </li>
  74.                 <li class="cart-progress-item">
  75.                     <div class="cart-progress-spot"></div>
  76.                 </li>
  77.             </ul>
  78.         </div>
  80.         <div class="ec-input">
  81.             <form  method="post" action="{{ url('contact') }}" class="h-adr" novalidate>
  82.                 {{ form_widget(form._token) }}
  83.                 <div class="ec-input-pw">
  84.                     <div class="ec-input-pwTitle">お名前</div>
  85.                     <div class="required-call"><span class="required-badge">必須</span></div>
  86.                     <div class="ec-input-pwbox 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.                 </div>
  93.                 <div class="ec-input-pw">
  94.                     <div class="ec-input-pwTitle">フリガナ</div>
  95.                     <div class="required-call"><span class="required-badge">必須</span></div>
  96.                     <div class="ec-input-pwbox ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  97.                         {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' }}) }}
  98.                         {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' }}) }}
  99.                         {{ form_errors(form.kana.kana01) }}
  100.                         {{ form_errors(form.kana.kana02) }}
  101.                     </div>
  102.                 </div>
  103.                 <div class="ec-input-pw">
  104.                     <div class="ec-input-pwTitle">メールアドレス</div>
  105.                     <div class="required-call"><span class="required-badge">必須</span></div>
  106.                     <div class="ec-input-pwbox">
  107.                         {{ form_widget(form.email) }}
  108.                         {{ form_errors(form.email) }}
  109.                     </div>
  110.                 </div>
  111.                 <div class="ec-input-pw">
  112.                     <div class="ec-input-pwTitle">お問い合わせの種類</div>
  113.                     <div class="required-call"><span class="required-badge">必須</span></div>
  114.                     <div class="ec-input-pwbox">
  115.                         {{ form_widget(form.contact_type) }}
  116.                         {{ form_errors(form.contact_type) }}
  117.                     </div>
  118.                 </div>
  119.                 <div class="ec-input-pw ec-input-pw__flextop">
  120.                     <div class="ec-input-pwTitle">お問い合わせ詳細</div>
  121.                     <div class="required-call"><span class="required-badge">必須</span></div>
  122.                     <div class="ec-input-pwbox">
  123.                         {{ form_widget(form.contents,{'attr': {'class': 'custom-textarea'}}) }}
  124.                         {{ form_errors(form.contents) }}
  125.                     </div>
  126.                 </div>
  127.                 <div class="privacy-area">
  128.                     <p class="privacy-link">
  129.                         <a href="https://photo-pub.com/information" target="_blank">
  130.                           <span class="privacy-icon">🔗</span>
  131.                          個人情報のお取り扱いについて
  132.                         </a>
  133.                     </p>
  134.                 
  135.                     <label class="privacy-checkbox">
  136.                         <input type="checkbox" id="agree" name="privacy_agree" value="agree">
  137.                         <span class="checkmark"></span>
  138.                         個人情報のお取り扱いについてに同意する
  139.                     </label>
  140.                 </div>
  141.                 <div class="ec-grid2">
  142.                   <div class="ec-grid2__cell">
  143.                       <div class="ec-login__actions">
  144.                           <button type="submit" class="ec-blockBtn--cancel" name="mode" value="confirm">確認画面へ</button>
  145.                       </div>
  146.                   </div>
  147.               </div>
  148.             </form>
  149.         </div>
  150.   </section>
  151. {% endblock %}