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. {% endblock javascript %}
  24. {% block main %}
  26.   <!-- breadcrumb section -->
  27.   <div class="breadcrumb-section">
  28.     <div class="container-1360 border-box px-40">
  29.       <nav class="breadcrumb">
  30.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  31.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  32.         <a href="{{ url('entry') }}" class="breadcrumb__item text-black">新規会員登録</a>
  33.       </nav>
  34.     </div>
  35.   </div>
  37.   <!-- entry section -->
  38.   <div class="container-1200">
  39.     <div class="contact-wrapper">
  40.       <!-- Entry Title Section -->
  41.       <div class="top-header-title-section">
  42.         <div class="top-header-icon-text">
  43.           <div class="top-header-icon-text">
  44.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  45.               <g clip-path="url(#clip0_459_17914)">
  46.               <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"/>
  47.               <path d="M10 12C5.58172 12 2 13.7909 2 16V20H18V16C18 13.7909 14.4183 12 10 12Z" fill="#00A854"/>
  48.               </g>
  49.               <defs>
  50.               <clipPath id="clip0_459_17914">
  51.               <rect width="20" height="20" fill="white"/>
  52.               </clipPath>
  53.               </defs>
  54.             </svg>
  56.             <span class="top-header-text">新規会員登録</span>
  57.           </div>
  58.         </div>
  59.         <h1 class="top-header-title">SIGN UP</h1>
  60.       </div>
  62.       <!-- Entry Form -->
  63.       <div class="contact-form">
  64.         <form method="post" action="{{ url('entry') }}" novalidate class="contact-form-wrapper h-adr" id="entry-form">
  65.           <span class="p-country-name" style="display:none;">Japan</span>
  66.           {{ form_widget(form._token) }}
  68.           <!-- Name Field -->
  69.           <div class="form-field">
  70.             <div class="form-field-header">
  71.               <span class="form-label">{{ 'common.name'|trans }}</span>
  72.               <span class="required-badge">必須</span>
  73.             </div>
  74.             <div class="form-field-inputs">
  75.               <div class="form-input-wrapper{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  76.                 {{ form_widget(form.name.name01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name'|trans}}) }}
  77.                 {{ form_errors(form.name.name01) }}
  78.               </div>
  79.               <div class="form-input-wrapper{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  80.                 {{ form_widget(form.name.name02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name'|trans}}) }}
  81.                 {{ form_errors(form.name.name02) }}
  82.               </div>
  83.             </div>
  84.           </div>
  86.           <!-- Name (Kana) Field -->
  87.           <div class="form-field">
  88.             <div class="form-field-header">
  89.               <span class="form-label">{{ 'common.kana'|trans }}</span>
  90.               <span class="required-badge">必須</span>
  91.             </div>
  92.             <div class="form-field-inputs">
  93.               <div class="form-input-wrapper{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  94.                 {{ form_widget(form.kana.kana01, {'attr': {'class': 'form-input', 'placeholder': 'common.last_name_kana'|trans}}) }}
  95.                 {{ form_errors(form.kana.kana01) }}
  96.               </div>
  97.               <div class="form-input-wrapper{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  98.                 {{ form_widget(form.kana.kana02, {'attr': {'class': 'form-input', 'placeholder': 'common.first_name_kana'|trans}}) }}
  99.                 {{ form_errors(form.kana.kana02) }}
  100.               </div>
  101.             </div>
  102.           </div>
  104.           <!-- Company Name Field -->
  105.           {% if form.company_name is defined %}
  106.           <div class="form-field">
  107.             <div class="form-field-header">
  108.               <span class="form-label">{{ 'common.company_name'|trans }}</span>
  109.             </div>
  110.             <div class="form-field-inputs">
  111.               <div class="form-input-wrapper{{ has_errors(form.company_name) ? ' error' }}">
  112.                 {{ form_widget(form.company_name, {'attr': {'class': 'form-input'}}) }}
  113.                 {{ form_errors(form.company_name) }}
  114.               </div>
  115.             </div>
  116.           </div>
  117.           {% endif %}
  119.           <!-- Address Field -->
  120.           <div class="form-field">
  121.             <div class="form-field-header">
  122.               <span class="form-label">{{ 'common.address'|trans }}</span>
  123.               <span class="required-badge">必須</span>
  124.             </div>
  125.             <div class="form-field-address">
  126.               <!-- Postal Code -->
  127.               <div class="postal-code-section">
  128.                 <div class="flex items-center postal-code-wrap">
  129.                   <span class="postal-label">{{ 'common.postal_symbol'|trans }}</span>
  130.                   <div class="postal-input-wrapper{{ has_errors(form.postal_code) ? ' error' }}">
  131.                     {{ form_widget(form.postal_code, {'attr': {'class': 'postal-input p-postal-code', 'placeholder': '例：5300001'}}) }}
  132.                     {{ form_errors(form.postal_code) }}
  133.                   </div>
  134.                 </div>
  135.                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="postal-search-btn">{{ 'common.search_postal_code'|trans }}</a>
  136.               </div>
  138.               <!-- Prefecture -->
  139.               <div class="prefecture-section">
  140.                 <div class="prefecture-select-wrapper{{ has_errors(form.address.pref) ? ' error' }}">
  141.                   {{ form_widget(form.address.pref, {'attr': {'class': 'prefecture-select p-region-id'}}) }}
  142.                   {{ form_errors(form.address.pref) }}
  143.                 </div>
  144.               </div>
  146.               <!-- City -->
  147.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr01) ? ' error' }}">
  148.                 {{ form_widget(form.address.addr01, {'attr': {'class': 'form-input-full p-locality p-street-address', 'placeholder': 'common.address_sample_01'|trans}}) }}
  149.                 {{ form_errors(form.address.addr01) }}
  150.               </div>
  152.               <!-- Address -->
  153.               <div class="form-input-full-wrapper{{ has_errors(form.address.addr02) ? ' error' }}">
  154.                 {{ form_widget(form.address.addr02, {'attr': {'class': 'form-input-full p-extended-address', 'placeholder': 'common.address_sample_02'|trans}}) }}
  155.                 {{ form_errors(form.address.addr02) }}
  156.               </div>
  157.             </div>
  158.           </div>
  160.           <!-- Phone Field -->
  161.           <div class="form-field">
  162.             <div class="form-field-header">
  163.               <span class="form-label">{{ 'common.phone_number'|trans }}</span>
  164.               <span class="required-badge">必須</span>
  165.             </div>
  166.             <div class="form-field-inputs">
  167.               <div class="form-input-wrapper{{ has_errors(form.phone_number) ? ' error' }}">
  168.                 {{ form_widget(form.phone_number, {'attr': {'class': 'form-input', 'placeholder': '例：11122223333'}}) }}
  169.                 {{ form_errors(form.phone_number) }}
  170.               </div>
  171.             </div>
  172.           </div>
  174.           <!-- Email Field -->
  175.           <div class="form-field">
  176.             <div class="form-field-header">
  177.               <span class="form-label">{{ 'common.mail_address'|trans }}</span>
  178.               <span class="required-badge">必須</span>
  179.             </div>
  180.             <div class="form-field-inputs email-field-inputs">
  181.               <div class="form-input-wrapper{{ has_errors(form.email.first) ? ' error' }}">
  182.                 {{ form_widget(form.email.first, {'attr': {'class': 'form-input', 'placeholder': 'common.mail_address_sample'|trans}}) }}
  183.                 {{ form_errors(form.email.first) }}
  184.               </div>
  185.               <div class="form-input-wrapper{{ has_errors(form.email.second) ? ' error' }}">
  186.                 {{ form_widget(form.email.second, {'attr': {'class': 'form-input', 'placeholder': 'common.repeated_confirm'|trans}}) }}
  187.                 {{ form_errors(form.email.second) }}
  188.               </div>
  189.             </div>
  190.           </div>
  192.           <!-- Password Field -->
  193.           <div class="form-field">
  194.             <div class="form-field-header">
  195.               <span class="form-label">{{ 'common.password'|trans }}</span>
  196.               <span class="required-badge">必須</span>
  197.             </div>
  198.             <div class="form-field-inputs password-field-inputs">
  199.               <div class="form-input-wrapper{{ has_errors(form.plain_password.first) ? ' error' }}">
  200.                 {{ form_widget(form.plain_password.first, {
  201.                   'attr': {
  202.                     'class': 'form-input',
  203.                     'placeholder': 'common.password_sample'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }),
  204.                   },
  205.                   'type': 'password'
  206.                 }) }}
  207.                 {{ form_errors(form.plain_password.first) }}
  208.               </div>
  209.               <div class="form-input-wrapper{{ has_errors(form.plain_password.second) ? ' error' }}">
  210.                 {{ form_widget(form.plain_password.second, {
  211.                   'attr': {
  212.                     'class': 'form-input',
  213.                     'placeholder': 'common.repeated_confirm'|trans,
  214.                   },
  215.                   'type': 'password'
  216.                 }) }}
  217.                 {{ form_errors(form.plain_password.second) }}
  218.               </div>
  219.             </div>
  220.           </div>
  222.           <!-- Birth Day Field -->
  223.           {% if form.birth is defined %}
  224.           <div class="form-field">
  225.             <div class="form-field-header">
  226.               <span class="form-label">{{ 'common.birth_day'|trans }}</span>
  227.             </div>
  228.             <div class="form-field-inputs">
  229.               <div class="birth-date-wrapper{{ has_errors(form.birth) ? ' error' }}">
  230.                 {{ form_widget(form.birth.year, {'attr': {'class': 'birth-select'}}) }}
  231.                 <span class="birth-separator">/</span>
  232.                 {{ form_widget(form.birth.month, {'attr': {'class': 'birth-select'}}) }}
  233.                 <span class="birth-separator">/</span>
  234.                 {{ form_widget(form.birth.day, {'attr': {'class': 'birth-select'}}) }}
  235.                 {{ form_errors(form.birth) }}
  236.               </div>
  237.             </div>
  238.           </div>
  239.           {% endif %}
  241.           <!-- Gender Field -->
  242.           {% if form.sex is defined %}
  243.           <div class="form-field">
  244.             <div class="form-field-header">
  245.               <span class="form-label">{{ 'common.gender'|trans }}</span>
  246.             </div>
  247.             <div class="form-field-inputs">
  248.               <div class="gender-radio-wrapper{{ has_errors(form.sex) ? ' error' }}">
  249.                 {{ form_widget(form.sex) }}
  250.                 {{ form_errors(form.sex) }}
  251.               </div>
  252.             </div>
  253.           </div>
  254.           {% endif %}
  256.           <!-- Job Field -->
  257.           {% if form.job is defined %}
  258.           <div class="form-field">
  259.             <div class="form-field-header">
  260.               <span class="form-label">{{ 'common.job'|trans }}</span>
  261.             </div>
  262.             <div class="form-field-inputs">
  263.               <div class="form-input-wrapper{{ has_errors(form.job) ? ' error' }}">
  264.                 <div class="prefecture-select-wrapper">
  265.                   {{ form_widget(form.job, {'attr': {'class': 'prefecture-select'}}) }}
  266.                   {{ form_errors(form.job) }}
  267.                 </div>
  268.               </div>
  269.             </div>
  270.           </div>
  271.           {% endif %}
  273.           {# エンティティ拡張の自動出力 #}
  274.           {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  275.             {% if f.vars.eccube_form_options.form_theme %}
  276.               {% form_theme f f.vars.eccube_form_options.form_theme %}
  277.               <div class="form-field">
  278.                 <div class="form-field-header">
  279.                   {{ form_label(f) }}
  280.                 </div>
  281.                 <div class="form-field-inputs">
  282.                   {{ form_row(f) }}
  283.                 </div>
  284.               </div>
  285.             {% else %}
  286.               <div class="form-field">
  287.                 <div class="form-field-header">
  288.                   {{ form_label(f) }}
  289.                 </div>
  290.                 <div class="form-field-inputs">
  291.                   <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  292.                     {{ form_widget(f, {'attr': {'class': 'form-input'}}) }}
  293.                     {{ form_errors(f) }}
  294.                   </div>
  295.                 </div>
  296.               </div>
  297.             {% endif %}
  298.           {% endfor %}
  300.             <!-- Terms Agreement -->
  301.             <div class="entry-terms-section">
  302.                 <div class="entry-terms-wrapper">
  303.                 <label class="entry-terms-label">
  304.                     {{ form_widget(form.user_policy_check) }}
  305.                     <span class="entry-terms-text">{{ 'front.entry.agree_with_terms'|trans({ '%url%': url('help_agreement') })|raw }}</span>
  306.                 </label>
  307.                 {{ form_errors(form.user_policy_check) }}
  308.                 </div>
  309.             </div>
  311.             <!-- Submit Buttons -->
  312.             <div class="submit-section">
  313.                 <div class="submit-buttons-wrapper">
  314.                 <button type="submit" class="submit-btn submit-btn-primary" form="entry-form" name="mode" value="confirm">{{ 'front.entry.agree'|trans }}</button>
  315.                 <a href="{{ url('homepage') }}" class="submit-btn submit-btn-secondary">{{ 'front.entry.disagree'|trans }}</a>
  316.                 </div>
  317.             </div>
  318.         </form>
  319.       </div>
  320.     </div>
  321.   </div>
  323. {% endblock %}