Osman Adam Logo Image
Osman Adam

Project WhatsApp Contact Form

A lightweight contact form that skips the backend entirely submissions are validated client-side, then handed straight to WhatsApp as a pre-filled message.

Project Image

✨ Features

Name, email, phone, and message fields with real client-side validation.
Fully responsive, mobile-first design with a clean, modern aesthetic.
Accessible, semantic markup with proper form labels and ARIA attributes.
Country-code dropdown for the phone field — 24 countries, flag emoji + dial code, searchable via native.

Hidden honeypot field to silently filter out basic spam bots.
Success toast confirms the WhatsApp tab opened, with a fallback message if pop-ups are blocked
Submission opens WhatsApp (app or web) with a neatly formatted, properly URL-encoded message
Accessible markup — proper s, aria-invalid states, focus rings, aria-live toast announcements
Zero dependencies, zero backend — works from a single static page

Tools Used

HTML5
CSS3
JavaScript
Vanilla JS
ES6
GITHUB