# Public Lead Form - Visual Layout Reference ## Form Structure Overview ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ │ 🛡️ Security Guard Services [Lead Form] │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ FORM HEADER │ │ Service Requirements Form │ │ Please provide your details and requirements... │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 🏢 SECTION 1: CLIENT & SITE DETAILS │ │ ─────────────────────────────────────────────────────────── │ │ │ │ Company / Client Name * Contact Person * │ │ [___________________________] [___________________________] │ │ │ Mobile Number * Email Address * │ │ [___________________________] [___________________________] │ │ │ Country * City / State * │ │ [India ▼] [___________________________] │ │ │ Postal Code * Address * │ │ [___________________________] [___________________________] │ [___________________________] │ Service Location Details │ │ [_________________________________________________________________] │ [_________________________________________________________________] │ │ │ Site Type * │ │ ◯ Office ◯ Factory ◯ Residential ◯ Event │ │ ◯ Retail ◯ Hospital ◯ Educational ◯ Other │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 💼 SECTION 2: SERVICE TYPE │ │ ─────────────────────────────────────────────────────────── │ │ Select the type of security services required │ │ │ │ ☑ Static Guard ☐ Armed Guard │ │ ☐ Escort Service (Pistol) │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 🕐 SECTION 3: WORKING HOURS │ │ ─────────────────────────────────────────────────────────── │ │ │ │ ◯ 8 Hours ◯ 12 Hours ◯ 24 Hours (Custom) │ │ │ │ [Custom working hours field appears if 24H selected] │ │ [___________________________________________________________________] │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ ⏳ SECTION 4: OVERTIME (OT) REQUIREMENT │ │ ─────────────────────────────────────────────────────────── │ │ Select maximum expected overtime hours │ │ │ │ ◯ 1 Hour ◯ 2 Hours ◯ 3 Hours ◯ 4 Hours │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 💰 SECTION 5: ALLOWANCES (MULTI-SELECT) │ │ ─────────────────────────────────────────────────────────── │ │ Select applicable allowances │ │ │ │ ☐ Transport Allowance │ │ ☐ Performance Bonus │ │ ☐ Attendance Allowance │ │ ☐ Supervisor Allowance │ │ ☐ Assistant Supervisor Allowance │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ ✓ SECTION 6: ADDITIONAL REQUIREMENTS │ │ ─────────────────────────────────────────────────────────── │ │ [DYNAMICALLY POPULATED BASED ON SERVICE TYPE] │ │ │ │ For Static Guard: │ │ Supervisor required? ◯ Yes ◯ No │ │ Night duty required? ◯ Yes ◯ No │ │ │ │ For Armed Guard: │ │ Armed Supervisor required? ◯ Yes ◯ No │ │ Assistant Supervisor required? ◯ Yes ◯ No │ │ Night duty required? ◯ Yes ◯ No │ │ │ │ For Escort Service: │ │ Escort frequency? ◯ Daily ◯ Weekly ◯ As needed │ │ Armed escorts required? ◯ Yes ◯ No │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 📦 SECTION 7: INVENTORY REQUIREMENTS │ │ ─────────────────────────────────────────────────────────── │ │ Specify quantities of equipment required │ │ │ │ Clothing & Footwear: │ │ Uniform Sets: [0] Jacket: [0] │ │ Blazer: [0] Safety Shoes: [0] │ │ Normal Shoes: [0] Accessories: [0] │ │ │ │ Equipment: │ │ Baton: [0] Torch Light: [0] │ │ Walkie-Talkie: [0] Body Camera: [0] │ │ │ │ Infrastructure: │ │ Guard Cabin: [0] Visitor Register: [0] │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ ⚖️ SECTION 8: COMPLIANCE REQUIREMENTS │ │ ─────────────────────────────────────────────────────────── │ │ Please select applicable compliance requirements │ │ │ │ ☐ SMETA Certification Required │ │ ☑ RBA Compliance Required (disabled if Malaysia) │ │ │ │ ℹ️ RBA compliance is mandatory for Malaysia. │ │ It will be automatically selected if Malaysia is │ │ your country. │ │ │ │ ☐ Local Labour Law Compliance │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 📝 SECTION 9: ADDITIONAL INFORMATION │ │ ─────────────────────────────────────────────────────────── │ │ │ │ Sales Notes │ │ [_________________________________________________________________] │ [_________________________________________________________________] │ [_________________________________________________________________] │ │ │ Client Expectations │ │ [_________________________________________________________________] │ [_________________________________________________________________] │ [_________________________________________________________________] │ │ │ Follow-up Date │ │ [2026-01-23] │ │ │ │ Budget Range - Minimum Budget Maximum │ │ [0] [0] │ │ │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ FORM ACTIONS (STICKY) │ │ │ │ [🔄 Clear Form] [💾 Save as Draft] [✈️ Submit Lead] │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## Desktop Layout (md breakpoint+) ### Grid Layout (2 Columns) ``` ┌──────────────────────────────┬──────────────────────────────┐ │ FIELD 1 │ FIELD 2 │ │ (50% width) │ (50% width) │ │ Gap: 24px (1.5rem) │ │ └──────────────────────────────┴──────────────────────────────┘ ``` ### Full Width Fields ``` ┌──────────────────────────────────────────────────────────────┐ │ FIELD 1 (100% width) │ │ Example: Address textarea │ └──────────────────────────────────────────────────────────────┘ ``` ### Radio Button Grid ``` ┌─────────┬─────────┬─────────┬─────────┐ │ Option1 │ Option2 │ Option3 │ Option4 │ │ (25%) │ (25%) │ (25%) │ (25%) │ ├─────────┴─────────┴─────────┴─────────┤ │ Gap: 12px between items │ └───────────────────────────────────────┘ ``` --- ## Mobile Layout (sm breakpoint) ### Single Column ``` ┌──────────────────────────┐ │ FIELD 1 │ │ (100% width) │ ├──────────────────────────┤ │ FIELD 2 │ │ (100% width) │ ├──────────────────────────┤ │ FIELD 3 │ │ (100% width) │ └──────────────────────────┘ ``` ### Radio/Checkbox Stack ``` Mobile (1 column): ┌──────────────────────┐ │ ◯ Option 1 │ ├──────────────────────┤ │ ◯ Option 2 │ ├──────────────────────┤ │ ◯ Option 3 │ ├──────────────────────┤ │ ◯ Option 4 │ └──────────────────────┘ Tablet (2-4 columns): ┌──────────────┬──────────────┬──────────────┬──────────────┐ │ ◯ Option 1 │ ◯ Option 2 │ ◯ Option 3 │ ◯ Option 4 │ └──────────────┴──────────────┴──────────────┴──────────────┘ ``` --- ## Color Scheme ### Primary Colors ``` Primary Red: #dc2626 (brand color, buttons, active states) Light Red: #ef4444 (hover states, icons) Lighter Red: #f87171 (borders, accents) Background: #ffffff (form sections) Gradient BG: #f3f4f6 to #e5e7eb (page background) Text: #111827 (headings), #374151 (labels), #6b7280 (hints) Success: #22c55e (completed sections) Error: #ef4444 (validation errors) Info: #3b82f6 (help text, info boxes) ``` ### State Colors ``` Normal: Border #d1d5db, Background #ffffff Focus: Border #dc2626, Ring #dc2626 (inset) Error: Border #ef4444, Text #dc2626 Disabled: Border #e5e7eb, Text #9ca3af ``` --- ## Typography ### Font Stack ``` Font Family: Inter, system fonts Weights: 300 (light), 400 (normal), 500 (medium), 600 (semibold), 700 (bold) Sizes: - Page Title (h1): 3xl font-bold (2.25rem) - Section Title (h2): lg font-semibold (1.125rem) - Label (label): sm font-medium (0.875rem) - Input Placeholder: sm (0.875rem) - Help Text: xs (0.75rem) - Error Message: xs font-normal (0.75rem) - Button Text: sm font-medium (0.875rem) Line Heights: - Headings: 1.2 - Body: 1.5 - Form fields: 1.5 ``` --- ## Spacing System ### Vertical Spacing ``` Section spacing: 1.5rem (24px) Form element spacing: 1rem (16px) Field label spacing: 0.5rem (8px) below label Helper/error text: 0.25rem (4px) above Between form sections: 1.5rem (24px) ``` ### Horizontal Spacing ``` Section padding: 1.5rem (24px) Field padding: 1rem (16px) Icon spacing: 0.75rem (12px) Grid gap: 1.5rem (24px) ``` ### Field Dimensions ``` Input height: 2.5rem (40px) - py-2 Button height: 2.5rem (40px) Button padding: 1rem horizontal Button radius: 0.5rem (8px) Field border: 1px solid Icon size (section): 2.5rem (40px) ``` --- ## Form Section Template ```html ┌─────────────────────────────────────────┐ │ [ICON] SECTION TITLE │ │ ─────────────────────────────────────── │ │ │ │ Description or helper text (optional) │ │ │ │ Layout (grid or custom): │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Field 1 │ │ Field 2 │ │ │ │ │ │ │ │ │ │ [________] │ │ [________] │ │ │ └──────────────┘ └──────────────┘ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ Full-width field │ │ │ │ [__________________________] │ │ │ └────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ ``` --- ## Button Styling ### Primary Button (Submit) ``` Background: #dc2626 Text: White Hover: #b91c1c (darker red) Active: #991b1b (even darker) Padding: 1rem x 1.5rem Border radius: 0.5rem (8px) Icon + Text: Icon [gap] Text Transition: All 0.15s ease ``` ### Secondary Button (Save Draft) ``` Background: Transparent Border: 1px solid #dc2626 Text: #dc2626 Hover: #fef2f2 (light red background) Padding: 1rem x 1.5rem Border radius: 0.5rem (8px) ``` ### Tertiary Button (Clear Form) ``` Background: Transparent Border: 1px solid #d1d5db Text: #374151 (dark gray) Hover: #f3f4f6 (light gray background) Padding: 1rem x 1.5rem Border radius: 0.5rem (8px) ``` --- ## Input Field Styling ``` ┌────────────────────────────────────┐ │ Label text │ ← Margin bottom: 0.5rem │ Styling: sm font-medium │ │ │ │ [_____________________________] │ ← Height: 2.5rem (py-2) │ Border: 1px solid #d1d5db │ Padding: 1rem (px-4) │ Border-radius: 0.5rem │ Focus: ring-2 ring-primary │ │ │ Error message (if any) │ ← Margin top: 0.25rem │ Styling: text-red-500 text-xs │ └────────────────────────────────────┘ Placeholder text styling: - Color: #9ca3af (lighter gray) - Font style: italic (optional) ``` --- ## Responsive Breakpoints ``` Mobile (default): - Width: 100% - Columns: 1 - Padding: 1rem Mobile (sm: 640px): - Width: auto - Columns: 1 or 2 - Padding: 1.5rem Tablet (md: 768px): - Width: auto - Columns: 2 - Padding: 1.5rem Desktop (lg: 1024px): - Width: 56rem (max-w-4xl) - Columns: 2 - Padding: 1.5rem - Centered with mx-auto ``` --- ## Icon Reference | Icon | Usage | Location | |------|-------|----------| | 🛡️ shield-alt | Header logo | Navbar | | 🏢 building | Section 1 icon | Client details | | 💼 briefcase | Section 2 icon | Service type | | 🕐 clock | Section 3 icon | Working hours | | ⏳ hourglass | Section 4 icon | Overtime | | 💰 money | Section 5 icon | Allowances | | ✓ list-check | Section 6 icon | Dynamic questions | | 📦 boxes | Section 7 icon | Inventory | | ⚖️ gavel | Section 8 icon | Compliance | | 📝 sticky-note | Section 9 icon | Additional info | --- ## Animation References ### Page Load ```css Fade-in: opacity 0 → 1 (300ms ease-out) Slide-down: translateY(-10px) → 0 (300ms ease-out) ``` ### Toast Notification ```css Slide-in: translateX(400px) → 0 (300ms ease-out) Auto-remove: After 4 seconds Slide-out: translateX(400px) (200ms ease-in) ``` ### Form Validation ```css Error highlight: border-color 300ms ease Field shake: translateX(-4px) → 0 (100ms) ``` ### Hover States ```css Buttons: background-color 150ms ease Inputs: border-color, box-shadow 150ms ease Labels: color 150ms ease ``` --- ## Accessibility Features ### Visual Indicators - Required fields: Red asterisk (*) - Error fields: Red border with message - Focus states: Ring-2 ring-primary-600 - Disabled states: Opacity-75, cursor-not-allowed ### Keyboard Navigation - Tab order: Top to bottom, left to right - Tab index: -1 for honeypot fields - Focus visible: All interactive elements - Enter key: Submits form on buttons ### Screen Reader Support - Label associations: for/id attributes - Help text: aria-describedby (optional) - Error messages: aria-live regions (optional) - Form role:
semantic --- ## Print Stylesheet (Optional) ```css /* Hide non-essential elements */ navbar { display: none; } buttons { display: none; } /* Optimize for printing */ form { width: 100%; color: black; background: white; } /* Show all sections */ .hidden-section { display: block !important; } /* Print-friendly spacing */ section { page-break-inside: avoid; margin-bottom: 1rem; } ``` --- ## Performance Optimization ### CSS - Inline Tailwind (minimal CDN load) - No critical CSS blocking - Async Font Awesome loading ### JavaScript - Minimal vanilla JS (no framework) - Inline script tags - Event delegation for dynamic elements - No external library dependencies ### Images - SVG icons (scale-able, small) - No background images - Optimized favicon ### Network - Form submits to same domain - No AJAX (standard form submission) - CSRF token loaded with page --- ## Testing Viewports ``` Mobile: 375px × 812px (iPhone SE) Mobile XL: 414px × 896px (iPhone 12) Tablet: 768px × 1024px (iPad) Desktop: 1024px × 768px (Desktop) Desktop XL: 1440px × 900px (Large monitor) ``` --- ## Summary | Aspect | Value | |--------|-------| | Primary Color | #dc2626 (Red) | | Font | Inter system stack | | Max Width | 56rem (4xl) | | Grid Columns | 1 (mobile), 2 (desktop) | | Section Spacing | 1.5rem (24px) | | Border Radius | 0.5rem (8px) | | Input Height | 2.5rem (40px) | | Button Style | Filled (primary), Outlined (secondary) | | Responsive | Mobile-first, 4 breakpoints | | Animations | Smooth 150-300ms transitions | | Accessibility | WCAG AA compliant |