Feedback: My Survey Form

Code Feedback
1

Survey Form
Please give me feedback.

2

Overall, nice job. You’re one of the few I’ve seen in a while who has labels on every input. The responsiveness is good and it handles increased text size pretty well. There are some minor things that could be improved:

  • The black text on the green background does not have enough color contrast and thus is technically not accessible. You are going to have to make a decision here. Darker background means lighter text, and vice-versa. Also, you will need to increase the opacity even more so the background image doesn’t bleed through as much.
  • Don’t set the button width in px, use em instead. As I make the font size bigger, at a certain point the text breaks out of the button. In general, always try to use responsive units for these sorts of things.
  • Don’t use the row attribute to set height on the textarea. Use the CSS height property instead (and make sure to use em).
  • At smaller browser widths I would recommend you get rid of the side margins on .container and all the .elements (or at least make them much smaller). That way you have more horizontal room for your content. It’s not bad as it is now, but you might as well take advantage of responsive design.
  • You might want to put a max width on your header and form. Right now they just keep widening as far as my browser can stretch, and I can stretch it pretty far.
  • The keyboard focus indicators on the radio buttons/check boxes are pretty much non-existent. I would recommend you make them more prominent. The select and button could also be better too.
2 Likes
3

Thanks for the feedback.
I followed your advice and made the changes, but I don’t know if I did it correctly.
Survey Form

4

Hey there,

Good job!
Limiting the textarea resize property would be extra good for your design.

Example:

#add-info {
resize:vertical;
}

1 Like
5

Thanks.
I added the resize property.

6

Hi there,
Nice work on the page.

  1. Maybe have your h1 & p on top more readable by putting them on an opaque background or something sothey stand out more.
  2. Keep an eye on sentence case caps. It’s noticeable.
  3. I feel the checkbox/radio’s and/or their text should be a bit larger for ease of access.

Great work.

1 Like
7

Thanks!
I followed your tips.
Survey Form.

8

Your form looks good @Crazycamper. Something to revisit;

  • You may have ‘Open Sans’ loaded on your box. I don’t so I’m not seeing the form the way you’ve intended.
    • You need to either link the font (in codepen the link to your font would go in the box labeled ‘Stuff for <head>’) or import the font in CSS
    • The name of the font is Open Sans, not ‘open-sans’. Note uppercase and no hyphen.
1 Like
9

Thanks!
I fixed the font.