Update index.html

index.html

@@ -207,48 +207,6 @@
         white-space: nowrap;
       }
 
-      /* Option / radio groups */
-      .option-group {
-        margin-bottom: 1.25rem;
-      }
-
-      .option-label {
-        font-size: 0.9rem;
-        font-weight: 500;
-        color: #374151;
-        margin-bottom: 0.6rem;
-      }
-
-      .option-group label {
-        display: flex;
-        align-items: center;
-        gap: 0.6rem;
-        padding: 0.55rem 0.75rem;
-        border: 1.5px solid #e5e7eb;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        font-weight: 400;
-        color: #374151;
-        margin-bottom: 0.4rem;
-        transition:
-          border-color 0.15s,
-          background 0.15s;
-      }
-
-      .option-group label:hover {
-        border-color: #a78bfa;
-        background: #faf5ff;
-      }
-
-      .option-group input[type="radio"] {
-        accent-color: #7c3aed;
-        width: 1rem;
-        height: 1rem;
-        flex-shrink: 0;
-        margin: 0;
-      }
-
       /* ── Action row ───────────────────────────────────── */
       .action-row {
         margin-top: 1.75rem;
@@ -407,6 +365,48 @@
         cursor: pointer;
       }
 
+      /* Option / radio groups */
+      .option-group {
+        margin-bottom: 1.25rem;
+      }
+
+      .option-label {
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: #374151;
+        margin-bottom: 0.6rem;
+      }
+
+      .option-group label {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        padding: 0.55rem 0.75rem;
+        border: 1.5px solid #e5e7eb;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        font-weight: 400;
+        color: #374151;
+        margin-bottom: 0.4rem;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .option-group label:hover {
+        border-color: #a78bfa;
+        background: #faf5ff;
+      }
+
+      .option-group input[type="radio"] {
+        accent-color: #7c3aed;
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        margin: 0;
+      }
+
       /* ── Disclaimer ──────────────────────────────────── */
       .disclaimer-section {
         padding-bottom: 1.5rem;
@@ -787,10 +787,9 @@
           if (!input) return;
           input.value = audioUrl;
           input.disabled = true;
-          input.title = audioUrl;
+          input.type = "hidden";
           const label = input.previousElementSibling;
-          if (label?.tagName === "LABEL")
-            label.style.cssText = "color:#9ca3af;font-size:0.8rem;";
+          if (label?.tagName === "LABEL") label.style.display = "none";
         });
       }
 
@@ -821,7 +820,7 @@
             (r, index) => {
               let rowLabel = r.label;
               // Add named entity to the 4th row (index 3)
-              if (index === 3 && namedEntity) {
+              if (index === 2 && namedEntity) {
                 rowLabel += ` <em>"<strong style="color:#6b7280;">${namedEntity}</strong>"</em>?`;
               }
               return `
@@ -887,7 +886,7 @@
           </button>
         </div>
         <div class="form-footer">
-          Powered by <a href="https://formstr.app/" target="_blank" rel="noopener">form*</a>
+          Powered by <a href="https://about.formstr.app/" target="_blank" rel="noopener">form*</a>
         </div>
       `;
 
@@ -930,17 +929,29 @@
         // Inject custom grid fields in their correct fieldOrder positions.
         // The SDK rendered them as empty strings; find their placeholders and replace.
         const extras = formDef._rawFieldExtras ?? {};
+        const formBody = document.querySelector(
+          `#form-${formDef.id} .form-body`,
+        );
+        
+        // First, collect all grid field HTML
+        let gridFieldsHtml = '';
         Object.entries(extras).forEach(([fieldId, raw]) => {
-          // The SDK emits nothing for unknown types, so we append grids into the
-          // last form-section (the default section that holds all fields).
-          const formBody = document.querySelector(
-            `#form-${formDef.id} .form-body`,
-          );
-          if (!formBody) return;
           const namedEntity = getNamedEntity();
-          const gridHtml = renderGridField(fieldId, raw, namedEntity);
-          formBody.insertAdjacentHTML("beforeend", gridHtml);
+          gridFieldsHtml += renderGridField(fieldId, raw, namedEntity);
         });
+        
+        // Find all option-group elements and move them after grid fields
+        if (formBody) {
+          const optionGroups = formBody.querySelectorAll('.option-group');
+          const optionGroupsArray = Array.from(optionGroups);
+          
+          // Remove option-groups from their current position
+          optionGroupsArray.forEach(og => og.remove());
+          
+          // Insert grid fields first, then option-groups
+          formBody.insertAdjacentHTML("beforeend", gridFieldsHtml);
+          optionGroupsArray.forEach(og => formBody.appendChild(og));
+        }
 
         document
           .getElementById("next-btn")