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 javascript %}
  18.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  19. {% endblock javascript %}
  21. {% block stylesheet %}
  22.     <style>
  23.         {# MEMO: form_widgetのattrを使い、Tailwindのクラスでスタイリングすると
  24.             郵便番号のライブラリで不具合が起きた為、stylesheetを使ってスタイリングしている #}
  25.         #entry_address_pref{
  26.             width:252px;
  27.             padding:10px 16px;
  28.             border-radius: 0.375rem;
  29.             border: 2px solid #CCC;
  30.             @media (max-width: 768px) {
  31.                 width:100%;
  32.             }
  33.         }
  34.     </style>
  35. {% endblock %}
  37. {% block main %}
  38.     <div class="mt-10 mb-[120px] px-4 md:mt-4 md:mb-10 animate-slideIn">
  39.         <div class="w-full max-w-[720px] mx-auto">
  40.             <h1 class="text-2xl font-extralight mb-6 md:mb-5 md:text-lg">会員登録フォーム</h1>
  41.             <div class="mb-8">
  42.                 <p class="font-extralight">
  43.                     登録に必要な情報を入力してください。
  44.                 </p>
  45.                 <p class="font-bold text-manakaRed">
  46.                     ※は必須項目です。
  47.                 </p>
  48.             </div>
  49.             <div>
  50.                 <form method="post" action="{{ url('entry') }}" novalidate class="h-adr">
  51.                     <span class="p-country-name" style="display:none;">Japan</span>
  52.                     {{ form_widget(form._token) }}
  53.                     <div>
  54.                         <dl class="w-full flex items-center md:items-start gap-8 md:gap-3 py-5 border-[#CCCCCC] border-t-2 md:flex-col">
  55.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  56.                                 <span>●</span>
  57.                                 お名前
  58.                                 <span class="text-[#BE5255]">※</span>
  59.                             </dt>
  60.                             <dd class="w-full max-w-[482px]">
  61.                                 <div class="flex items-center w-full gap-3 ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
  62.                                     {{ form_widget(form.name.name01, { 'attr': { 'placeholder': 'common.last_name' ,'class':'w-full p-2 border-[#CCCCCC] novalidate   border-[1px] rounded-md md:max-w-none
  63.                                     {% if form_errors(form.name.name01) %}border-red bg-rose-50{% endif %}'}}) }}
  64.                                     {{ form_widget(form.name.name02, { 'attr': { 'placeholder': 'common.first_name','class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  65.                                     {% if form_errors(form.name.name02) %}border-red bg-rose-50{% endif %}' }}) }}
  66.                                 </div>
  67.                                 <div class="flex flex-col gap-1 pt-2">
  68.                                     {% if form_errors(form.name.name01) %}
  69.                                         <div class="text-xs flex items-center gap-2">
  70.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  71.                                             <span class="flex text-manakaRed">
  72.                                                 姓：{{ form_errors(form.name.name01) }}</span>
  73.                                         </div>
  74.                                     {% endif %}
  75.                                     {% if form_errors(form.name.name02) %}
  76.                                         <div class="text-xs flex items-center gap-2">
  77.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  78.                                             <span class="flex text-manakaRed">
  79.                                                 名前：{{ form_errors(form.name.name02) }}
  80.                                             </span>
  81.                                         </div>
  82.                                     {% endif %}
  83.                                 </div>
  84.                             </dd>
  85.                         </dl>
  86.                         <dl class="flex items-center gap-8 md:gap-3 justify-between py-5 border-[#CCCCCC] border-t-2 md:flex-col md:items-start">
  87.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  88.                                 <span>●</span>
  89.                                 お名前 (フリガナ)
  90.                                 <span class="text-[#BE5255]">※</span>
  91.                             </dt>
  92.                             <dd class="w-full max-w-[482px]">
  93.                                 <div class="flex items-center gap-3 ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  94.                                     {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'common.last_name_kana', 'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  95.                                     {% if form_errors(form.kana.kana01) %}border-red bg-rose-50{% endif %}' }}) }}
  96.                                     {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'common.first_name_kana', 'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  97.                                     {% if form_errors(form.kana.kana02) %}border-red bg-rose-50{% endif %}' }}) }}
  98.                                 </div>
  99.                                 <div class="flex flex-col gap-1 pt-2">
  100.                                     {% if form_errors(form.kana.kana01) %}
  101.                                         <div class="text-xs flex items-center gap-2">
  102.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  103.                                             <span class="flex text-manakaRed">
  104.                                                 姓(カタカナ)：{{ form_errors(form.kana.kana01) }}
  105.                                             </span>
  106.                                         </div>
  107.                                     {% endif %}
  108.                                     {% if form_errors(form.kana.kana02) %}
  109.                                         <div class="text-xs flex items-center gap-2">
  110.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  111.                                             <span class="flex text-manakaRed">
  112.                                                 名(カタカナ)：{{ form_errors(form.kana.kana02) }}
  113.                                             </span>
  114.                                         </div>
  115.                                     {% endif %}
  116.                                 </div>
  117.                             </dd>
  118.                         </dl>
  119.                         <dl class="flex gap-8 md:gap-3 justify-between py-5 border-[#CCCCCC] border-t-2 md:flex-col md:items-start">
  120.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  121.                                 <span>●</span>
  122.                                 住所
  123.                                 <span class="text-[#BE5255]">※</span>
  124.                             </dt>
  125.                             <dd class="w-full max-w-[482px] flex flex-col gap-4">
  126.                                 <div class="flex items-center gap-2 ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
  127.                                     <span>{{ 'common.postal_symbol'|trans }}</span>
  128.                                     {{ form_widget(form.postal_code, { 'attr': { 'placeholder': '5300001','class':'p-postal-code w-full max-w-[176px] p-2 border-manakaBeige border-2 ml-2 rounded-md md:ml-0 md:max-w-none
  129.                                     {% if form_errors(form.postal_code) %}border-red bg-rose-50{% endif %}' }}) }}
  130.                                     {% if form_errors(form.postal_code) %}
  131.                                         <div class="text-xs flex items-center gap-2 pt-2">
  132.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  133.                                             <span class="flex text-manakaRed">
  134.                                                 郵便番号：{{ form_errors(form.postal_code) }}
  135.                                             </span>
  136.                                         </div>
  137.                                     {% endif %}
  138.                                 </div>
  139.                                 <a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
  140.                                     <span class="underline text-sm">郵便番号を検索する (外部サイトへ)</span>
  141.                                 </a>
  142.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  143.                                     {{ form_widget(form.address.pref) }}
  144.                                     {% if form_errors(form.address.pref) %}
  145.                                         <div class="text-xs flex items-center gap-2 pt-2">
  146.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  147.                                             <span class="flex text-manakaRed">
  148.                                                 都道府県：{{ form_errors(form.address.pref) }}
  149.                                             </span>
  150.                                         </div>
  151.                                     {% endif %}
  152.                                 </div>
  153.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  154.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名','class':'p-locality  w-full max-w-[482px] p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  155.                                     {% if form_errors(form.address.addr01) %}border-red bg-rose-50{% endif %}' }}) }}
  156.                                     {% if form_errors(form.address.addr01) %}
  157.                                         <div class="text-xs flex items-center gap-2 pt-2">
  158.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  159.                                             <span class="flex text-manakaRed">
  160.                                                 市区町村名：{{ form_errors(form.address.addr01) }}
  161.                                             </span>
  162.                                         </div>
  163.                                     {% endif %}
  164.                                 </div>
  165.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  166.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名（例: 1-3-5 まなかマンション908）','class':'p-street-address w-full max-w-[482px] p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  167.                                     {% if form_errors(form.address.addr02) %}border-red bg-rose-50{% endif %}' }}) }}
  168.                                     {% if form_errors(form.address.addr02) %}
  169.                                         <div class="text-xs flex items-center gap-2 pt-2">
  170.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  171.                                             <span class="flex text-manakaRed">
  172.                                                 番地・ビル名：{{ form_errors(form.address.addr02) }}
  173.                                             </span>
  174.                                         </div>
  175.                                     {% endif %}
  176.                                 </div>
  177.                             </dd>
  178.                         </dl>
  179.                         <dl class="flex gap-8 md:gap-3 justify-between py-5 border-[#CCCCCC] border-t-2 md:flex-col md:items-start">
  180.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  181.                                 <span>●</span>
  182.                                 電話番号
  183.                                 <span class="text-[#BE5255]">※</span>
  184.                             </dt>
  185.                             <dd class="w-full max-w-[482px]">
  186.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  187.                                     {{ form_widget(form.phone_number, { 'attr': { 'placeholder': '例: 11122223333', 'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  188.                                     {% if form_errors(form.phone_number) %}border-red bg-rose-50{% endif %}' }}) }}
  189.                                 </div>
  190.                                 {% if form_errors(form.phone_number) %}
  191.                                     <div class="text-xs flex items-center gap-2 pt-2">
  192.                                         <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  193.                                         <span class="flex text-manakaRed">
  194.                                             電話番号：{{ form_errors(form.phone_number) }}
  195.                                         </span>
  196.                                     </div>
  197.                                 {% endif %}
  198.                             </dd>
  199.                         </dl>
  200.                         <dl class="gap-8 md:gap-3 flex justify-between py-5 border-[#CCCCCC] border-t-2 md:flex-col md:items-start">
  201.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  202.                                 <span>●</span>
  203.                                 メールアドレス
  204.                                 <span class="text-[#BE5255]">※</span>
  205.                             </dt>
  206.                             <dd class="w-full max-w-[482px] flex flex-col gap-4">
  207.                                 <div class="ec-input{{ has_errors(form.email.first) ? ' error' }}">
  208.                                     {{ form_widget(form.email.first, { 'attr': { 'placeholder': 'common.mail_address_sample', 'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  209.                                     {% if form_errors(form.email.first) %}border-red bg-rose-50{% endif %}' }}) }}
  210.                                     {% if form_errors(form.email.first) %}
  211.                                         <div class="text-xs flex items-center gap-2 pt-2">
  212.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  213.                                             <span class="flex text-manakaRed">
  214.                                                 メールアドレス：{{ form_errors(form.email.first) }}
  215.                                             </span>
  216.                                         </div>
  217.                                     {% endif %}
  218.                                 </div>
  219.                                 <div class="ec-input{{ has_errors(form.email.second) ? ' error' }}">
  220.                                     {{ form_widget(form.email.second, { 'attr': { 'placeholder': 'common.repeated_confirm', 'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  221.                                     {% if form_errors(form.email.second) %}border-red bg-rose-50{% endif %}' }}) }}
  222.                                     {% if form_errors(form.email.second) %}
  223.                                         <div class="text-xs flex items-center gap-2 pt-2">
  224.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  225.                                             <span class="flex text-manakaRed">
  226.                                                 メールアドレス(確認)：{{ form_errors(form.email.second) }}
  227.                                             </span>
  228.                                         </div>
  229.                                     {% endif %}
  230.                                 </div>
  231.                                 <p class="text-sm font-extralight text-[#999]">※ 『@manaka-net.com』からのメールを受信できる設定になっていることをご確認下さい。</p>
  232.                             </dd>
  233.                         </dl>
  234.                         <dl class="gap-8 md:gap-3 flex justify-between py-5 border-[#CCCCCC] border-t-2 md:flex-col md:items-start">
  235.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  236.                                 <span>●</span>
  237.                                 パスワード
  238.                                 <span class="text-[#BE5255]">※</span>
  239.                             </dt>
  240.                             <dd class="w-full max-w-[482px] flex flex-col gap-4">
  241.                                 <div class="ec-input{{ has_errors(form.plain_password.first) ? ' error' }}">
  242.                                     {{ form_widget(form.plain_password.first, {
  243.                                         'attr': { 'placeholder': 'common.password_sample'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }),
  244.                                         'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  245.                                         {% if form_errors(form.plain_password.first) %}border-red bg-rose-50{% endif %}' },
  246.                                         'type': 'password',
  247.                                     }) }}
  248.                                     {% if form_errors(form.plain_password.first) %}
  249.                                         <div class="text-xs flex items-center gap-2 pt-2">
  250.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  251.                                             <span class="flex text-manakaRed">
  252.                                                 パスワード：{{ form_errors(form.plain_password.first) }}
  253.                                             </span>
  254.                                         </div>
  255.                                     {% endif %}
  256.                                 </div>
  257.                                 <div class="ec-input{{ has_errors(form.plain_password.second) ? ' error' }}">
  258.                                     {{ form_widget(form.plain_password.second, {
  259.                                         'attr': { 'placeholder': 'common.repeated_confirm'|trans ,                                'class':'w-full p-2 border-[#CCCCCC]  border-[1px] rounded-md md:max-w-none
  260.                                         {% if form_errors(form.plain_password.second) %}border-red bg-rose-50{% endif %}'},
  261.                                         'type': 'password',
  262.                                     }) }}
  263.                                     {% if form_errors(form.plain_password.second) %}
  264.                                         <div class="text-xs flex items-center gap-2 pt-2">
  265.                                             <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  266.                                             <span class="flex text-manakaRed">
  267.                                                 パスワード(確認)：{{ form_errors(form.plain_password.second) }}
  268.                                             </span>
  269.                                         </div>
  270.                                     {% endif %}
  271.                                 </div>
  272.                             </dd>
  273.                         </dl>
  274.                         <dl class="flex gap-8  justify-between py-5 border-[#CCCCCC] border-y-2 md:flex-col md:items-start md:gap-3">
  275.                             <dt class="font-bold md:text-sm w-full max-w-[227px] md:w-fit">
  276.                                 <span>●</span>
  277.                                 まなかからのメールやDMのご送付について
  278.                                 <span class="text-[#BE5255]">※</span>
  279.                             </dt>
  280.                             <dd class="w-full max-w-[482px] flex flex-col gap-4">
  281.                                 <div>
  282.                                     <input type="radio" id="entry_mailImage_flg_0" name="{{ field_name(form.mailmaga_flg) }}" value="1" required class="form-control"/>
  283.                                     <label for="entry_mailImage_flg_0">
  284.                                         受け取る
  285.                                     </label>
  286.                                 </div>
  287.                                 <div>
  288.                                     <input type="radio" id="entry_mailImage_flg_1" name="{{ field_name(form.mailmaga_flg) }}" value="0" required class="form-control"/>
  289.                                     <label for="entry_mailImage_flg_1">
  290.                                         受け取らない
  291.                                     </label>
  292.                                 </div>
  293.                                 {% if form_errors(form.mailmaga_flg) %}
  294.                                     <div class="text-xs flex items-center gap-2 pt-2">
  295.                                         <img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
  296.                                         <span class="flex text-manakaRed">
  297.                                             まなかからのメールやDMのご送付について ：{{ form_errors(form.mailmaga_flg) }}
  298.                                         </span>
  299.                                     </div>
  300.                                 {% endif %}
  301.                             </dd>
  302.                         </dl>
  303.                     </div>
  304.                     <div class="flex flex-col gap-6 mt-10 sm:w-full">
  305.                         <p class="text-center font-extralight">
  306.                             <a href="{{url('help_agreement')}}" class="underline">会員規約</a>
  307.                             に同意の上、
  308.                         </p>
  309.                         <button class="block w-full max-w-[300px] py-4 font-extralight mx-auto bg-manakaBlack text-white text-lg md:text-bas" type="submit" name="mode" value="confirm">登録に進む</button>
  310.                     </div>
  311.                     {{ form_widget(form.user_policy_check, {'attr': { 'checked' :true, 'hidden' : true }}) }}
  312.                     {{ form_errors(form.user_policy_check) }}
  313.                 </form>
  314.             </div>
  315.         </div>
  316.     </div>
  317.     {% set breadcrumbs = [{'name': '会員登録(入力ページ)'}] %}
  318.     {% include('Block/breadcrumbs.twig') %}
  319. {% endblock %}