Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mayen007/contact-form
This is a solution to the Frontend Mentor Contact Form challenge, featuring a responsive and accessible form with validation for required fields, email format, query type, and consent. Built with HTML, CSS, and JavaScript, it includes a success message upon form submission.
https://github.com/mayen007/contact-form
accessibility dom-manipulation error-handling flexbox-css flexbox-grid form-validation form-validation-js form-validator-javascript html-forms ui-design
Last synced: 2 days ago
JSON representation
This is a solution to the Frontend Mentor Contact Form challenge, featuring a responsive and accessible form with validation for required fields, email format, query type, and consent. Built with HTML, CSS, and JavaScript, it includes a success message upon form submission.
- Host: GitHub
- URL: https://github.com/mayen007/contact-form
- Owner: Mayen007
- License: mit
- Created: 2024-11-22T14:50:25.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-01T18:34:16.000Z (22 days ago)
- Last Synced: 2024-12-01T19:30:49.520Z (22 days ago)
- Topics: accessibility, dom-manipulation, error-handling, flexbox-css, flexbox-grid, form-validation, form-validation-js, form-validator-javascript, html-forms, ui-design
- Language: CSS
- Homepage: https://mayen007.github.io/Contact-form/
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Contact Form Solution
This is my solution to the [Contact Form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj). This project demonstrates responsive form design, custom form validation, and accessibility features.
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Author](#author)
## Overview
### The Challenge
Users should be able to:
- Complete the form and see a success message upon submission.
- Receive validation error messages for:
- Missing required fields.
- Incorrect email format.
- Navigate the form using only a keyboard.
- Have inputs, error messages, and the success message announced on a screen reader.
- View a responsive layout optimized for both mobile and desktop.
- See hover and focus states for all interactive elements.
### Screenshots
#### Desktop View
### Links
- [Solution Repository](https://github.com/Mayen007/Contact-form)
- [Live Demo](https://mayen007.github.io/Contact-form/)
## My Process
### Built With
- Semantic HTML5
- CSS custom properties
- Flexbox for layout
- Mobile-first workflow
- Custom form validation and ARIA roles for accessibility
- CSS grid for structuring name inputs
### What I Learned
#### Styling Focus States:
```css
input:focus,
textarea:focus {
outline: none;
border: 2px solid var(--green-600);
}
```
#### Error Handling and Validation:
CSS for displaying error messages:
```css
.error-message {
font-size: 12px;
color: var(--red);
display: none;
}
.input-error {
border: 1px solid var(--red);
}
```
### Accessible Form Validation:
```html
Message Sent!
```
### Continued Development
In future projects, I aim to:
- Refine JavaScript form validation.
- Deepen my understanding of ARIA roles and how they interact with assistive technologies.
- Experiment with animations for success/error messages.
### Useful Resources
- [MDN Web Docs: Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - Great for understanding custom form validations.
- [A11y Project](https://www.a11yproject.com/) - Helped with improving accessibility.
## Author
- GitHub - [Mayen007](https://www.github.com/Mayen007)
- Frontend Mentor - [@Mayen007](https://www.frontendmentor.io/profile/Mayen007)