49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# 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
|