app/Plugin/PiaContact/Resource/template/default/appraisal/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% form_theme form 'Form/form_div_layout.twig' %}
  5. {% block javascript %}
  6.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  7.     <script>
  8.         $(function() {
  9.             $('#form_appraisal_item01_name').attr('required', true);
  10.             $('#form_appraisal_item01_num').attr('required', true);
  11.             $('#form_appraisal_item01_img').attr('required', true);
  12.         });
  13.     </script>
  14. {% endblock javascript %}
  16. {% block main %}
  17. <style type="text/css">
  18. @media only screen and (min-width:641px) {/*pc*/
  19.   #appraisal_form_wrap{
  20.     width: 70%;
  21.     margin: auto;
  22.   }
  23. }
  24. .daiko_coin dt,
  25. .daiko_coin dd{
  26.   background-color: #fbf6e5;
  27.   border-bottom: 5px solid white;
  28. }
  29. .daiko_coin dt{
  30.   padding: 3%;
  31. }
  32. .daiko_coin table{
  33.   width: 100%;
  34. }
  35. .daiko_coin table th{
  36.   text-align: left;
  37.   font-weight: normal;
  38.   width: 20%;
  39. }
  40. .daiko_coin table td{
  41.   padding: 5px 0;
  42. }
  43. .daiko_coin table td input.num{
  44.   width: 15% !important;
  45. }
  46. .daiko_coin table td div{
  47.   border: 1px solid #ddd;
  48.   background-color: #f7f7f7;
  49.   padding: 10px;
  50. }
  51. .daiko_coin table td div input{
  52.   width: 200px !important;
  53. }
  54. .daiko_coin input.form-control {
  55.   width: 100%;
  56. }
  57. div.radio{
  58.   float: left;
  59.   margin-right: 10px;
  60. }
  61. div.radio label{
  62.   cursor: pointer;
  63. }
  64. </style>
  66. <div class="ec-pageHeader">
  67.     <h1>鑑定代行の申込み</h1>
  68. </div>
  70. <div class="ec-off1Grid">
  71.     <div class="ec-off1Grid__cell">
  72.         <!-- アラートメッセージ -->
  73.         {{ include('@PiaContact/default/alert.twig') }}
  75.         <div id="appraisal_form_wrap">
  76.             <div class="ec-borderedDefs">
  77.                 <p>商品によっては回答を差し上げるのにお時間をいただくこともございます。<br/>
  78.                     また、休業日は翌営業日以降の対応となりますのでご了承ください。</p>
  79.                 <p><b>※6枚以上の鑑定代行申込みの場合は、複数回に分けてお申し込みいただくか、<a href="mailto:contact@coinpalace.jp">contact@coinpalace.jp</a>へお問い合わせください。</b></p>
  80.                 
  81.                 <form name="form1" id="form1" method="post" action="{{ url('plugin_pia_form_appraisal') }}" enctype="multipart/form-data" class="h-adr">
  82.                     <span class="p-country-name" style="display:none;">Japan</span>
  83.                     {{ form_widget(form._token) }}
  84.                     <input type="hidden" name="mode" value="confirm">
  85.                     
  86.                     <dl>
  87.                         <dt>
  88.                             {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
  89.                         </dt>
  90.                         <dd>
  91.                             <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  92.                                 {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
  93.                                 {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
  94.                                 {{ form_errors(form.kana.kana01) }}
  95.                                 {{ form_errors(form.kana.kana02) }}
  96.                             </div>
  97.                         </dd>
  98.                     </dl>
  99.                     
  100.                     <dl>
  101.                         <dt>
  102.                             {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  103.                         </dt>
  104.                         <dd>
  105.                             <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
  106.                                 {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
  107.                                 {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
  108.                                 {{ form_errors(form.name.name01) }}
  109.                                 {{ form_errors(form.name.name02) }}
  110.                             </div>
  111.                         </dd>
  112.                     </dl>
  113.                     
  114.                     <dl>
  115.                         <dt>
  116.                             {{ form_label(form.tel, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  117.                         </dt>
  118.                         <dd>
  119.                             <div class="ec-telInput{{ has_errors(form.tel) ? ' error' }}">
  120.                                 {{ form_widget(form.tel) }}
  121.                                 {{ form_errors(form.tel) }}
  122.                             </div>
  123.                         </dd>
  124.                     </dl>
  125.                     
  126.                     <dl>
  127.                         <dt>
  128.                             {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  129.                         </dt>
  130.                         <dd>
  131.                             <div class="ec-input{{ has_errors(form.email) ? ' error' }}">
  132.                                 {{ form_widget(form.email, { 'attr': { 'placeholder': '例：sample@example.com' }}) }}
  133.                                 {{ form_errors(form.email) }}
  134.                             </div>
  135.                         </dd>
  136.                     </dl>
  137.                     
  138.                     <dl>
  139.                         <dt>
  140.                             {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  141.                         </dt>
  142.                         <dd>
  143.                             <div class="ec-zipInput{{ has_errors(form.zip) ? ' error' }}"><span>{{ '〒'|trans }}</span>
  144.                                 {{ form_widget(form.zip) }}
  145.                                 <div class="ec-zipInputHelp">
  146.                                     <div class="ec-zipInputHelp__icon">
  147.                                         <div class="ec-icon"><img
  148.                                                     src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  149.                                         </div>
  150.                                     </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  151.                                 </div>
  152.                                 {{ form_errors(form.zip) }}
  153.                             </div>
  155.                             <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  156.                                 {{ form_widget(form.address.pref) }}
  157.                                 {{ form_errors(form.address.pref) }}
  158.                             </div>
  159.                             <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  160.                                 {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名(例：大阪市北区)' }}) }}
  161.                                 {{ form_errors(form.address.addr01) }}
  162.                             </div>
  163.                             <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  164.                                 {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名(例：西梅田1丁目6-8)' }}) }}
  165.                                 {{ form_errors(form.address.addr02) }}
  166.                             </div>
  167.                         </dd>
  168.                     </dl>
  169.                     
  170.                     <dl>
  171.                         <dt>
  172.                             {{ form_label(form.contact, 'ご連絡方法', { 'label_attr': { 'class': 'ec-label' }}) }}
  173.                         </dt>
  174.                         <dd>
  175.                             <div class="ec-radio{{ has_errors(form.contact) ? ' error' }}">
  176.                                 {{ form_widget(form.contact) }}
  177.                                 {{ form_errors(form.contact) }}
  178.                             </div>
  179.                         </dd>
  180.                     </dl>
  181.                     
  182.                     <dl>
  183.                         <dt>
  184.                             {{ form_label(form.receiving, 'お客様から弊社へのコインのご提出方法', { 'label_attr': { 'class': 'ec-label' }}) }}
  185.                         </dt>
  186.                         <dd>
  187.                             <div class="ec-radio{{ has_errors(form.receiving) ? ' error' }}">
  188.                                 {{ form_widget(form.receiving) }}
  189.                                 {{ form_errors(form.receiving) }}
  190.                             </div>
  191.                         </dd>
  192.                     </dl>
  193.                     
  194.                     <dl>
  195.                         <dt>
  196.                             {{ form_label(form.contents, 'メッセージ', { 'label_attr': { 'class': 'ec-label' }}) }}
  197.                         </dt>
  198.                         <dd>
  199.                             <div class="ec-input{{ has_errors(form.contents) ? ' error' }}">
  200.                                 {{ form_widget(form.contents) }}
  201.                                 {{ form_errors(form.contents) }}
  202.                             </div>
  203.                         </dd>
  204.                     </dl>
  206.                     {% for i in 1..5 %}
  207.                         {% set item_name = 'item0' ~ i ~ '_name' %}
  208.                         {% set item_num = 'item0' ~ i ~ '_num' %}
  209.                         {% set item_price = 'item0' ~ i ~ '_price' %}
  210.                         {% set item_img = 'item0' ~ i ~ '_img' %}
  211.                         <dl class="daiko_coin">
  212.                             <dt><label class="ec-label required">申込コイン{{ i }}</label>
  213.                                 {% if i == 1 %}<span class="ec-required">必須</span>{% endif %}
  214.                             </dt>
  215.                             <dd class="ec-input">
  216.                                 <table border="0" cellspacing="0" cellpadding="0">
  217.                                     <tbody>
  218.                                         <tr>
  219.                                             <th>商品名：</th>
  220.                                             <td>
  221.                                                 {{ form_widget(form[item_name]) }}
  222.                                                 {{ form_errors(form[item_name]) }}
  223.                                             </td>
  224.                                         </tr>
  225.                                         <tr>
  226.                                             <td colspan="2">コインの発行年・発行国・品名・額面・量目・材質・直径をお知らせください</td>
  227.                                         </tr>
  228.                                         <tr>
  229.                                             <th>数量：</th>
  230.                                             <td>
  231.                                                 {{ form_widget(form[item_num]) }}
  232.                                                 {{ form_errors(form[item_num]) }}
  233.                                             </td>
  234.                                         </tr>
  235.                                         <tr>
  236.                                             <th>価格（円）：</th>
  237.                                             <td>
  238.                                                 {{ form_widget(form[item_price]) }}
  239.                                                 {{ form_errors(form[item_price]) }}
  240.                                             </td>
  241.                                         </tr>
  242.                                         <tr>
  243.                                             <th>商品画像：</th>
  244.                                             <td>
  245.                                                 {{ form_widget(form[item_img]) }}
  246.                                                 {{ form_errors(form[item_img]) }}
  247.                                             </td>
  248.                                         </tr>
  249.                                     </tbody>
  250.                                 </table>
  251.                             </dd>
  252.                         </dl>
  253.                     {% endfor %}
  254.                     
  255.                     <div class="ec-off4Grid">
  256.                         <div class="ec-off4Grid__cell">
  257.                             <button type="submit" class="ec-blockBtn--action">{{ '確認ページへ'|trans }}</button>
  258.                         </div>
  259.                     </div>
  260.                 </form>
  261.             </div>
  262.         </div>
  263.     </div>
  264. </div>
  265. {% endblock %}