app/Plugin/NZCustomPlugin/Resource/template/admin/form_edit.twig line 1

Open in your IDE?
  1. {% extends '@admin/default_frame.twig' %}
  3. {% block title %}フォーム編集{% endblock %}
  4. {% block sub_title %}{{ customForm.name|default('新規作成') }}{% endblock %}
  6. {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  8. {% block stylesheet %}
  9. <style>
  10. /* フィールド管理テーブルのモダンスタイル */
  11. .field-management-table {
  12.     border-collapse: separate;
  13.     border-spacing: 0;
  14.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  15. }
  17. .field-management-table thead th {
  18.     background: #f7fafc !important;
  19.     color: #2d3748 !important;
  20.     font-weight: 600 !important;
  21.     font-size: 15px !important;
  22.     padding: 18px 16px !important;
  23.     border: none !important;
  24.     border-bottom: 2px solid #e2e8f0 !important;
  25.     text-align: left;
  26.     letter-spacing: 0.3px;
  27. }
  29. .field-management-table thead th:first-child {
  30.     border-radius: 10px 0 0 0;
  31. }
  33. .field-management-table thead th:last-child {
  34.     border-radius: 0 10px 0 0;
  35. }
  37. .field-management-table tbody tr {
  38.     transition: all 0.2s ease;
  39.     border-bottom: 1px solid #e2e8f0;
  40. }
  42. .field-management-table tbody tr:hover {
  43.     background-color: #f7fafc;
  44.     transform: translateX(2px);
  45. }
  47. .field-management-table tbody tr:last-child {
  48.     border-bottom: none;
  49. }
  51. .field-management-table tbody td {
  52.     padding: 16px 16px !important;
  53.     font-size: 15px !important;
  54.     color: #2d3748 !important;
  55.     vertical-align: middle;
  56. }
  58. .field-management-table code {
  59.     background: #edf2f7;
  60.     padding: 6px 10px;
  61.     border-radius: 6px;
  62.     font-size: 14px !important;
  63.     color: #667eea;
  64.     font-weight: 500;
  65. }
  67. .field-type-badge {
  68.     display: inline-block;
  69.     padding: 6px 14px;
  70.     border-radius: 20px;
  71.     font-size: 13px !important;
  72.     font-weight: 500;
  73.     background: #e6f4ff;
  74.     color: #1890ff;
  75. }
  77. .field-required-badge {
  78.     display: inline-block;
  79.     padding: 6px 14px;
  80.     border-radius: 20px;
  81.     font-size: 13px !important;
  82.     font-weight: 600;
  83.     background: #fff0f0;
  84.     color: #e53e3e;
  85. }
  87. .field-action-buttons {
  88.     display: flex;
  89.     gap: 6px;
  90.     align-items: center;
  91. }
  93. .field-action-btn {
  94.     display: inline-flex;
  95.     align-items: center;
  96.     justify-content: center;
  97.     width: 36px;
  98.     height: 36px;
  99.     border-radius: 8px;
  100.     border: 2px solid transparent;
  101.     transition: all 0.2s ease;
  102.     font-size: 14px;
  103.     cursor: pointer;
  104. }
  106. .field-action-btn.edit {
  107.     background: #667eea;
  108.     color: white;
  109. }
  111. .field-action-btn.edit:hover {
  112.     background: #5568d3;
  113.     transform: translateY(-2px);
  114.     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  115. }
  117. .field-action-btn.delete {
  118.     background: #e53e3e;
  119.     color: white;
  120.     border: none;
  121. }
  123. .field-action-btn.delete:hover {
  124.     background: #c53030;
  125.     transform: translateY(-2px);
  126.     box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
  127. }
  129. .field-move-buttons {
  130.     display: flex;
  131.     flex-direction: column;
  132.     gap: 4px;
  133. }
  135. .field-move-btn {
  136.     width: 32px;
  137.     height: 32px;
  138.     display: flex;
  139.     align-items: center;
  140.     justify-content: center;
  141.     border: 2px solid #cbd5e0;
  142.     border-radius: 6px;
  143.     background: white;
  144.     color: #4a5568;
  145.     transition: all 0.2s ease;
  146.     cursor: pointer;
  147.     font-size: 12px;
  148. }
  150. .field-move-btn:hover {
  151.     background: #667eea;
  152.     border-color: #667eea;
  153.     color: white;
  154.     transform: scale(1.05);
  155. }
  157. .field-table-wrapper {
  158.     border-radius: 12px;
  159.     overflow: hidden;
  160.     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  161. }
  163. .field-management-actions {
  164.     display: flex;
  165.     gap: 10px;
  166.     margin-bottom: 20px;
  167. }
  169. .field-management-actions .btn {
  170.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  171.     font-weight: 500;
  172.     padding: 10px 20px;
  173.     border-radius: 8px;
  174.     transition: all 0.2s ease;
  175. }
  177. .field-management-actions .btn:hover {
  178.     transform: translateY(-2px);
  179.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  180. }
  181. </style>
  182. {% endblock %}
  184. {% block javascript %}
  185. <script>
  186. function toggleMailSettings() {
  187.     const sendCustomerMail = document.getElementById('form_send_customer_mail').checked;
  188.     const sendAdminMail = document.getElementById('form_send_admin_mail').checked;
  189.     
  190.     const mailSettingsRow = document.getElementById('mail-settings-row');
  191.     const adminMailRow = document.getElementById('admin-mail-row');
  192.     
  193.     // いずれかのメール送信が有効な場合、メール設定を表示
  194.     const showMailSettings = sendCustomerMail || sendAdminMail;
  195.     if (mailSettingsRow) {
  196.         mailSettingsRow.style.display = showMailSettings ? '' : 'none';
  197.     }
  198.     
  199.     // 管理者メール送信が有効な場合、管理者メールアドレスを表示
  200.     if (adminMailRow) {
  201.         adminMailRow.style.display = sendAdminMail ? '' : 'none';
  202.     }
  203. }
  205. document.addEventListener('DOMContentLoaded', function() {
  206.     const sendCustomerMail = document.getElementById('form_send_customer_mail');
  207.     const sendAdminMail = document.getElementById('form_send_admin_mail');
  208.     
  209.     if (sendCustomerMail) {
  210.         sendCustomerMail.addEventListener('change', toggleMailSettings);
  211.     }
  212.     if (sendAdminMail) {
  213.         sendAdminMail.addEventListener('change', toggleMailSettings);
  214.     }
  215.     
  216.     toggleMailSettings();
  217. });
  218. </script>
  219. {% endblock %}
  221. {% block main %}
  222. <div class="c-contentsArea__cols">
  223.     <div class="c-contentsArea__primaryCol">
  224.         <div class="c-primaryCol">
  225.             <form method="post">
  226.                 {{ form_widget(form._token) }}
  227.                 
  228.                 <div class="card rounded border-0 mb-4">
  229.                     <div class="card-header">基本設定</div>
  230.                     <div class="card-body">
  231.                         {{ form_row(form.name) }}
  232.                         {{ form_row(form.form_key) }}
  233.                         {{ form_row(form.description) }}
  234.                         {{ form_row(form.is_active) }}
  235.                     </div>
  236.                 </div>
  238.                 <div class="card rounded border-0 mb-4">
  239.                     <div class="card-header">
  240.                         <i class="fa fa-desktop mr-2"></i>レイアウト設定
  241.                     </div>
  242.                     <div class="card-body">
  243.                         {{ form_row(form.Layout) }}
  244.                         {{ form_row(form.LayoutMobile) }}
  245.                         
  246.                         <div class="alert alert-info">
  247.                             <i class="fa fa-info-circle mr-2"></i>
  248.                             <strong>レイアウトについて</strong>
  249.                             <ul class="mb-0 mt-2">
  250.                                 <li>「コンテンツ > レイアウト管理」で作成したレイアウトを選択できます</li>
  251.                                 <li>未選択の場合は、デフォルトレイアウトが適用されます</li>
  252.                                 <li>LP風の完全独立ページを作成する場合は、ヘッダー・フッターなしのレイアウトを作成してください</li>
  253.                             </ul>
  254.                         </div>
  255.                     </div>
  256.                 </div>
  258.                 <div class="card rounded border-0 mb-4">
  259.                     <div class="card-header">公開設定</div>
  260.                     <div class="card-body">
  261.                         {{ form_row(form.publish_start_date) }}
  262.                         {{ form_row(form.publish_end_date) }}
  263.                         {{ form_row(form.require_login) }}
  264.                     </div>
  265.                 </div>
  267.                 <div class="card rounded border-0 mb-4">
  268.                     <div class="card-header">メール設定</div>
  269.                     <div class="card-body">
  270.                         {{ form_row(form.send_customer_mail) }}
  271.                         {{ form_row(form.send_admin_mail) }}
  272.                         
  273.                         <div id="admin-mail-row">
  274.                             {{ form_row(form.admin_mail_address) }}
  275.                         </div>
  276.                         
  277.                         <div id="mail-settings-row">
  278.                             {{ form_row(form.mail_subject) }}
  279.                             {{ form_row(form.mail_template) }}
  280.                             
  281.                             <div class="alert alert-info">
  282.                                 <h5>利用可能な変数</h5>
  283.                                 <ul class="mb-0">
  284.                                     <li><code>{form_name}</code> - フォーム名</li>
  285.                                     <li><code>{submit_date}</code> - 送信日時</li>
  286.                                     <li><code>{フィールド名}</code> - 各フィールドの値（例: {email}, {name}）</li>
  287.                                 </ul>
  288.                             </div>
  289.                         </div>
  290.                     </div>
  291.                 </div>
  293.                 <div class="card rounded border-0 mb-4">
  294.                     <div class="card-header">送信完了画面設定</div>
  295.                     <div class="card-body">
  296.                         {{ form_row(form.complete_message) }}
  297.                         
  298.                         <div class="alert alert-info">
  299.                             <i class="fa fa-info-circle mr-2"></i>
  300.                             未設定の場合は、デフォルトメッセージ「お問い合わせありがとうございました。内容を確認の上、担当者よりご連絡させていただきます。」が表示されます。
  301.                         </div>
  302.                     </div>
  303.                 </div>
  305.                 <div class="c-conversionArea">
  306.                     <div class="c-conversionArea__container">
  307.                         <div class="row justify-content-between align-items-center">
  308.                             <div class="col-6">
  309.                                 <div class="c-conversionArea__leftBlockItem">
  310.                                     <a class="c-baseLink" href="{{ url('nzcustomplugin_admin_list') }}">
  311.                                         <i class="fa fa-backward" aria-hidden="true"></i>
  312.                                         <span>フォーム一覧に戻る</span>
  313.                                     </a>
  314.                                 </div>
  315.                             </div>
  316.                             <div class="col-6">
  317.                                 <div class="row align-items-center justify-content-end">
  318.                                     <div class="col-auto">
  319.                                         <button class="btn btn-ec-conversion px-5" type="submit">
  320.                                             保存
  321.                                         </button>
  322.                                     </div>
  323.                                 </div>
  324.                             </div>
  325.                         </div>
  326.                     </div>
  327.                 </div>
  328.             </form>
  330.             {% if customForm.id %}
  331.             <div class="card rounded border-0 mb-4 mt-5">
  332.                 <div class="card-header">フィールド管理</div>
  333.                 <div class="card-body">
  334.                     <div class="field-management-actions">
  335.                         <a href="{{ url('nzcustomplugin_admin_field_new', {'form_id': customForm.id}) }}" class="btn btn-ec-regular">
  336.                             <i class="fa fa-plus-circle mr-1"></i>
  337.                             フィールドを追加
  338.                         </a>
  339.                         <a href="{{ url('nzcustomplugin_admin_preview', {'id': customForm.id}) }}" class="btn btn-ec-regular" target="_blank">
  340.                             <i class="fa fa-external-link mr-1"></i>
  341.                             プレビュー
  342.                         </a>
  343.                         <a href="{{ url('nzcustomplugin_admin_submissions', {'form_id': customForm.id}) }}" class="btn btn-ec-regular">
  344.                             <i class="fa fa-database mr-1"></i>
  345.                             送信データ一覧
  346.                         </a>
  347.                     </div>
  349.                     {% if customForm.formFields|length > 0 %}
  350.                     <div class="field-table-wrapper">
  351.                         <table class="table table-sm mb-0 field-management-table">
  352.                             <thead>
  353.                                 <tr>
  354.                                     <th style="width: 50px;">順序</th>
  355.                                     <th>ラベル</th>
  356.                                     <th>フィールド名</th>
  357.                                     <th>タイプ</th>
  358.                                     <th>必須</th>
  359.                                     <th style="width: 120px;">操作</th>
  360.                                 </tr>
  361.                             </thead>
  362.                             <tbody>
  363.                                 {% for field in customForm.formFields %}
  364.                                 <tr>
  365.                                     <td>
  366.                                         <div class="field-move-buttons">
  367.                                             {% if not loop.first %}
  368.                                             <a href="{{ url('nzcustomplugin_admin_field_move_up', {'id': field.id}) }}" class="field-move-btn">
  369.                                                 <i class="fa fa-arrow-up"></i>
  370.                                             </a>
  371.                                             {% endif %}
  372.                                             {% if not loop.last %}
  373.                                             <a href="{{ url('nzcustomplugin_admin_field_move_down', {'id': field.id}) }}" class="field-move-btn">
  374.                                                 <i class="fa fa-arrow-down"></i>
  375.                                             </a>
  376.                                             {% endif %}
  377.                                         </div>
  378.                                     </td>
  379.                                     <td><strong>{{ field.label }}</strong></td>
  380.                                     <td><code>{{ field.fieldName }}</code></td>
  381.                                     <td>
  382.                                         {% set typeLabels = {
  383.                                             'text': 'テキスト',
  384.                                             'textarea': 'テキストエリア',
  385.                                             'email': 'メール',
  386.                                             'tel': '電話番号',
  387.                                             'number': '数値',
  388.                                             'date': '日付',
  389.                                             'radio': 'ラジオボタン',
  390.                                             'checkbox': 'チェックボックス',
  391.                                             'select': 'セレクト',
  392.                                             'select_multiple': '複数選択',
  393.                                             'file': 'ファイル'
  394.                                         } %}
  395.                                         <span class="field-type-badge">{{ typeLabels[field.fieldType]|default(field.fieldType) }}</span>
  396.                                     </td>
  397.                                     <td>
  398.                                         {% if field.required %}
  399.                                             <span class="field-required-badge">必須</span>
  400.                                         {% endif %}
  401.                                     </td>
  402.                                     <td>
  403.                                         <div class="field-action-buttons">
  404.                                             <a href="{{ url('nzcustomplugin_admin_field_edit', {'form_id': customForm.id, 'field_id': field.id}) }}" class="field-action-btn edit" title="編集">
  405.                                                 <i class="fa fa-edit"></i>
  406.                                             </a>
  407.                                             <form action="{{ url('nzcustomplugin_admin_field_delete', {'form_id': customForm.id, 'field_id': field.id}) }}" method="post" style="display: inline; margin: 0;" onsubmit="return confirm('このフィールドを削除してもよろしいですか?');">
  408.                                                 <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ field.id) }}">
  409.                                                 <button type="submit" class="field-action-btn delete" title="削除">
  410.                                                     <i class="fa fa-trash"></i>
  411.                                                 </button>
  412.                                             </form>
  413.                                         </div>
  414.                                     </td>
  415.                                 </tr>
  416.                                 {% endfor %}
  417.                             </tbody>
  418.                         </table>
  419.                     </div>
  420.                     {% else %}
  421.                     <div class="alert alert-warning">
  422.                         <i class="fa fa-exclamation-triangle mr-2"></i>
  423.                         まだフィールドが追加されていません。「フィールドを追加」ボタンからフィールドを作成してください。
  424.                     </div>
  425.                     {% endif %}
  426.                 </div>
  427.             </div>
  428.             {% endif %}
  429.         </div>
  430.     </div>
  431. </div>
  432. {% endblock %}