Add Help Section and Modal in Form Builder

- Introduced a new Help section in the Form Builder interface, providing users with guidance on how to use the form builder effectively.
- Added a Help Modal that includes detailed instructions on getting started, component categories, field configuration, button features, tips & tricks, and preview mode.
- Implemented a button to trigger the Help Modal, enhancing user experience by offering contextual assistance.
- Ensured the Help Modal is responsive and user-friendly, with clear sections and actionable tips for users to follow.

pages/form-builder/index.vue

@@ -91,6 +91,15 @@
               <Icon name="material-symbols:code" class="mr-2 w-4 h-4" />
               <span>Form Settings</span>
             </button>
+            
+            <!-- Help -->
+            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
+              Help
+            </div>
+            <button @click="showHelpModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+              <Icon name="material-symbols:help-outline" class="mr-2 w-4 h-4" />
+              <span>How to Use</span>
+            </button>
           </div>
         </div>
       </div>
@@ -1221,6 +1230,206 @@
       @restored="handleFormRestored"
     />
 
+    <!-- Help Modal -->
+    <RsModal v-model="showHelpModal" title="How to Use Form Builder" size="xl" position="center">
+      <div class="p-6 space-y-6">
+        <!-- Getting Started -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:rocket-launch" class="w-5 h-5 mr-2 text-blue-600" />
+            Getting Started
+          </h3>
+          <div class="space-y-3 text-sm text-gray-700">
+            <div class="flex items-start space-x-3">
+              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</div>
+              <div>
+                <strong>Name Your Form:</strong> Enter a descriptive name for your form at the top of the page.
+              </div>
+            </div>
+            <div class="flex items-start space-x-3">
+              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</div>
+              <div>
+                <strong>Add Components:</strong> Drag and drop components from the left sidebar to the canvas area.
+              </div>
+            </div>
+            <div class="flex items-start space-x-3">
+              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</div>
+              <div>
+                <strong>Configure Fields:</strong> Click on any field to configure its settings in the right panel.
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Component Categories -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:category" class="w-5 h-5 mr-2 text-green-600" />
+            Component Categories
+          </h3>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div class="space-y-2">
+              <h4 class="font-medium text-gray-800">Basic Inputs</h4>
+              <ul class="text-gray-600 space-y-1">
+                <li>• Text, Number, Email, Password</li>
+                <li>• Text Area, URL, Phone</li>
+                <li>• Date, Time, Date & Time</li>
+                <li>• Color Picker, Range Slider</li>
+              </ul>
+            </div>
+            <div class="space-y-2">
+              <h4 class="font-medium text-gray-800">Selection Inputs</h4>
+              <ul class="text-gray-600 space-y-1">
+                <li>• Dropdown, Radio Buttons</li>
+                <li>• Checkboxes, Switch Toggle</li>
+                <li>• File Upload, Drop Zone</li>
+                <li>• OTP Verification</li>
+              </ul>
+            </div>
+            <div class="space-y-2">
+              <h4 class="font-medium text-gray-800">Layout Elements</h4>
+              <ul class="text-gray-600 space-y-1">
+                <li>• Headings, Paragraphs</li>
+                <li>• Dividers, Form Sections</li>
+                <li>• Information Display</li>
+                <li>• Action Buttons</li>
+              </ul>
+            </div>
+            <div class="space-y-2">
+              <h4 class="font-medium text-gray-800">Advanced Features</h4>
+              <ul class="text-gray-600 space-y-1">
+                <li>• Dynamic Lists</li>
+                <li>• Repeating Groups</li>
+                <li>• Conditional Logic</li>
+                <li>• Custom Scripts</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Field Configuration -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:settings" class="w-5 h-5 mr-2 text-purple-600" />
+            Field Configuration
+          </h3>
+          <div class="space-y-3 text-sm text-gray-700">
+            <div class="bg-gray-50 p-3 rounded-lg">
+              <h4 class="font-medium text-gray-800 mb-2">Quick Settings (Right Panel)</h4>
+              <ul class="space-y-1 text-gray-600">
+                <li>• <strong>Label:</strong> Field name displayed to users</li>
+                <li>• <strong>Name:</strong> Internal field identifier</li>
+                <li>• <strong>Placeholder:</strong> Hint text in empty fields</li>
+                <li>• <strong>Required:</strong> Make field mandatory</li>
+                <li>• <strong>Width:</strong> Control field size (S, M, L, XL)</li>
+              </ul>
+            </div>
+            <div class="bg-gray-50 p-3 rounded-lg">
+              <h4 class="font-medium text-gray-800 mb-2">Advanced Settings (Settings Icon)</h4>
+              <ul class="space-y-1 text-gray-600">
+                <li>• <strong>Validation:</strong> Add custom validation rules</li>
+                <li>• <strong>Conditional Logic:</strong> Show/hide based on other fields</li>
+                <li>• <strong>Custom Scripts:</strong> Add JavaScript functionality</li>
+                <li>• <strong>Button Links:</strong> Configure process links and iframe parameters</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Button Features -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:smart-button" class="w-5 h-5 mr-2 text-orange-600" />
+            Button Features
+          </h3>
+          <div class="space-y-3 text-sm text-gray-700">
+            <div class="bg-blue-50 p-3 rounded-lg border border-blue-200">
+              <h4 class="font-medium text-blue-800 mb-2">Link Configuration</h4>
+              <ul class="space-y-1 text-blue-700">
+                <li>• <strong>No Link:</strong> Regular button behavior</li>
+                <li>• <strong>Custom URL:</strong> Link to any website</li>
+                <li>• <strong>Process Link:</strong> Link to published workflows</li>
+              </ul>
+            </div>
+            <div class="bg-green-50 p-3 rounded-lg border border-green-200">
+              <h4 class="font-medium text-green-800 mb-2">Iframe Integration</h4>
+              <ul class="space-y-1 text-green-700">
+                <li>• <strong>Debug Mode:</strong> Control UI visibility (OFF = iframe mode)</li>
+                <li>• <strong>Hide Completion:</strong> Auto-advance to next step</li>
+                <li>• <strong>Theme:</strong> Apply custom themes (Dark/Light)</li>
+                <li>• <strong>Custom Parameters:</strong> Add additional URL parameters</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tips & Tricks -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:lightbulb" class="w-5 h-5 mr-2 text-yellow-600" />
+            Tips & Tricks
+          </h3>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div class="space-y-2">
+              <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
+                <h4 class="font-medium text-yellow-800 mb-1">Keyboard Shortcuts</h4>
+                <ul class="text-yellow-700 space-y-1">
+                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Ctrl+S</kbd> Save form</li>
+                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Ctrl+Z</kbd> Undo changes</li>
+                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Delete</kbd> Remove selected field</li>
+                </ul>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="bg-purple-50 p-3 rounded-lg border border-purple-200">
+                <h4 class="font-medium text-purple-800 mb-1">Best Practices</h4>
+                <ul class="text-purple-700 space-y-1">
+                  <li>• Use descriptive field names</li>
+                  <li>• Group related fields together</li>
+                  <li>• Test your form in preview mode</li>
+                  <li>• Save your work frequently</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Preview Mode -->
+        <div class="help-section">
+          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+            <Icon name="material-symbols:preview" class="w-5 h-5 mr-2 text-indigo-600" />
+            Preview Mode
+          </h3>
+          <div class="space-y-3 text-sm text-gray-700">
+            <p>Click the <strong>Preview</strong> button to see how your form will look to users. In preview mode:</p>
+            <ul class="space-y-1 text-gray-600">
+              <li>• Test form functionality and validation</li>
+              <li>• Check responsive design on different devices</li>
+              <li>• Verify all field configurations work correctly</li>
+              <li>• Test button links and iframe integrations</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      
+      <template #footer>
+        <div class="flex justify-between items-center">
+          <div class="text-sm text-gray-500">
+            Need more help? Check our documentation or contact support.
+          </div>
+          <div class="flex gap-2">
+            <RsButton @click="showHelpModal = false" variant="tertiary">
+              Close
+            </RsButton>
+            <RsButton @click="openDocumentation" variant="primary">
+              <Icon name="material-symbols:description" class="mr-1" />
+              View Documentation
+            </RsButton>
+          </div>
+        </div>
+      </template>
+    </RsModal>
+
         </div>
   </template>
 
@@ -1271,6 +1480,7 @@ const isPreview = ref(false);
 const showFormSettings = ref(false);
 const showTemplatesModal = ref(false);
 const showFormHistoryModal = ref(false);
+const showHelpModal = ref(false);
 const showDropdown = ref(false);
 const leftSidebarTab = ref('components');
 const showFieldSettingsPanel = ref(true);
@@ -1300,6 +1510,12 @@ const fetchPublishedProcesses = async () => {
   }
 }
 
+// Open documentation
+const openDocumentation = () => {
+  // Open documentation in new tab
+  window.open('/documentation', '_blank')
+}
+
 // Helper function to get submit button CSS classes and styles based on category and color
 const getSubmitButtonStyles = (category, color) => {
   const baseClasses = 'px-4 py-2 rounded font-medium transition-all duration-200 text-white border-0';