1.8 KiB
1.8 KiB
Portal Login Page Design
Two-Audience Layout
The portal login page serves two distinct users side by side:
Left: Existing Customer Login
- Blue accent theme
- Email + password fields
- Remember me checkbox
- Forgot password link
- Google SSO button
- Purpose: "Access your dashboard, view services, manage your account"
Right: New Customer Lead Capture
- Green accent theme (differentiation)
- First name + Last name fields (separate, 2-column grid — NOT "Full name" single field)
- Email + Company fields
- Service interest checkboxes (grid 2-column layout with 8 options):
- Internet / WISP
- Business VoIP
- DNS / Domain
- Email Hosting
- Web Hosting
- Network Setup
- Backup / DR
- Other
- Cloudflare Turnstile shield icon + "Protected by Cloudflare Turnstile" text above submit button
- Submit labeled "Submit Inquiry" with caption "We'll review your request and contact you within 1 business day."
- Purpose: "Tell us what you need and we'll reach out with a custom solution"
Captcha Protection
Public-facing forms require bot protection. Options ranked:
| Option | UX | Best for |
|---|---|---|
| Cloudflare Turnstile ✅ | Invisible — no checkbox | Privacy-focused, free, simple |
| reCAPTCHA v3 (invisible) | No click, score-based | Fine, but Google-owned |
| reCAPTCHA v2 checkbox | "I'm not a robot" click | Works, but dated UX |
| Honeypot field | Hidden field, zero UX impact | Good 2nd layer, not enough alone |
Turnstile is the recommended choice — free, no Google tracking required, invisible to users, one line of JS + one widget key.
Responsive Breakpoints
- Mobile (< 640px): Single column, panels stack vertically, service checkboxes collapse to single column
- Tablet (640-1024px): 2-column grid, reduced padding
- Desktop (> 1024px): Side-by-side panels with full padding