diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue index f147fa6..44cdda7 100644 --- a/pages/form-builder/index.vue +++ b/pages/form-builder/index.vue @@ -91,6 +91,15 @@ Form Settings + + +
+ Help +
+ @@ -1221,6 +1230,206 @@ @restored="handleFormRestored" /> + + +
+ +
+

+ + Getting Started +

+
+
+
1
+
+ Name Your Form: Enter a descriptive name for your form at the top of the page. +
+
+
+
2
+
+ Add Components: Drag and drop components from the left sidebar to the canvas area. +
+
+
+
3
+
+ Configure Fields: Click on any field to configure its settings in the right panel. +
+
+
+
+ + +
+

+ + Component Categories +

+
+
+

Basic Inputs

+
    +
  • • Text, Number, Email, Password
    • +
  • • Text Area, URL, Phone
    • +
  • • Date, Time, Date & Time
    • +
  • • Color Picker, Range Slider
    • +
+
+
+

Selection Inputs

+
    +
  • • Dropdown, Radio Buttons
    • +
  • • Checkboxes, Switch Toggle
    • +
  • • File Upload, Drop Zone
    • +
  • • OTP Verification
    • +
+
+
+

Layout Elements

+
    +
  • • Headings, Paragraphs
    • +
  • • Dividers, Form Sections
    • +
  • • Information Display
    • +
  • • Action Buttons
    • +
+
+
+

Advanced Features

+
    +
  • • Dynamic Lists
    • +
  • • Repeating Groups
    • +
  • • Conditional Logic
    • +
  • • Custom Scripts
    • +
+
+
+
+ + +
+

+ + Field Configuration +

+
+
+

Quick Settings (Right Panel)

+
    +
  • • Label: Field name displayed to users
    • +
  • • Name: Internal field identifier
    • +
  • • Placeholder: Hint text in empty fields
    • +
  • • Required: Make field mandatory
    • +
  • • Width: Control field size (S, M, L, XL)
    • +
+
+
+

Advanced Settings (Settings Icon)

+
    +
  • • Validation: Add custom validation rules
    • +
  • • Conditional Logic: Show/hide based on other fields
    • +
  • • Custom Scripts: Add JavaScript functionality
    • +
  • • Button Links: Configure process links and iframe parameters
    • +
+
+
+
+ + +
+

+ + Button Features +

+
+
+

Link Configuration

+
    +
  • • No Link: Regular button behavior
    • +
  • • Custom URL: Link to any website
    • +
  • • Process Link: Link to published workflows
    • +
+
+
+

Iframe Integration

+
    +
  • • Debug Mode: Control UI visibility (OFF = iframe mode)
    • +
  • • Hide Completion: Auto-advance to next step
    • +
  • • Theme: Apply custom themes (Dark/Light)
    • +
  • • Custom Parameters: Add additional URL parameters
    • +
+
+
+
+ + +
+

+ + Tips & Tricks +

+
+
+
+

Keyboard Shortcuts

+
    +
  • • Ctrl+S Save form
    • +
  • • Ctrl+Z Undo changes
    • +
  • • Delete Remove selected field
    • +
+
+
+
+
+

Best Practices

+
    +
  • • Use descriptive field names
    • +
  • • Group related fields together
    • +
  • • Test your form in preview mode
    • +
  • • Save your work frequently
    • +
+
+
+
+
+ + +
+

+ + Preview Mode +

+
+

Click the Preview button to see how your form will look to users. In preview mode:

+
    +
  • • Test form functionality and validation
    • +
  • • Check responsive design on different devices
    • +
  • • Verify all field configurations work correctly
    • +
  • • Test button links and iframe integrations
    • +
+
+
+
+ + + + @@ -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';