Survey Form - feedback on best practice & readability

I’ve just gone back over my completed Survey Form code to tidy up/annotate/streamline it, and would appreciate any feedback and suggestions on my structuring & readability. Thanks in advance!

https://codepen.io/JDarke/pen/vqVxEo

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

Had look at yours cos I’m also on that task. :smile:

Just to let you know that you had one not passed. Which is the submit button. Just re-edit the Button id=submit (take the btn out). Then it’s all pass. Congrates

Thanks!

I had already passed on that, but I was mucking about seeing if I could manage a form reset button (I couldn’t!), and had to differentiate the buttons. I’ve corrected now - thanks for pointing it out! :slight_smile:

Hi @JDarke, it looks good. Some things you may want to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • you have an invalid background color in CSS. Hex color are six characters, not five.
    • in HTML, the p element cannot be a child of the h2 element. Also, font is an obsolete element.
  • beside font element being obsolete you should not use inline styling. Do all your styling in your external CSS file.
  • try and not use the <br> tag. Instead, use margin and/or padding in CSS.
  • you may want to rethink your Submit button. Having white text on a white background probably isn’t the best.
  • change the cursor to a pointer when hovering over the Submit button
  • make the page responsive
1 Like

Hi @JDarke,

Your form looks nice, but there are a few issues with usability and accessibility.

I think the blue colour is nice, I like it a lot, but it doesn’t offer enough contrast to the white text if you want this to be accessible to every user.
You can check that here: https://webaim.org/resources/contrastchecker/

If you want to keep the colour, you need a different, darker background for the text.

I would change the box size for Age. That number doesn’t take up the same space as name and email address and we humans notice that as something odd. It takes our focus away from the form for a second and it’s best to avoid that. Don’t make your users think. There is an interesting book about that: https://en.wikipedia.org/wiki/Don’t_Make_Me_Think

I would also make the text box a bit larger. Even if it’s possible to enlarge it, most people will never use that, because they don’t know it’s possible. So make it the size of a short text. A little longer and wider than it is now. That way there is more chance users will actually leave a message for you.

I like the way your text is alined to the right. It makes it so much easier to read. Just use that for the submit button as well or place that button in the centre of the form, or in the centre of the left part of the form. And of course that button needs a different colour that makes it stand out and with an accessible contrast as others mentioned.

I would use a different colour for the *. The orange is hard to read against the blue background-colour. Maybe that’ll improve with a darker background, but if not, choose a different colour or different shade of orange.

But like I said, I think it’s a nice form, I like forms like that with white text on blue. I’ve tried different colours on my own forms, but for me the blue background helps me to make a form easier to use. I don’t know why.

And a bit more on forms to help with structuring and readability:

Good luck with the challenges!

1 Like