Survey form on self-care habits

Code Feedback
1

Hi! My second project is a survey form on self-care habits during covid-19: https://codepen.io/2_rt_2/full/gOaxjer

Appearance-wise, does my survey look too condensed? Should I increase the line-height?

I’d appreciate any feedback. Thanks!

2

I think you should add little bit of spacing on the sides other than that it’s all good.

3

Your form looks good @rrrach_2. My only feedback is to change the cursor to a pointer when hovering over the submit button.

4

Nice use of fieldset/legend on the check box grouping. I would use it for the radio button grouping as well. All of the inputs have labels (and they work correctly)! Very minor nitpick, the placeholder text should give examples of what you want the user to type in, not just repeat the label. Personally, I would make it clear on the form which fields are required.

Don’t set a height on the text inputs/select drop down so that they can grow as the text size increases (or if you really want to set a height, use ‘em’).

When I start with my browser wide and then slowly narrow it, the form gets skinnier (almost too skinny if you are using a bigger text size) and then suddenly jumps back wide enough to fill the whole window. Seems awkward that the form would be allowed to get so skinny in the first place when there is plenty of room in the side margins to keep it bigger. Also, at the 688px break point and smaller there is a permanent horizontal scroll bar which can maybe scroll 10px. It’s not affecting the functionality of the page, just seems unnecessary.

Using Firefox, when I interact with the first three inputs I get a nice blue outline around the input box. That makes it very clear where the keyboard focus is. But the other inputs get a very wimpy and hard to see faint dotted outline. Use the CSS outline property to give all of the inputs a much more prominent keyboard focus indicator.

Overall, very nice job.

5

Thanks @mutludev! I’ll work on the right and left margins to add slightly more spacing.

6

Thanks for the tip @Roma!

7

Thanks for the feedback @bbsmooth! Regarding the text input/select drop down height, I added a height because the default height looked pretty small on the screen.

I know media queries and margins are my trouble areas. I’ll try to add another breakpoint, so the form isn’t as awkward as the screen gets smaller. Also, I’m not seeing the horizontal scroll bar in the smaller screens.

I’m mostly creating my projects on Chrome, so I’ll check how they look on other browsers going forward.