Easy Popup & Contact Form ✉️

A fully functional modal contact form with custom styling, client-side validation, and image preview. Built with Vanilla JavaScript.

🔗 View Live Demo on GitHub Pages

📋 Description

This project implements a popup window that contains a comprehensive feedback form. It features a custom design for all form elements (inputs, radio buttons, checkboxes, file upload) and includes robust JavaScript logic for validation and asynchronous data transmission.

✨ Features

• Modal Logic:
  • Opens on button click.
  • Closes via the "X" button, clicking the overlay, or pressing the Esc key.
  • Locks body scroll when the popup is open.
• Form Validation:
  • Checks for required fields (_req class).
  • Validates Email format using Regex.
  • Validates "Terms Agreement" checkbox.
  • Highlights errors visually (box-shadow).
• Custom UI:
  • Styled Radio buttons and Checkboxes using CSS pseudo-elements.
  • Custom File Input button.
• Image Upload:
  • Client-side validation for file type (Images only) and size (< 2MB).
  • Live Preview: Displays the selected image immediately using the FileReader API.
• Submission Handling:
  • Uses Fetch API to send FormData.
  • Displays a loading spinner while sending (_sending class).

🛠 Tech Stack

• HTML5
• CSS3 (Flexbox, transitions, custom form styling)
• JavaScript (ES6+)
  • Async/Await
  • Fetch API
  • FormData & FileReader
  • DOM Manipulation

⚠️ Note on Backend

The JavaScript code is configured to send data to a sendmail.php file:

let response = await fetch("sendmail.php", { ... });