app/Plugin/NZCustomPlugin/Resource/template/default/form.twig line 1

Open in your IDE?
  1. {% extends layout_template|default('default_frame.twig') %}
  3. {% block main %}
  4. <style>
  5. /* フォント強制読み込み */
  6. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
  8. * {
  9.     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif !important;
  10. }
  12. /* NZCustomPlugin専用スタイル */
  13. .nzcustom-form-wrapper {
  14.     max-width: 800px;
  15.     margin: 60px auto;
  16.     padding: 0 20px;
  17.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  18. }
  20. .nzcustom-form-card {
  21.     background: #ffffff;
  22.     border-radius: 20px;
  23.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  24.     overflow: hidden;
  25. }
  27. .nzcustom-form-header {
  28.     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  29.     padding: 60px 40px;
  30.     text-align: center;
  31. }
  33. .nzcustom-form-title {
  34.     font-size: 42px;
  35.     font-weight: 800;
  36.     color: #ffffff;
  37.     margin: 0 0 16px 0;
  38.     letter-spacing: -0.5px;
  39. }
  41. .nzcustom-form-description {
  42.     font-size: 18px;
  43.     color: rgba(255, 255, 255, 0.95);
  44.     line-height: 1.7;
  45. }
  47. .nzcustom-form-body {
  48.     padding: 50px 40px;
  49. }
  51. .nzcustom-field {
  52.     margin-bottom: 35px;
  53. }
  55. /* 質問タイトル（メインラベル） */
  56. .nzcustom-main-label,
  57. .nzcustom-field > label {
  58.     display: block !important;
  59.     font-size: 16px !important;
  60.     font-weight: 700 !important;
  61.     color: #2d3748 !important;
  62.     margin-bottom: 14px !important;
  63.     line-height: 1.5 !important;
  64. }
  66. .nzcustom-main-label .required,
  67. .nzcustom-field > label .required {
  68.     color: #e53e3e !important;
  69.     margin-left: 4px !important;
  70. }
  72. .nzcustom-field input[type="text"],
  73. .nzcustom-field input[type="email"],
  74. .nzcustom-field input[type="tel"],
  75. .nzcustom-field input[type="number"],
  76. .nzcustom-field input[type="date"],
  77. .nzcustom-field textarea,
  78. .nzcustom-field select,
  79. .nzcustom-field select.form-control,
  80. .nzcustom-field select.form-select {
  81.     width: 100%;
  82.     padding: 5px 18px;
  83.     font-size: 16px;
  84.     color: #2d3748 !important;
  85.     border: 2px solid #e2e8f0;
  86.     border-radius: 10px;
  87.     background: #ffffff !important;
  88.     background-color: #ffffff !important;
  89.     transition: all 0.3s ease;
  90.     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  91.     -webkit-text-fill-color: #2d3748 !important;
  92.     opacity: 1 !important;
  93. }
  95. /* プレースホルダーを薄くする */
  96. .nzcustom-field input::placeholder,
  97. .nzcustom-field textarea::placeholder,
  98. .nzcustom-field select::placeholder {
  99.     color: #aaa !important;
  100.     -webkit-text-fill-color: #aaa !important;
  101.     opacity: 1 !important;
  102. }
  104. .nzcustom-field input::-webkit-input-placeholder,
  105. .nzcustom-field textarea::-webkit-input-placeholder,
  106. .nzcustom-field select::-webkit-input-placeholder {
  107.     color: #aaa !important;
  108.     -webkit-text-fill-color: #aaa !important;
  109. }
  111. .nzcustom-field input::-moz-placeholder,
  112. .nzcustom-field textarea::-moz-placeholder,
  113. .nzcustom-field select::-moz-placeholder {
  114.     color: #aaa !important;
  115.     -webkit-text-fill-color: #aaa !important;
  116.     opacity: 1 !important;
  117. }
  119. .nzcustom-field input:-ms-input-placeholder,
  120. .nzcustom-field textarea:-ms-input-placeholder,
  121. .nzcustom-field select:-ms-input-placeholder {
  122.     color: #aaa !important;
  123.     -webkit-text-fill-color: #aaa !important;
  124. }
  126. select#form_question2,
  127. select[id*="question"],
  128. select[id^="form_"],
  129. .nzcustom-field select,
  130. .nzcustom-form-body select {
  131.     color: #2d3748 !important;
  132.     -webkit-text-fill-color: #2d3748 !important;
  133.     background: white !important;
  134.     opacity: 1 !important;
  135.     visibility: visible !important;
  136.     text-indent: 0 !important;
  137.     text-shadow: none !important;
  138.     font-size: 16px !important;
  139.     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  140.     height: auto !important;
  141.     min-height: 30px !important;
  142.     line-height: 1.5 !important;
  143. }
  145. .nzcustom-field select option {
  146.     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  147. }
  149. .nzcustom-field select::placeholder {
  150.     color: #999 !important;
  151.     opacity: 0.7 !important;
  152. }
  154. .nzcustom-field select:invalid {
  155.     color: #718096 !important;
  156. }
  158. .nzcustom-field select:valid {
  159.     color: #2d3748 !important;
  160. }
  162. .nzcustom-field select {
  163.     background-color: #ffffff !important;
  164.     background-image: none !important;
  165. }
  167. .nzcustom-field select option {
  168.     color: #2d3748 !important;
  169.     background: #ffffff !important;
  170.     padding: 10px;
  171.     font-size: 16px !important;
  172.     opacity: 1 !important;
  173. }
  175. .nzcustom-field select option:checked {
  176.     background: #667eea !important;
  177.     color: #ffffff !important;
  178. }
  180. .nzcustom-field input:focus,
  181. .nzcustom-field textarea:focus,
  182. .nzcustom-field select:focus {
  183.     outline: none;
  184.     border-color: #667eea;
  185.     box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  186. }
  188. .nzcustom-field textarea {
  189.     min-height: 140px;
  190.     resize: vertical;
  191. }
  193. /* チェックボックス・ラジオボタン - カスタムレンダリング */
  194. .nzcustom-choices {
  195.     display: flex;
  196.     flex-direction: column;
  197.     gap: 8px;
  198. }
  200. .nzcustom-choice-item {
  201.     display: flex;
  202.     align-items: center;
  203.     padding: 12px 16px;
  204.     background: #f7fafc;
  205.     border: 2px solid transparent;
  206.     border-radius: 10px;
  207.     cursor: pointer;
  208.     transition: all 0.3s ease;
  209. }
  211. .nzcustom-choice-item:hover {
  212.     background: #edf2f7;
  213.     border-color: #e2e8f0;
  214. }
  216. .nzcustom-choice-item input[type="checkbox"],
  217. .nzcustom-choice-item input[type="radio"] {
  218.     width: 18px;
  219.     height: 18px;
  220.     margin-right: 10px;
  221.     flex-shrink: 0;
  222.     cursor: pointer;
  223. }
  225. .nzcustom-choice-label {
  226.     font-size: 16px !important;
  227.     font-weight: 500 !important;
  228.     color: #2d3748 !important;
  229.     margin: 0 !important;
  230.     cursor: pointer !important;
  231.     line-height: 1.4 !important;
  232.     flex: 1;
  233. }
  235. /* ファイルアップロード */
  236. .nzcustom-file-upload {
  237.     margin-bottom: 35px;
  238. }
  240. .nzcustom-file-drop-area {
  241.     border: 3px dashed #cbd5e0;
  242.     border-radius: 16px;
  243.     padding: 50px 30px;
  244.     text-align: center;
  245.     background: #f7fafc;
  246.     transition: all 0.3s ease;
  247.     cursor: pointer;
  248.     position: relative;
  249. }
  251. .nzcustom-file-drop-area:hover {
  252.     border-color: #667eea;
  253.     background: #edf2f7;
  254. }
  256. .nzcustom-file-icon {
  257.     font-size: 64px;
  258.     margin-bottom: 16px;
  259. }
  261. .nzcustom-file-text {
  262.     font-size: 18px;
  263.     font-weight: 600;
  264.     color: #2d3748;
  265.     margin-bottom: 8px;
  266. }
  268. .nzcustom-file-hint {
  269.     font-size: 14px;
  270.     color: #718096;
  271. }
  273. .nzcustom-file-drop-area input[type="file"] {
  274.     position: absolute;
  275.     opacity: 0;
  276.     width: 100%;
  277.     height: 100%;
  278.     top: 0;
  279.     left: 0;
  280.     cursor: pointer;
  281. }
  283. .nzcustom-file-selected {
  284.     margin-top: 16px;
  285.     padding: 12px 16px;
  286.     background: #e6fffa;
  287.     border: 1px solid #81e6d9;
  288.     border-radius: 8px;
  289.     display: none;
  290.     align-items: center;
  291.     font-size: 14px;
  292.     color: #234e52;
  293. }
  295. .nzcustom-file-selected::before {
  296.     content: '✓';
  297.     margin-right: 8px;
  298.     color: #38b2ac;
  299.     font-weight: bold;
  300. }
  302. /* 送信ボタン */
  303. .nzcustom-submit-btn {
  304.     width: 100%;
  305.     padding: 18px 40px;
  306.     font-size: 18px;
  307.     font-weight: 700;
  308.     color: #ffffff;
  309.     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  310.     border: none;
  311.     border-radius: 12px;
  312.     cursor: pointer;
  313.     transition: all 0.3s ease;
  314.     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  315.     margin-top: 20px;
  316. }
  318. .nzcustom-submit-btn:hover {
  319.     transform: translateY(-3px);
  320.     box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
  321. }
  323. /* アラート */
  324. .nzcustom-alert {
  325.     background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
  326.     border-left: 5px solid #f39c12;
  327.     padding: 20px 24px;
  328.     margin-bottom: 30px;
  329.     border-radius: 10px;
  330.     display: flex;
  331.     align-items: center;
  332. }
  334. .nzcustom-alert::before {
  335.     content: 'ℹ️';
  336.     font-size: 24px;
  337.     margin-right: 12px;
  338. }
  340. .nzcustom-alert-text {
  341.     font-size: 15px;
  342.     color: #7d6608;
  343.     font-weight: 500;
  344. }
  346. @media (max-width: 768px) {
  347.     .nzcustom-form-wrapper {
  348.         margin: 30px 15px;
  349.     }
  350.     .nzcustom-form-header {
  351.         padding: 40px 25px;
  352.     }
  353.     .nzcustom-form-title {
  354.         font-size: 32px;
  355.     }
  356.     .nzcustom-form-body {
  357.         padding: 35px 25px;
  358.     }
  359. }
  361. /* 選択肢は中太 */
  362. .nzcustom-choice-label {
  363.     font-weight: 500 !important;
  364. }
  366. /* 日付フィールド - 横並びプルダウン */
  367. .nzcustom-date-selects {
  368.     display: flex;
  369.     align-items: center;
  370.     gap: 8px;
  371.     flex-wrap: wrap;
  372. }
  374. .nzcustom-date-selects select {
  375.     width: auto !important;
  376.     min-width: 80px;
  377.     flex: 1;
  378.     max-width: 120px;
  379.     padding: 5px 12px !important;
  380.     font-size: 16px !important;
  381.     color: #2d3748 !important;
  382.     border: 2px solid #e2e8f0 !important;
  383.     border-radius: 10px !important;
  384.     background: #ffffff !important;
  385.     height: auto !important;
  386.     min-height: 30px !important;
  387.     line-height: 1.5 !important;
  388.     -webkit-appearance: none !important;
  389.     -moz-appearance: none !important;
  390.     appearance: none !important;
  391.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  392.     background-repeat: no-repeat !important;
  393.     background-position: right 10px center !important;
  394.     padding-right: 30px !important;
  395. }
  397. .nzcustom-date-selects select:focus {
  398.     outline: none;
  399.     border-color: #667eea !important;
  400.     box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  401. }
  403. .nzcustom-date-label {
  404.     font-size: 16px;
  405.     font-weight: 500;
  406.     color: #2d3748;
  407.     margin-right: 12px;
  408. }
  410. @media (max-width: 480px) {
  411.     .nzcustom-date-selects {
  412.         flex-direction: row;
  413.         justify-content: space-between;
  414.     }
  415.     .nzcustom-date-selects select {
  416.         min-width: 60px;
  417.         max-width: none;
  418.         flex: 1;
  419.     }
  420.     .nzcustom-date-label {
  421.         margin-right: 8px;
  422.     }
  423. }
  424. </style>
  426. <div class="nzcustom-form-wrapper">
  427.     <div class="nzcustom-form-card">
  428.         <div class="nzcustom-form-header">
  429.             <h1 class="nzcustom-form-title">{{ customForm.name }}</h1>
  430.             {% if customForm.description %}
  431.             <div class="nzcustom-form-description">{{ customForm.description|raw }}</div>
  432.             {% endif %}
  433.         </div>
  434.         
  435.         <div class="nzcustom-form-body">
  436.             {% if app.user %}
  437.             <div class="nzcustom-alert">
  438.                 <div class="nzcustom-alert-text">会員情報から自動入力されています。必要に応じて修正してください。</div>
  439.             </div>
  440.             {% endif %}
  441.             
  442.             {{ form_start(form) }}
  443.             
  444.             {% for field in form %}
  445.                 {% if field.vars.name != '_token' and field.vars.block_prefixes[1] != 'submit' %}
  446.                     <div class="nzcustom-field">
  447.                         <div class="nzcustom-main-label">
  448.                             {{ field.vars.label }}
  449.                             {% if field.vars.required is defined and field.vars.required %}
  450.                                 <span class="required">*</span>
  451.                             {% endif %}
  452.                         </div>
  453.                         
  454.                         {% if field.vars.block_prefixes[1] == 'file' %}
  455.                             <div class="nzcustom-file-upload">
  456.                                 <div class="nzcustom-file-drop-area" id="file-drop-{{ field.vars.id }}">
  457.                                     <div class="nzcustom-file-icon">📁</div>
  458.                                     <div class="nzcustom-file-text">ファイルを選択</div>
  459.                                     <div class="nzcustom-file-hint">クリックしてファイルを選択<br>対応形式: PDF, Word, Excel, 画像 (最大5MB)</div>
  460.                                     {{ form_widget(field) }}
  461.                                 </div>
  462.                                 <div class="nzcustom-file-selected" id="file-selected-{{ field.vars.id }}">
  463.                                     <span class="file-name"></span>
  464.                                 </div>
  465.                             </div>
  466.                         {% elseif field.vars.block_prefixes[1] == 'choice' and field.vars.expanded == false %}
  467.                             {{ form_widget(field) }}
  468.                         {% elseif field.vars.block_prefixes[1] == 'date' %}
  469.                             {# 日付フィールド - 横並びプルダウン #}
  470.                             <div class="nzcustom-date-selects">
  471.                                 {{ form_widget(field.year) }}<span class="nzcustom-date-label">年</span>
  472.                                 {{ form_widget(field.month) }}<span class="nzcustom-date-label">月</span>
  473.                                 {{ form_widget(field.day) }}<span class="nzcustom-date-label">日</span>
  474.                             </div>
  475.                         {% elseif field.vars.block_prefixes[1] == 'choice' and field.vars.expanded == true %}
  476.                             <div class="nzcustom-choices">
  477.                                 {% for child in field %}
  478.                                     <div class="nzcustom-choice-item">
  479.                                         <input type="{{ field.vars.multiple ? 'checkbox' : 'radio' }}" 
  480.                                                id="{{ child.vars.id }}" 
  481.                                                name="{{ child.vars.full_name }}" 
  482.                                                value="{{ child.vars.value }}"
  483.                                                {% if child.vars.checked %}checked="checked"{% endif %}
  484.                                                {% if child.vars.disabled %}disabled="disabled"{% endif %}>
  485.                                         <label for="{{ child.vars.id }}" class="nzcustom-choice-label">
  486.                                             {{ child.vars.label }}
  487.                                         </label>
  488.                                     </div>
  489.                                 {% endfor %}
  490.                             </div>
  491.                         {% else %}
  492.                             {{ form_widget(field) }}
  493.                         {% endif %}
  494.                         
  495.                         {{ form_errors(field) }}
  496.                     </div>
  497.                 {% endif %}
  498.             {% endfor %}
  499.             
  500.             {{ form_widget(form._token) }}
  501.             
  502.             <button type="submit" class="nzcustom-submit-btn">送信する</button>
  503.             
  504.             {{ form_end(form, {'render_rest': false}) }}
  505.         </div>
  506.     </div>
  507. </div>
  509. {{ nz_recaptcha_script('form') }}
  511. <script>
  512. document.addEventListener('DOMContentLoaded', function() {
  513.     // ファイルアップロード
  514.     document.querySelectorAll('.nzcustom-file-drop-area').forEach(function(dropArea) {
  515.         const fileInput = dropArea.querySelector('input[type="file"]');
  516.         if (!fileInput) return;
  517.         
  518.         const fileId = dropArea.id.replace('file-drop-', '');
  519.         const selectedDiv = document.getElementById('file-selected-' + fileId);
  520.         
  521.         fileInput.addEventListener('change', function(e) {
  522.             if (this.files.length > 0) {
  523.                 const fileName = this.files[0].name;
  524.                 selectedDiv.querySelector('.file-name').textContent = fileName;
  525.                 selectedDiv.style.display = 'flex';
  526.             }
  527.         });
  528.         
  529.         dropArea.addEventListener('dragover', function(e) {
  530.             e.preventDefault();
  531.             this.style.borderColor = '#667eea';
  532.             this.style.background = '#edf2f7';
  533.         });
  534.         
  535.         dropArea.addEventListener('dragleave', function(e) {
  536.             e.preventDefault();
  537.             this.style.borderColor = '#cbd5e0';
  538.             this.style.background = '#f7fafc';
  539.         });
  540.         
  541.         dropArea.addEventListener('drop', function(e) {
  542.             e.preventDefault();
  543.             this.style.borderColor = '#cbd5e0';
  544.             this.style.background = '#f7fafc';
  545.             
  546.             if (e.dataTransfer.files.length > 0) {
  547.                 fileInput.files = e.dataTransfer.files;
  548.                 const fileName = e.dataTransfer.files[0].name;
  549.                 selectedDiv.querySelector('.file-name').textContent = fileName;
  550.                 selectedDiv.style.display = 'flex';
  551.             }
  552.         });
  553.     });
  554. });
  555. </script>
  556. {% endblock %}