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.     <link rel="stylesheet" href="{{ asset('assets/css/contact.css') }}">
  17. {% endblock %}
  18. {% block javascript %}
  19.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  20. {% endblock javascript %}
  22. {% block main %}
  24.   <!-- breadcrumb section -->
  25.   <div class="breadcrumb-section">
  26.     <div class="container-1360 border-box px-40">
  27.       <nav class="breadcrumb">
  28.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  29.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  30.         <a href="{{ url('contact') }}" class="breadcrumb__item text-black">お問い合わせ</a>
  31.       </nav>
  32.     </div>
  33.   </div>
  35.   <!-- contact section -->
  36.   <div class="container-1200">
  37.     <div class="contact-wrapper">
  38.       <!-- Contact Title Section -->
  39.       <div class="top-header-title-section">
  40.         <div class="top-header-icon-text">
  41.           <div class="top-header-icon-text">
  42.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  43.               <g clip-path="url(#clip0_459_17912)">
  44.               <path d="M16.6665 3.33325H3.33317C2.4165 3.33325 1.67484 4.08325 1.67484 4.99992L1.6665 14.9999C1.6665 15.9166 2.4165 16.6666 3.33317 16.6666H16.6665C17.5832 16.6666 18.3332 15.9166 18.3332 14.9999V4.99992C18.3332 4.08325 17.5832 3.33325 16.6665 3.33325ZM16.6665 6.66659L9.99984 10.8333L3.33317 6.66659V4.99992L9.99984 9.16658L16.6665 4.99992V6.66659Z" fill="#00A854"/>
  45.               </g>
  46.               <defs>
  47.               <clipPath id="clip0_459_17912">
  48.               <rect width="20" height="20" fill="white"/>
  49.               </clipPath>
  50.               </defs>
  51.             </svg>
  53.             <span class="top-header-text">お問い合わせ</span>
  54.           </div>
  55.         </div>
  56.         <h1 class="top-header-title">CONTACT</h1>
  57.       </div>
  59.       <!-- contact content section -->
  60.       <div class="contact-content-section">
  61.         <p class="contact-notice-text">
  62.           回答によっては返信にお時間をいただくことがございます。<br>
  63.           また、休業日は翌営業日以降の対応となりますのでご了承ください。
  64.         </p>
  65.       </div>
  67.       <!-- Contact Form -->
  68.       <div class="contact-form">
  69.         <form id="contact-form" method="post" action="{{ url('contact') }}" class="contact-form-wrapper h-adr" novalidate>
  70.           <span class="p-country-name" style="display:none;">Japan</span>
  71.           {{ form_widget(form._token) }}
  73.           <!-- Name Field -->
  74.           <div class="form-field">
  75.             <div class="form-field-header">
  76.               <span class="form-label">{{ 'common.name'|trans }}</span>
  77.               <span class="required-badge">必須</span>
  78.             </div>
  79.             <div class="form-field-inputs">
  80.               <div class="form-input-wrapper{{ has_errors(form.name.name01) ? ' error' }}">
  81.                 {{ form_widget(form.name.name01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name'|trans}}) }}
  82.                 {{ form_errors(form.name.name01) }}
  83.               </div>
  84.               <div class="form-input-wrapper{{ has_errors(form.name.name02) ? ' error' }}">
  85.                 {{ form_widget(form.name.name02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name'|trans}}) }}
  86.                 {{ form_errors(form.name.name02) }}
  87.               </div>
  88.             </div>
  89.           </div>
  91.           <!-- Name (Kana) Field -->
  92.           <div class="form-field">
  93.             <div class="form-field-header">
  94.               <span class="form-label">{{ 'common.kana'|trans }}</span>
  95.               <span class="required-badge">必須</span>
  96.             </div>
  97.             <div class="form-field-inputs">
  98.               <div class="form-input-wrapper{{ has_errors(form.kana.kana01) ? ' error' }}">
  99.                 {{ form_widget(form.kana.kana01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name_kana'|trans}}) }}
  100.                 {{ form_errors(form.kana.kana01) }}
  101.               </div>
  102.               <div class="form-input-wrapper{{ has_errors(form.kana.kana02) ? ' error' }}">
  103.                 {{ form_widget(form.kana.kana02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name_kana'|trans}}) }}
  104.                 {{ form_errors(form.kana.kana02) }}
  105.               </div>
  106.             </div>
  107.           </div>
  109.           <!-- Address Field -->
  110.           <div class="form-field">
  111.             <div class="form-field-header">
  112.               <span class="form-label">{{ 'common.address'|trans }}</span>
  113.               <span class="required-badge">必須</span>
  114.             </div>
  115.             <div class="form-field-address">
  116.               <!-- Postal Code -->
  117.               <div class="postal-code-section">
  118.                 <div class="flex items-center postal-code-wrap">
  119.                   <span class="postal-label">{{ 'common.postal_symbol'|trans }}</span>
  120.                   <div class="postal-input-wrapper{{ has_errors(form.postal_code) ? ' error' }}">
  121.                     {{ form_widget(form.postal_code, {'attr': {'class': 'postal-input p-postal-code', 'placeholder': '例：5300001'}}) }}
  122.                     {{ form_errors(form.postal_code) }}
  123.                   </div>
  124.                 </div>
  125.                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="postal-search-btn">{{ 'common.search_postal_code'|trans }}</a>
  126.               </div>
  128.               <!-- Prefecture -->
  129.               <div class="prefecture-section">
  130.                 <div class="prefecture-select-wrapper{{ has_errors(form.address.pref) ? ' error' }}">
  131.                   {{ form_widget(form.address.pref, {'attr': {'class': 'prefecture-select p-region-id'}}) }}
  132.                   {{ form_errors(form.address.pref) }}
  133.                 </div>
  134.               </div>
  136.               <!-- City -->
  137.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr01) ? ' error' }}">
  138.                 {{ form_widget(form.address.addr01, {'attr': {'class': 'form-input-full p-locality p-street-address', 'placeholder': 'common.address_sample_01'|trans}}) }}
  139.                 {{ form_errors(form.address.addr01) }}
  140.               </div>
  142.               <!-- Address -->
  143.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr02) ? ' error' }}">
  144.                 {{ form_widget(form.address.addr02, {'attr': {'class': 'form-input-full p-extended-address', 'placeholder': 'common.address_sample_02'|trans}}) }}
  145.                 {{ form_errors(form.address.addr02) }}
  146.               </div>
  147.             </div>
  148.           </div>
  150.           <!-- Phone Field -->
  151.           <div class="form-field">
  152.             <div class="form-field-header">
  153.               <span class="form-label">{{ 'common.phone_number'|trans }}</span>
  154.               <span class="required-badge">必須</span>
  155.             </div>
  156.             <div class="form-field-inputs">
  157.               <div class="form-input-wrapper{{ has_errors(form.phone_number) ? ' error' }}">
  158.                 {{ form_widget(form.phone_number, {'attr': {'class': 'form-input', 'placeholder': '例：11122223333'}}) }}
  159.                 {{ form_errors(form.phone_number) }}
  160.               </div>
  161.             </div>
  162.           </div>
  164.           <!-- Email Field -->
  165.           <div class="form-field">
  166.             <div class="form-field-header">
  167.               <span class="form-label">{{ 'common.mail_address'|trans }}</span>
  168.               <span class="required-badge">必須</span>
  169.             </div>
  170.             <div class="form-field-inputs">
  171.               <div class="form-input-wrapper{{ has_errors(form.email) ? ' error' }}">
  172.                 {{ form_widget(form.email, {'attr': {'class': 'form-input', 'placeholder': '例：test@example.com'}}) }}
  173.                 {{ form_errors(form.email) }}
  174.               </div>
  175.             </div>
  176.           </div>
  178.           <!-- Message Field -->
  179.           <div class="form-field">
  180.             <div class="form-field-header">
  181.               <span class="form-label">{{ 'front.contact.inquiry_contents'|trans }}</span>
  182.               <span class="required-badge">必須</span>
  183.             </div>
  184.             <div class="form-field-inputs">
  185.               <div class="form-textarea-wrapper{{ has_errors(form.contents) ? ' error' }}">
  186.                 {{ form_widget(form.contents, {'attr': {'class': 'form-textarea', 'placeholder': 'お問い合わせ内容をご記入ください'}}) }}
  187.                 {{ form_errors(form.contents) }}
  188.               </div>
  189.             </div>
  190.           </div>
  192.           {# エンティティ拡張の自動出力 #}
  193.           {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  194.             {% if f.vars.eccube_form_options.form_theme %}
  195.               {% form_theme f f.vars.eccube_form_options.form_theme %}
  196.               <div class="form-field">
  197.                 <div class="form-field-header">
  198.                   {{ form_label(f) }}
  199.                 </div>
  200.                 <div class="form-field-inputs">
  201.                   {{ form_row(f) }}
  202.                 </div>
  203.               </div>
  204.             {% else %}
  205.               <div class="form-field">
  206.                 <div class="form-field-header">
  207.                   {{ form_label(f) }}
  208.                 </div>
  209.                 <div class="form-field-inputs">
  210.                   <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  211.                     {{ form_widget(f, {'attr': {'class': 'form-input'}}) }}
  212.                     {{ form_errors(f) }}
  213.                   </div>
  214.                 </div>
  215.               </div>
  216.             {% endif %}
  217.           {% endfor %}
  218.             <!-- Submit Button -->
  219.             <div class="submit-section">
  220.                 <button type="submit" class="submit-btn" form="contact-form" name="mode" value="confirm">{{ 'common.go_to_confirm'|trans }}</button>
  221.             </div>
  222.         </form>
  223.       </div>
  225.     </div>
  226.   </div>
  228. {% endblock %}