Skip to content
Submitted 12 months ago

Contact Form Solution

Alessandra Oliveira•710
@itsale-o
A solution to the Contact form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Besides my biggest trouble, the whole challenge was very nice and easy. I see this as a sign that I am, in fact, improving my skills

What challenges did you encounter, and how did you overcome them?

My biggest challenge was how to check if there was a radio button selected. I (had to) read a lot, search for references, but in the end I did it. I don't know if I went the right, or easist path but it worked

What specific areas of your project would you like help with?

Hello! This is my solution to the contact form challenge.

A disclaimer: I'm not a pro. I'm impoving myself with each challenge I complete

Feedbacks and suggestions are welcome

Code

Please log in to post a comment

Log in

Community feedback

  • Bernardo Poggioni•6,850
    @R3ygoski

    Olá Alessandra, parabéns pela conclusão do projeto, ele ficou muito bem feito e quase semelhante ao design proposto.

    Sobre o problema que você teve em gerenciar os botões de radio, ele está correto, você utilizou o atributo name que faz com que eles fiquem interligados, e que apenas um possa estar marcado por vez, então sim, está correto.

    Uma dica sobre seu HTML, ele está bem estruturado mas está pouco semântico, e é importante deixar o HTML semântico não só por questão de SEO mas também por questão de acessibilidade, então mostrarei alguns exemplos que podem ser alterados:

    • <div class="message-sent-div hidden"> faria mais sentido ser um <article>, isso porque esse card é autoexplicativo e pode ser reutilizável também, então um <article> faria mais sentido semântico do que um <div> que é pra algo mais genérico.
    • <div class="consent-div"> poderia ser alterado para uma <section> pois é uma secção de itens correlacionados entre si.
    • <div class="query-type-div"> também poderia ser alterado para uma <section>.

    Agora sobre seu JS, notei que tem um pequeno problema, nos inputs de nome e sobrenome, nós podemos digitar um valor numérico e ainda sim não irá dar erro, então isso abre uma brecha. Para corrigir isso você pode utilizar as RegExp para criar uma expressão regular que aceite apenas caracteres alfabéticos, assim ficando mais coerente. Que se não me engano ficaria assim: ^[A-Za-z]+$

    Agora algumas sugestões, primeiramente sobre o nome das classes, notei que você estava dando o nome das classes baseado no que elas são e na tag HTML, exemplo message-p, isso em projetos pequenos funciona até que bem, mas em projetos grandes pode começar a ter conflitos e dar problemas, então eu gostaria de sugerir que você desse uma olhada na Metodologia BEM, que dessa forma você consegue dar nome para as classes de forma mais coesa. Sparkbox - BEM.

    E é isso, novamente parabéns pela conclusão do projeto, continue praticando e se aprimorando. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord