app/template/default/Entry/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. {% set body_class = 'registration_page' %}
  15. {% form_theme form 'Form/form_div_layout.twig' %}
  17. {% block stylesheet %}
  18.     <link rel="stylesheet" href="{{ asset('assets/css/contact.css') }}">
  19. {% endblock %}
  20. {% block javascript %}
  21.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  22.     <script src="{{ asset('assets/js/customer-input-validate.js') }}"></script>
  23.     <script>
  24.     $(function() {
  25.         CustomerInputValidate.bindFormValidation($('#entry-form'), {
  26.             nameSelector: '#entry_name_name01, #entry_name_name02',
  27.             kanaSelector: '#entry_kana_kana01, #entry_kana_kana02',
  28.             kanaHiraganaHint: true,
  29.             kanaHintSelector: '#entry-kana-hiragana-hint',
  30.             phoneSelector: '#entry_phone_number',
  31.             postalCodeSelector: '#entry_postal_code',
  32.             prefSelector: '#entry_address_pref',
  33.             addr01Selector: '#entry_address_addr01',
  34.             addr02Selector: '#entry_address_addr02',
  35.             emailSelector: '#entry_email_first',
  36.             emailConfirmSelector: '#entry_email_second',
  37.             passwordSelector: '#entry_plain_password_first',
  38.             passwordConfirmSelector: '#entry_plain_password_second',
  39.             checkboxSelector: '#entry_user_policy_check',
  40.             wrapperSelector: '.form-input-wrapper, .postal-input-wrapper, .prefecture-select-wrapper, .form-input-full-wrapper, .birth-date-wrapper, .gender-radio-wrapper, .entry-terms-wrapper',
  41.             fieldSelectors: [
  42.                 '#entry_name_name01',
  43.                 '#entry_name_name02',
  44.                 '#entry_kana_kana01',
  45.                 '#entry_kana_kana02',
  46.                 '#entry_postal_code',
  47.                 '#entry_address_pref',
  48.                 '#entry_address_addr01',
  49.                 '#entry_address_addr02',
  50.                 '#entry_phone_number',
  51.                 '#entry_email_first',
  52.                 '#entry_email_second',
  53.                 '#entry_plain_password_first',
  54.                 '#entry_plain_password_second',
  55.                 '#entry_user_policy_check'
  56.             ],
  57.             showServerErrors: {{ form.vars.submitted and not form.vars.valid ? 'true' : 'false' }}
  58.         });
  59.     });
  60.     </script>
  61. {% endblock javascript %}
  63. {% block main %}
  65.   <!-- breadcrumb section -->
  66.   <div class="breadcrumb-section">
  67.     <div class="container-1360 border-box px-40">
  68.       <nav class="breadcrumb">
  69.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  70.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  71.         <a href="{{ url('entry') }}" class="breadcrumb__item text-black">新規会員登録</a>
  72.       </nav>
  73.     </div>
  74.   </div>
  76.   <!-- entry section -->
  77.   <div class="container-1200">
  78.     <div class="contact-wrapper">
  79.       <!-- Entry Title Section -->
  80.       <div class="top-header-title-section">
  81.         <div class="top-header-icon-text">
  82.           <div class="top-header-icon-text">
  83.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  84.               <g clip-path="url(#clip0_459_17914)">
  85.               <path d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z" fill="#00A854"/>
  86.               <path d="M10 12C5.58172 12 2 13.7909 2 16V20H18V16C18 13.7909 14.4183 12 10 12Z" fill="#00A854"/>
  87.               </g>
  88.               <defs>
  89.               <clipPath id="clip0_459_17914">
  90.               <rect width="20" height="20" fill="white"/>
  91.               </clipPath>
  92.               </defs>
  93.             </svg>
  95.             <span class="top-header-text">新規会員登録</span>
  96.           </div>
  97.         </div>
  98.         <h1 class="top-header-title">SIGN UP</h1>
  99.       </div>
  101.       <!-- Entry Form -->
  102.       <div class="contact-form">
  103.         <form method="post" action="{{ url('entry') }}" novalidate class="contact-form-wrapper h-adr" id="entry-form">
  104.           <span class="p-country-name" style="display:none;">Japan</span>
  105.           {{ form_widget(form._token) }}
  107.           <!-- Name Field -->
  108.           <div class="form-field">
  109.             <div class="form-field-header">
  110.               <span class="form-label">{{ 'common.name'|trans }}</span>
  111.               <span class="required-badge">必須</span>
  112.             </div>
  113.             <div class="form-field-inputs">
  114.               <div class="form-input-wrapper{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  115.                 {{ form_widget(form.name.name01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name'|trans}}) }}
  116.                 {{ form_errors(form.name.name01) }}
  117.               </div>
  118.               <div class="form-input-wrapper{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  119.                 {{ form_widget(form.name.name02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name'|trans}}) }}
  120.                 {{ form_errors(form.name.name02) }}
  121.               </div>
  122.             </div>
  123.           </div>
  125.           <!-- Name (Kana) Field -->
  126.           <div class="form-field">
  127.             <div class="form-field-header">
  128.               <span class="form-label">{{ 'common.kana'|trans }}</span>
  129.               <span class="required-badge">必須</span>
  130.             </div>
  131.             <div class="form-field-body">
  132.               <div class="form-field-inputs">
  133.                 <div class="form-input-wrapper{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  134.                   {{ form_widget(form.kana.kana01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name_kana'|trans}}) }}
  135.                   {{ form_errors(form.kana.kana01) }}
  136.                 </div>
  137.                 <div class="form-input-wrapper{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  138.                   {{ form_widget(form.kana.kana02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name_kana'|trans}}) }}
  139.                   {{ form_errors(form.kana.kana02) }}
  140.                 </div>
  141.               </div>
  142.               <p class="form-field-hint kana-hiragana-hint" id="entry-kana-hiragana-hint" hidden>
  143.                 {{ 'front.entry.kana_hiragana_hint'|trans }}
  144.               </p>
  145.             </div>
  146.           </div>
  148.           <!-- Company Name Field -->
  149.           {% if form.company_name is defined %}
  150.           <div class="form-field">
  151.             <div class="form-field-header">
  152.               <span class="form-label">{{ 'common.company_name'|trans }}</span>
  153.             </div>
  154.             <div class="form-field-inputs">
  155.               <div class="form-input-wrapper{{ has_errors(form.company_name) ? ' error' }}">
  156.                 {{ form_widget(form.company_name, {'attr': {'class': 'form-input'}}) }}
  157.                 {{ form_errors(form.company_name) }}
  158.               </div>
  159.             </div>
  160.           </div>
  161.           {% endif %}
  163.           <!-- Address Field -->
  164.           <div class="form-field">
  165.             <div class="form-field-header">
  166.               <span class="form-label">{{ 'common.address'|trans }}</span>
  167.               <span class="required-badge">必須</span>
  168.             </div>
  169.             <div class="form-field-address">
  170.               <!-- Postal Code -->
  171.               <div class="postal-code-section">
  172.                 <div class="flex items-center postal-code-wrap">
  173.                   <span class="postal-label">{{ 'common.postal_symbol'|trans }}</span>
  174.                   <div class="postal-input-wrapper{{ has_errors(form.postal_code) ? ' error' }}">
  175.                     {{ form_widget(form.postal_code, {'attr': {'class': 'postal-input p-postal-code', 'placeholder': '例：5300001'}}) }}
  176.                     {{ form_errors(form.postal_code) }}
  177.                   </div>
  178.                 </div>
  179.                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="postal-search-btn">{{ 'common.search_postal_code'|trans }}</a>
  180.               </div>
  182.               <!-- Prefecture -->
  183.               <div class="prefecture-section">
  184.                 <div class="prefecture-select-wrapper{{ has_errors(form.address.pref) ? ' error' }}">
  185.                   {{ form_widget(form.address.pref, {'attr': {'class': 'prefecture-select p-region-id'}}) }}
  186.                   {{ form_errors(form.address.pref) }}
  187.                 </div>
  188.               </div>
  190.               <!-- City -->
  191.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr01) ? ' error' }}">
  192.                 {{ form_widget(form.address.addr01, {'attr': {'class': 'form-input-full p-locality p-street-address', 'placeholder': 'common.address_sample_01'|trans}}) }}
  193.                 {{ form_errors(form.address.addr01) }}
  194.               </div>
  196.               <!-- Address -->
  197.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr02) ? ' error' }}">
  198.                 {{ form_widget(form.address.addr02, {'attr': {'class': 'form-input-full p-extended-address', 'placeholder': 'common.address_sample_02'|trans}}) }}
  199.                 {{ form_errors(form.address.addr02) }}
  200.               </div>
  201.             </div>
  202.           </div>
  204.           <!-- Phone Field -->
  205.           <div class="form-field">
  206.             <div class="form-field-header">
  207.               <span class="form-label">{{ 'common.phone_number'|trans }}</span>
  208.               <span class="required-badge">必須</span>
  209.             </div>
  210.             <div class="form-field-inputs">
  211.               <div class="form-input-wrapper{{ has_errors(form.phone_number) ? ' error' }}">
  212.                 {{ form_widget(form.phone_number, {'attr': {'class': 'form-input', 'placeholder': '例：11122223333'}}) }}
  213.                 {{ form_errors(form.phone_number) }}
  214.               </div>
  215.             </div>
  216.           </div>
  218.           <!-- Email Field -->
  219.           <div class="form-field">
  220.             <div class="form-field-header">
  221.               <span class="form-label">{{ 'common.mail_address'|trans }}</span>
  222.               <span class="required-badge">必須</span>
  223.             </div>
  224.             <div class="form-field-inputs email-field-inputs">
  225.               <div class="form-input-wrapper{{ has_errors(form.email.first) ? ' error' }}">
  226.                 {{ form_widget(form.email.first, {'attr': {'class': 'form-input', 'placeholder': 'common.mail_address_sample'|trans}}) }}
  227.                 {{ form_errors(form.email.first) }}
  228.               </div>
  229.               <div class="form-input-wrapper{{ has_errors(form.email.second) ? ' error' }}">
  230.                 {{ form_widget(form.email.second, {'attr': {'class': 'form-input', 'placeholder': 'common.repeated_confirm'|trans}}) }}
  231.                 {{ form_errors(form.email.second) }}
  232.               </div>
  233.             </div>
  234.           </div>
  236.           <!-- Password Field -->
  237.           <div class="form-field">
  238.             <div class="form-field-header">
  239.               <span class="form-label">{{ 'common.password'|trans }}</span>
  240.               <span class="required-badge">必須</span>
  241.             </div>
  242.             <div class="form-field-inputs password-field-inputs">
  243.               <div class="form-input-wrapper{{ has_errors(form.plain_password.first) ? ' error' }}">
  244.                 {{ form_widget(form.plain_password.first, {
  245.                   'attr': {
  246.                     'class': 'form-input',
  247.                     'placeholder': 'common.password_sample'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }),
  248.                   },
  249.                   'type': 'password'
  250.                 }) }}
  251.                 {{ form_errors(form.plain_password.first) }}
  252.               </div>
  253.               <div class="form-input-wrapper{{ has_errors(form.plain_password.second) ? ' error' }}">
  254.                 {{ form_widget(form.plain_password.second, {
  255.                   'attr': {
  256.                     'class': 'form-input',
  257.                     'placeholder': 'common.repeated_confirm'|trans,
  258.                   },
  259.                   'type': 'password'
  260.                 }) }}
  261.                 {{ form_errors(form.plain_password.second) }}
  262.               </div>
  263.             </div>
  264.           </div>
  266.           <!-- Birth Day Field -->
  267.           {% if form.birth is defined %}
  268.           <div class="form-field">
  269.             <div class="form-field-header">
  270.               <span class="form-label">{{ 'common.birth_day'|trans }}</span>
  271.             </div>
  272.             <div class="form-field-inputs">
  273.               <div class="birth-date-wrapper{{ has_errors(form.birth) ? ' error' }}">
  274.                 {{ form_widget(form.birth.year, {'attr': {'class': 'birth-select'}}) }}
  275.                 <span class="birth-separator">/</span>
  276.                 {{ form_widget(form.birth.month, {'attr': {'class': 'birth-select'}}) }}
  277.                 <span class="birth-separator">/</span>
  278.                 {{ form_widget(form.birth.day, {'attr': {'class': 'birth-select'}}) }}
  279.                 {{ form_errors(form.birth) }}
  280.               </div>
  281.             </div>
  282.           </div>
  283.           {% endif %}
  285.           <!-- Gender Field -->
  286.           {% if form.sex is defined %}
  287.           <div class="form-field">
  288.             <div class="form-field-header">
  289.               <span class="form-label">{{ 'common.gender'|trans }}</span>
  290.             </div>
  291.             <div class="form-field-inputs">
  292.               <div class="gender-radio-wrapper{{ has_errors(form.sex) ? ' error' }}">
  293.                 {{ form_widget(form.sex) }}
  294.                 {{ form_errors(form.sex) }}
  295.               </div>
  296.             </div>
  297.           </div>
  298.           {% endif %}
  300.           <!-- Job Field -->
  301.           {% if form.job is defined %}
  302.           <div class="form-field">
  303.             <div class="form-field-header">
  304.               <span class="form-label">{{ 'common.job'|trans }}</span>
  305.             </div>
  306.             <div class="form-field-inputs">
  307.               <div class="form-input-wrapper{{ has_errors(form.job) ? ' error' }}">
  308.                 <div class="prefecture-select-wrapper">
  309.                   {{ form_widget(form.job, {'attr': {'class': 'prefecture-select'}}) }}
  310.                   {{ form_errors(form.job) }}
  311.                 </div>
  312.               </div>
  313.             </div>
  314.           </div>
  315.           {% endif %}
  317.           {# エンティティ拡張の自動出力 #}
  318.           {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  319.             {% if f.vars.eccube_form_options.form_theme %}
  320.               {% form_theme f f.vars.eccube_form_options.form_theme %}
  321.               <div class="form-field">
  322.                 <div class="form-field-header">
  323.                   {{ form_label(f) }}
  324.                 </div>
  325.                 <div class="form-field-inputs">
  326.                   {{ form_row(f) }}
  327.                 </div>
  328.               </div>
  329.             {% else %}
  330.               <div class="form-field">
  331.                 <div class="form-field-header">
  332.                   {{ form_label(f) }}
  333.                 </div>
  334.                 <div class="form-field-inputs">
  335.                   <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  336.                     {{ form_widget(f, {'attr': {'class': 'form-input'}}) }}
  337.                     {{ form_errors(f) }}
  338.                   </div>
  339.                 </div>
  340.               </div>
  341.             {% endif %}
  342.           {% endfor %}
  344.             <!-- Terms Agreement -->
  345.             <div class="entry-terms-section">
  346.                 <div class="entry-terms-wrapper{{ has_errors(form.user_policy_check) ? ' error' }}">
  347.                 <label class="entry-terms-label">
  348.                     {{ form_widget(form.user_policy_check) }}
  349.                     <span class="entry-terms-text">{{ 'front.entry.agree_with_terms'|trans({ '%url%': url('help_agreement') })|raw }}</span>
  350.                 </label>
  351.                 <div class="entry-terms-error">
  352.                     {{ form_errors(form.user_policy_check) }}
  353.                 </div>
  354.                 </div>
  355.             </div>
  357.             <!-- Submit Buttons -->
  358.             <div class="submit-section">
  359.                 <div class="submit-buttons-wrapper">
  360.                 <button type="submit" class="submit-btn submit-btn-primary" form="entry-form" name="mode" value="confirm">{{ 'front.entry.agree'|trans }}</button>
  361.                 </div>
  362.             </div>
  363.         </form>
  364.       </div>
  365.     </div>
  366.   </div>
  368. {% endblock %}