FCC Survey form (Feedback Needed)

I have made my second project, “freecodecamp survey form”. Honestly, I made it a lot quicker than expected and I think I have missed something out on something.

The Link to project is here:

https://survey-form-for-fcc.netlify.app/

Appreciate any feedback. It didn’t got much better on the originality scale but I was not sure whether to use the background image of FCC or not.

Just a few suggestions:

  • Don’t set the height of inputs in px, use em instead so that they can grow taller as the text size increases.
  • You are missing <label>s on the select drop down and textarea.
  • Nice job using fieldset/legend for the radio button/check box groupings.
  • I would make the keyboard focus indicator more prominent (i.e. style it so it shows up more using the CSS outline property). I can barely see it, especially on the checkboxes.

Overall, very nice job.

1 Like

Included missing <label> tags. Changed the height of input in em. Also made a thicker double outline when focused with a lighter color. Hopefully its more visible now.

This is great man! Keep it UP!!

1 Like

Ya, I’d say it’s much more visible now :wink:

Just a few more minor suggestions:

  • You might want to consider making the mouse cursor a pointer when hovering over the inputs/labels for the radio buttons and check boxes.
  • For the age input, if I type in a number below 10 it will give me an error when I submit telling me that it has to be at least 10. Granted, in real life, there may be very few children under 10 who are coding, but there is always an exception. If you are going to keep the minimum at 10 then I would make it clear for that field that if you are under 10 you should leave the age field blank (or lie and say you are 10). But really, to avoid all of that, make the minimum value lower, like 1.
1 Like

Made the mouse cursor pointer when hovered over radio buttons and checkboxes. Made the minimum age 3 (people don’t usually speak properly before 3) and the maximum age 120 (That’s the highest I know people living)