# ✨ Creative Contact Form

A modern, accessible, and visually soothing contact form built using **HTML**, **CSS**, and **JavaScript**. It features animated transitions, real-time validation, contextual feedback, and a nature-inspired color palette — designed to create a calming and intuitive user experience.

---

## 🌿 Features

- 🎨 **Soothing Color Palette**  
  Soft sage green, muted teal, warm gray, and gentle lavender to reduce eye strain.

- 🎞️ **Smooth Animations**  
  Fade-in load, focus/hover transitions, and modal confirmation effects.

- ✅ **Real-Time Validation**  
  Validates name, email (via regex), and message fields as you type.

- 🧠 **Contextual Error Messages**  
  Provides specific, actionable feedback for each field.

- ♿ **Accessibility Built-In**  
  ARIA labels, high contrast, and reduced motion preference support.

- 💌 **Success Modal (Frontend Only)**  
  Stylish popup confirms successful form submission — no backend required.

- 🔁 **Reset Functionality**  
  One click clears all fields and error messages instantly.

- 🧪 **Robust Edge Case Handling**  
  Trims input, checks minimum lengths, and ensures valid email formats.

- 📱 **Responsive Design**  
  Fully responsive and optimized for desktop and mobile devices.

---

## 📁 Project Structure

/contact-form/ │ ├── index.html # Main HTML structure ├── style.css # Styles: layout, colors, animations ├── script.js # JS: validation logic and interactivity └── README.md # Documentation (this file)

---

## 🚀 Getting Started

1. **Clone the Repository**
   ```bash
   git clone https://github.com/adiyaan010205/Contact_Form.git

2. Open in Your Editor We recommend Visual Studio Code.

3. Preview in Browser Open index.html in your browser to see the form in action.

---

⚙️ Customization

• Change Colors: Modify CSS variables in :root inside style.css.

• Adjust Validation: Edit validation logic in script.js to suit your data requirements.

• Tweak Animations: Update keyframes or transition durations in style.css.

---

🧠 Concepts Demonstrated

• Semantic HTML5 form design
• CSS variables, transitions & animations
• Glassmorphism & subtle microinteractions
• JavaScript form validation & regex
• Accessibility (ARIA, reduced motion, contrast)
• Fully responsive design principles

---

📸 Preview

Nature-inspired interface with animated validation feedback.

---