Projeto desenvolvido como solução para um desafio da plataforma Frontend Mentor.
🔗 Site Online: https://anaclarissi.github.io/contact-form/
🔗 Desafio: https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj
🔗 Meu Perfil Frontend Mentor: https://www.frontendmentor.io/profile/anaClarissi
Este projeto consiste em um formulário de contato desenvolvido com foco em HTML semântico, acessibilidade, validação de formulários e boas práticas de JavaScript.
O usuário pode preencher seus dados, selecionar o tipo de solicitação, escrever uma mensagem e enviar o formulário. Antes do envio, todos os campos são validados para garantir que as informações obrigatórias foram preenchidas corretamente.
O principal objetivo deste projeto foi praticar:
- Estruturação semântica com HTML.
- Criação de layouts responsivos com CSS.
- Manipulação do DOM com JavaScript.
- Validação de formulários.
- Feedback visual para erros e sucesso.
- Recursos básicos de acessibilidade (ARIA).
- ✅ Validação de campos obrigatórios.
- ✅ Validação de e-mail.
- ✅ Seleção obrigatória do tipo de consulta.
- ✅ Confirmação obrigatória de consentimento.
- ✅ Exibição de mensagens de erro.
- ✅ Feedback visual para campos inválidos.
- ✅ Mensagem de sucesso após envio.
- ✅ Layout responsivo para dispositivos móveis.
Durante o desenvolvimento foram aplicadas algumas práticas de acessibilidade:
- Uso correto de
label. - Associação de mensagens de erro com
aria-describedby. - Utilização de
aria-invalid. - Mensagens dinâmicas com
role="alert". - Estrutura semântica utilizando
fieldsetelegend.
- HTML5
- CSS3
- JavaScript (Vanilla JS)
contact-form/
│
├── src/
│ ├── assets/
│ │ ├── fonts/
│ │ └── images/
│ │
│ ├── css/
│ │ └── style.css
│ │
│ ├── design/
│ │
│ └── js/
│ └── script.js
│
├── index.html
├── README.md
└── style-guide.md
Durante este projeto pude praticar diversos conceitos importantes para o desenvolvimento front-end, especialmente:
- Manipulação de eventos com JavaScript.
- Validação personalizada de formulários.
- Organização de código em funções reutilizáveis.
- Criação de componentes acessíveis.
- Controle de estados visuais através de classes CSS.
- Integração com um backend para envio real dos dados.
- Validação em tempo real enquanto o usuário digita.
- Testes automatizados.
- Animações mais elaboradas para feedback visual.
- Melhorias adicionais de acessibilidade.
Este projeto foi desenvolvido exclusivamente para fins de estudo e prática de desenvolvimento front-end.
Ele não possui integração com serviços reais de envio de formulários e não deve ser considerado uma aplicação pronta para uso em ambientes profissionais.
O foco principal foi exercitar conceitos de HTML, CSS, JavaScript, acessibilidade e validação de formulários.
Feito com dedicação por Ana Clarissi.
- Frontend Mentor: https://www.frontendmentor.io/profile/anaClarissi
- Projeto Online: https://anaclarissi.github.io/contact-form/