Skip to content
Submitted about 6 hours ago

Responsive Contact Form

Francisco•210
@antoniomontoia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud that I was able to complete a form without any prior knowledge.

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

A lot of them. When it came to writing the JavaScript part, I had to learn to get most things to work.

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

I'd like some feedback on my code, especially when it comes to understanding why the radio buttons and checkboxes are not accessible. I'd also appreciate some advice on how to change the radio buttons and checkboxes to the svg version, I could not wrap my head around that.

Community feedback

  • KapteynUniverse•2,150
    @KapteynUniversePosted about 5 hours ago

    Hey Francisco, they are accesible. But you made everything tabable :D

    Just remove all the tabindexes and outline: none; from the inputs and textarea. Maybe you think they are not accesible because of the outline. It is terrible for accesibility.

    After this changes try to navigate to inputs with tab, when you focus the first radio you can change between them with arrow keys, check the checkbox with space, submit the form with enter or space.

    For the radio and checkbox i used this instead of svgs.

    input[type="radio"]:checked, 
input[type="checkbox"]:checked {
    accent-color: color;
}
    Marked as helpful
    1
    Francisco•210
    @antoniomontoiaPosted about 3 hours ago

    @KapteynUniverse Hey! Thanks a bunch for your feedback, that did the trick!

    1

Please log in to post a comment

Log in with GitHub

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