Contact Page

Mobile Contact

Single-column full-width contact form with large 44px+ touch targets, visualViewport keyboard-aware scrolling, triple-fallback email system, and tap-to-call social links.

Desktop-এর two-column contact → mobile-এ single column। Virtual keyboard দিয়ে form scroll করলে fields hide না হওয়ার জন্য special handling।

mobile/contact/index.html visualViewport API Triple Fallback
Form Design

Touch-Optimized Form

Desktop-এ দুই কলাম — বাম দিকে contact info, ডান দিকে form। Mobile-এ info উপরে, form নিচে single column।

Send Message
NAME
Your full name
EMAIL
your@email.com
MESSAGE
Type your message here...
44px Touch Targets
All input fields and buttons have min-height: 44px — Apple HIG minimum for comfortable tap. Submit button full-width 48px height.
প্রতিটি input/button কমপক্ষে 44px tall। Fat finger-friendly।
Keyboard Handling
visualViewport.addEventListener('resize') detects keyboard popup. Active field scrolls into view automatically — no field hidden behind keyboard.
Virtual keyboard উঠলে focused field automatically scroll করে দৃশ্যমান থাকে।
Input Validation
Client-side validation before submit. Name required, email regex check, message minimum 10 chars. Error messages inline below each field.
Submit-এর আগে validation। Error message field-এর নিচে দেখায়।
Social Deep Links
Social buttons use deep links: GitHub app, LinkedIn app, YouTube app open if installed. Fallback to web URL. intent:// on Android.
Social button tap → app install থাকলে app খোলে, না থাকলে browser।
Email System

Triple-Fallback Email

Desktop-এর same fallback chain। Mobile-এও same JS logic কাজ করে।

Submit
EmailJS Primary
→
Web3Forms Fallback 1
→
mailto: Fallback 2
Social Links

Tap-to-Open Social

Mobile-এ social links large cards — easy to tap। Desktop-এ ছোট icon grid।

visualViewport API Browser Support
window.visualViewport supported in Chrome 61+, Firefox 63+, Safari 13+। পুরানো browsers-এ fallback হিসেবে window.innerHeight change event use করা হয়। iOS Safari-এ keyboard handling সবসময় perfect না — known limitation।
Auto-Reply System
EmailJS template-এ auto_reply আছে। Message পাঠানো হলে sender-কে automatic confirmation email যায়। Web3Forms fallback-এ auto-reply নেই।
Content Studio All Pages PWA Features