Meaningless Survey Form

Code Feedback
1

Hey everyone,

I’ve completed my second project, which is a Meaningless Survey Form.
I couldn’t find a decent idea for a survey form to build; that’s why it’s named meaningless.

I want to get feedback from the community as i would love to see my mistakes and weak points.

Thanks in advance.

Cheers,
Yigit

2 Likes
2

Hi there,
Good job so far.

Here’s my input:

  1. I like the html background img, but feel like the body of the survey box needs to have some kind of a small border to pop just a bit. To draw your attention to the form.
  2. I like the contrasting purple, but not sure how it would work for visually impaired at all. If it would be a bit too deep.
  3. I think the form should be taller. Then it would stand out better and you could more the survey q’s around a bit more and make them a bit larger.
  4. The input boxes should show a color so they stand out and draw your attention to them. Maybe 80% width or something.
  5. Perhaps even increase the font size on the survey q’s just a bit, so they stand out just a tad from the choices.
  6. The radio boxes are too far away from their parent. They look disconnected.
  7. In your Number box, what are those number that come up when you click on the box. I don’t understand what their purpose it. Seems like you don’t need them.
  8. I don’t understand the purpose of the HTML&CSS checkbox though and the checkboxes are too far away as well.
  9. The Comments field, you may want to identify how long you want it to be. Doesn’t need to be an unnecessarily large size.
  10. And, the Name and Email fields might want to have a limit on their length as well.
  11. The freecodecamp logo seems to get lost in the text area and should probably be put underneath it or in a diff spot.
  12. Maybe change the Submit button to 50-70% and increase the font a bit so it stands out differently as the end point.

These are just suggestions from my point of view if I were working on it.

Nice job, keep it up.
I do notice you’re doing several things in the CSS which I’m unfamiliar with as of yet, so perhaps I’ll understand those later.

3

Hey @ReallyWant2Learn,

Thanks very much for your feedback.

Cheers,
Yigit

4

Dear @Roma,

If you have time, I’d like to receive your feedback as well.

5
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • With your radio buttons and checkboxes you’re nesting what would be a legend that that would be a child of a fieldset to group them. You want to nest each radio button and checkbox in its own label so that users can click on the label to select, not just the radio button/checkbox.
    • Review this lesson on creating radio buttons and the following lesson on creating checkboxes. In the live preview click on the label and notice that it gets selected.
1 Like
6

Hey @Roma,
Thank you very much for your feedback.
I’ve fixed the mistake and understood the label concept very well now.

Cheers,
Yigit