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.     <script src="{{ asset('assets/js/customer-input-validate.js') }}"></script>
  21.     <script>
  22.     $(function() {
  23.         CustomerInputValidate.bindFormValidation($('#contact-form'), {
  24.             nameSelector: '#contact_name_name01, #contact_name_name02',
  25.             kanaSelector: '#contact_kana_kana01, #contact_kana_kana02',
  26.             kanaHiraganaHint: true,
  27.             kanaHintSelector: '#contact-kana-hiragana-hint',
  28.             phoneSelector: '#contact_phone_number',
  29.             postalCodeSelector: '#contact_postal_code',
  30.             prefSelector: '#contact_address_pref',
  31.             addr01Selector: '#contact_address_addr01',
  32.             addr02Selector: '#contact_address_addr02',
  33.             emailSelector: '#contact_email',
  34.             requiredSelector: '#contact_contents',
  35.             wrapperSelector: '.form-input-wrapper, .postal-input-wrapper, .prefecture-select-wrapper, .form-input-full-wrapper, .form-textarea-wrapper',
  36.             fieldSelectors: [
  37.                 '#contact_name_name01',
  38.                 '#contact_name_name02',
  39.                 '#contact_kana_kana01',
  40.                 '#contact_kana_kana02',
  41.                 '#contact_postal_code',
  42.                 '#contact_address_pref',
  43.                 '#contact_address_addr01',
  44.                 '#contact_address_addr02',
  45.                 '#contact_phone_number',
  46.                 '#contact_email',
  47.                 '#contact_contents'
  48.             ],
  49.             showServerErrors: {{ form.vars.submitted and not form.vars.valid ? 'true' : 'false' }}
  50.         });
  51.     });
  52.     </script>
  53. {% endblock javascript %}
  55. {% block main %}
  57.   <!-- breadcrumb section -->
  58.   <div class="breadcrumb-section">
  59.     <div class="container-1360 border-box px-40">
  60.       <nav class="breadcrumb">
  61.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  62.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  63.         <a href="{{ url('contact') }}" class="breadcrumb__item text-black">お問い合わせ</a>
  64.       </nav>
  65.     </div>
  66.   </div>
  68.   <!-- contact section -->
  69.   <div class="container-1200">
  70.     <div class="contact-wrapper">
  71.       <!-- Contact Title Section -->
  72.       <div class="top-header-title-section">
  73.         <div class="top-header-icon-text">
  74.           <div class="top-header-icon-text">
  75.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  76.               <g clip-path="url(#clip0_459_17912)">
  77.               <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"/>
  78.               </g>
  79.               <defs>
  80.               <clipPath id="clip0_459_17912">
  81.               <rect width="20" height="20" fill="white"/>
  82.               </clipPath>
  83.               </defs>
  84.             </svg>
  86.             <span class="top-header-text">お問い合わせ</span>
  87.           </div>
  88.         </div>
  89.         <h1 class="top-header-title">CONTACT</h1>
  90.       </div>
  92.       <!-- contact content section -->
  93.       <div class="contact-content-section">
  94.         <p class="contact-notice-text">
  95.           回答によっては返信にお時間をいただくことがございます。<br>
  96.           また、休業日は翌営業日以降の対応となりますのでご了承ください。
  97.         </p>
  98.       </div>
  100.       <!-- Contact Form -->
  101.       <div class="contact-form">
  102.         <form id="contact-form" method="post" action="{{ url('contact') }}" class="contact-form-wrapper h-adr" novalidate>
  103.           <span class="p-country-name" style="display:none;">Japan</span>
  104.           {{ form_widget(form._token) }}
  106.           <!-- Name Field -->
  107.           <div class="form-field">
  108.             <div class="form-field-header">
  109.               <span class="form-label">{{ 'common.name'|trans }}</span>
  110.               <span class="required-badge">必須</span>
  111.             </div>
  112.             <div class="form-field-inputs">
  113.               <div class="form-input-wrapper{{ has_errors(form.name.name01) ? ' error' }}">
  114.                 {{ form_widget(form.name.name01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name'|trans}}) }}
  115.                 {{ form_errors(form.name.name01) }}
  116.               </div>
  117.               <div class="form-input-wrapper{{ has_errors(form.name.name02) ? ' error' }}">
  118.                 {{ form_widget(form.name.name02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name'|trans}}) }}
  119.                 {{ form_errors(form.name.name02) }}
  120.               </div>
  121.             </div>
  122.           </div>
  124.           <!-- Name (Kana) Field -->
  125.           <div class="form-field">
  126.             <div class="form-field-header">
  127.               <span class="form-label">{{ 'common.kana'|trans }}</span>
  128.               <span class="required-badge">必須</span>
  129.             </div>
  130.             <div class="form-field-body">
  131.               <div class="form-field-inputs">
  132.                 <div class="form-input-wrapper{{ has_errors(form.kana.kana01) ? ' error' }}">
  133.                   {{ form_widget(form.kana.kana01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name_kana'|trans}}) }}
  134.                   {{ form_errors(form.kana.kana01) }}
  135.                 </div>
  136.                 <div class="form-input-wrapper{{ has_errors(form.kana.kana02) ? ' error' }}">
  137.                   {{ form_widget(form.kana.kana02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name_kana'|trans}}) }}
  138.                   {{ form_errors(form.kana.kana02) }}
  139.                 </div>
  140.               </div>
  141.               <p class="form-field-hint kana-hiragana-hint" id="contact-kana-hiragana-hint" hidden>
  142.                 {{ 'front.contact.kana_hiragana_hint'|trans }}
  143.               </p>
  144.             </div>
  145.           </div>
  147.           <!-- Address Field -->
  148.           <div class="form-field">
  149.             <div class="form-field-header">
  150.               <span class="form-label">{{ 'common.address'|trans }}</span>
  151.               <span class="required-badge">必須</span>
  152.             </div>
  153.             <div class="form-field-address">
  154.               <!-- Postal Code -->
  155.               <div class="postal-code-section">
  156.                 <div class="flex items-center postal-code-wrap">
  157.                   <span class="postal-label">{{ 'common.postal_symbol'|trans }}</span>
  158.                   <div class="postal-input-wrapper{{ has_errors(form.postal_code) ? ' error' }}">
  159.                     {{ form_widget(form.postal_code, {'attr': {'class': 'postal-input p-postal-code', 'placeholder': '例：5300001'}}) }}
  160.                     {{ form_errors(form.postal_code) }}
  161.                   </div>
  162.                 </div>
  163.                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="postal-search-btn">{{ 'common.search_postal_code'|trans }}</a>
  164.               </div>
  166.               <!-- Prefecture -->
  167.               <div class="prefecture-section">
  168.                 <div class="prefecture-select-wrapper{{ has_errors(form.address.pref) ? ' error' }}">
  169.                   {{ form_widget(form.address.pref, {'attr': {'class': 'prefecture-select p-region-id'}}) }}
  170.                   {{ form_errors(form.address.pref) }}
  171.                 </div>
  172.               </div>
  174.               <!-- City -->
  175.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr01) ? ' error' }}">
  176.                 {{ form_widget(form.address.addr01, {'attr': {'class': 'form-input-full p-locality p-street-address', 'placeholder': 'common.address_sample_01'|trans}}) }}
  177.                 {{ form_errors(form.address.addr01) }}
  178.               </div>
  180.               <!-- Address -->
  181.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr02) ? ' error' }}">
  182.                 {{ form_widget(form.address.addr02, {'attr': {'class': 'form-input-full p-extended-address', 'placeholder': 'common.address_sample_02'|trans}}) }}
  183.                 {{ form_errors(form.address.addr02) }}
  184.               </div>
  185.             </div>
  186.           </div>
  188.           <!-- Phone Field -->
  189.           <div class="form-field">
  190.             <div class="form-field-header">
  191.               <span class="form-label">{{ 'common.phone_number'|trans }}</span>
  192.               <span class="required-badge">必須</span>
  193.             </div>
  194.             <div class="form-field-inputs">
  195.               <div class="form-input-wrapper{{ has_errors(form.phone_number) ? ' error' }}">
  196.                 {{ form_widget(form.phone_number, {'attr': {'class': 'form-input', 'placeholder': '例：11122223333'}}) }}
  197.                 {{ form_errors(form.phone_number) }}
  198.               </div>
  199.             </div>
  200.           </div>
  202.           <!-- Email Field -->
  203.           <div class="form-field">
  204.             <div class="form-field-header">
  205.               <span class="form-label">{{ 'common.mail_address'|trans }}</span>
  206.               <span class="required-badge">必須</span>
  207.             </div>
  208.             <div class="form-field-inputs">
  209.               <div class="form-input-wrapper{{ has_errors(form.email) ? ' error' }}">
  210.                 {{ form_widget(form.email, {'attr': {'class': 'form-input', 'placeholder': '例：test@example.com'}}) }}
  211.                 {{ form_errors(form.email) }}
  212.               </div>
  213.             </div>
  214.           </div>
  216.           <!-- Message Field -->
  217.           <div class="form-field">
  218.             <div class="form-field-header">
  219.               <span class="form-label">{{ 'front.contact.inquiry_contents'|trans }}</span>
  220.               <span class="required-badge">必須</span>
  221.             </div>
  222.             <div class="form-field-inputs">
  223.               <div class="form-textarea-wrapper{{ has_errors(form.contents) ? ' error' }}">
  224.                 {{ form_widget(form.contents, {'attr': {'class': 'form-textarea', 'placeholder': 'お問い合わせ内容をご記入ください'}}) }}
  225.                 {{ form_errors(form.contents) }}
  226.               </div>
  227.             </div>
  228.           </div>
  230.           {# エンティティ拡張の自動出力 #}
  231.           {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  232.             {% if f.vars.eccube_form_options.form_theme %}
  233.               {% form_theme f f.vars.eccube_form_options.form_theme %}
  234.               <div class="form-field">
  235.                 <div class="form-field-header">
  236.                   {{ form_label(f) }}
  237.                 </div>
  238.                 <div class="form-field-inputs">
  239.                   {{ form_row(f) }}
  240.                 </div>
  241.               </div>
  242.             {% else %}
  243.               <div class="form-field">
  244.                 <div class="form-field-header">
  245.                   {{ form_label(f) }}
  246.                 </div>
  247.                 <div class="form-field-inputs">
  248.                   <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  249.                     {{ form_widget(f, {'attr': {'class': 'form-input'}}) }}
  250.                     {{ form_errors(f) }}
  251.                   </div>
  252.                 </div>
  253.               </div>
  254.             {% endif %}
  255.           {% endfor %}
  256.             <!-- Submit Button -->
  257.             <div class="submit-section">
  258.                 <button type="submit" class="submit-btn" form="contact-form" name="mode" value="confirm">{{ 'common.go_to_confirm'|trans }}</button>
  259.             </div>
  260.         </form>
  261.       </div>
  263.     </div>
  264.   </div>
  266. {% endblock %}