Feedback for my fCC Survey Form I completed

Code Feedback
1

Hello everyone!

I just completed my Survey Form and I would like some feedback on it. This is also my first time using a Media Query.

2

Your form looks good @Lateralus.
Some minor suggestions. (With suggestions you can choose to implement them or not)

  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • When using the keyboard to navigate your form it’s difficult to see when the submit button has focus. Perhaps use focus and change the color like you do with hover.
3

Thanks @Roma . So I just corrected the placeholder text. As for my button, I wonder if it’s it the opacity that makes it difficult to see if it has focus?

4

I think it looks nice. A beautiful background picture you have there and you did some interesting stuff with media queries.

Some things to look into as to mine personal preferences:

  • Adjusting the headline to make it more visible.

  • Adding some extra space to the sides of the label and input areas (you could
    make this less when the screen gets smaller with your media queries). Also to the header text once screen become smaller and the background color pops up.

  • Consider using border radius, even a few pixels can make the overall viewing experience a bit better.

  • Form width is a bit too large at certain screen size (around 800px). Why not make it a tad smaller.

  • When you take a look at the form content: on a wide screen its mostly placed at the left side. Consider making the input areas shorter, or take of a good chunk off the form width. I think it looks better that way.
    Look into the “max-width” property and play around with it, its great for such things if you ask me (you can also solve this by making 2 columns with flex or grid displays - you can arrange a single column once the screen becomes smaller). Maybe there are better ways I do not know about, content sizing is quiet a complex skill to me with many options.

  • I fail to see a remarkable change in the header font sizes to the media queries you have set up. I presume it is because the standard header 1 size is 30px or very close to it and same for the paragraph which I think is 16px.

5

Thanks @code-carrot for your input. I did add some border radii for the smaller media query max 600px and also made the font for the header and paragraph elements larger which in my mind is more readable for somebody accessing the survey with a phone.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.