This is a solution to the Contact form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The Challenge
  • Screenshot
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author
• Acknowledgments

Users should be able to:

• ✅ Complete the form and see a success toast message upon successful submission
• ✅ Receive form validation messages if:
  • A required field has been missed
  • The email address is not formatted correctly
• ✅ Complete the form using only their keyboard
• ✅ Have inputs, error messages, and the success message announced on their screen reader
• ✅ View the optimal layout for the interface depending on their device's screen size
• ✅ See hover and focus states for all interactive elements on the page

• Solution URL: Frontend Mentor Solution
• Live Site URL: Contact form

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vanilla JavaScript for form validation and interactivity

This project provided valuable experience in creating accessible and responsive forms. Key learnings include:

• Implementing real-time form validation using JavaScript
• Creating a mobile-first, responsive design with CSS Flexbox
• Enhancing accessibility with proper ARIA attributes and keyboard navigation
• Managing form states (error, success) effectively

Code snippets I'm proud of:

<div class="form-group">
    <label for="email">Email Address <span aria-label="required">*</span></label>
    <input type="email" id="email" name="email" required aria-required="true">
    <div class="error-message" id="email-error"></div>
</div>

button:hover, button:focus {
    background-color: hsl(169, 82%, 22%);
}

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

In future projects, I plan to focus on:

• Exploring more advanced JavaScript form validation techniques
• Implementing custom form controls with enhanced accessibility
• Integrating with backend APIs for real form submissions

• MDN Web Docs - Comprehensive web development documentation.
• Web Accessibility Initiative (WAI) - Excellent resource for accessibility best practices.

• Website - Abdullah
• LinkedIn - LinkedIn
• Frontend Mentor - Abdullah
• Twitter - Abdullah
• Instagram - Abdullah

A special thank you to Frontend Mentor for providing this challenge. I also appreciate the community for their inspiration and support!