Could someone give me some criticism on my survey form?

Code Feedback
1

Hi there! I’ve just finished up the survey form responsive web design project. Could someone give me a little feedback and let me know what I have or haven’t done well? Thanks for your time!

Here’s a link to the Codepen page: https://codepen.io/braxmassengale/full/rNVepvJ

2

Hi @Braxtonzmassengale, your form looks okay. Somethings to revisit;

  • you have two instances where you have a duplicate class attribute
    • if you’re not sure what I mean run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab. (codepen’s validator only picks up one)
  • use codepen’s validator to check your CSS. You have an unknown selector
1 Like
3

Hi @Braxtonzmassengale,

Your survey looks ok. I’d suggest you to be more semantic by using input type="submit".

1 Like
4

@Braxtonzmassengale Your form looks alright, I really like that font for some reason, but you have some accessibility issues going on there. The contrast between the color of the font and the background is too low, making it quite hard to read. If you use chrome, press F12 and if you hover over text it shows the contrast between the colors. Yours right now is at 2.72; try to increase that to at least five (I think it was five). Also you can make it look even better if you give your form elements some shading or tinting to make them stand out from the background. Hope this helps a bit.

2 Likes
5

Some accessibility issues:

  • Agree with tompenguin above, the white on bright pink is not accessible.
  • Your select list and textarea need labels
  • Use a fieldset for your radio buttons and text boxes
    https://webaim.org/techniques/forms/controls#radio
  • As I increase the text size your radio buttons and check boxes move above their associated labels (I don’t think this is what you want)
1 Like
6

<button type="submit"> is perfectly semantic, why would the default type for a button in most browsers be “submit” if that’s less semantic :slight_smile:

2 Likes
7

Thanks for your feedback! I’ve now fixed those duplicate classes.

1 Like
8

Thanks for the suggestion!

9

Thanks for the feedback. Yeah, I was wondering if the white might be a little hard to read. Thanks for the tip about chrome! I was unaware of that. I’ll fix the contrast issues and keep them in mind for future projects.

10

Thanks for the suggestions. I’ll work to make the survey more accessible for sure!