FCC - First project - Survey Form

Code Feedback
1

Hello Code Campers. Just finished my first project.
Have started with Survey Form first and found it quite interesting to do.
Let me know what you think about it.

Here is the link https://codepen.io/krzysztofwach/pen/qJyZwB

I would appreciate any feedback.
Thank you.

2

Overall, very good job, just a few issues (and a lot of them are very nit-picky):

  • Missing a label on the select (this is an accessibility issue and should be fixed).
  • The placeholder text should not just repeat the label, it should give an example of what you want the user to type in the box. If you don’t think an example is necessary because it is obvious then you don’t even need placeholder text.
  • Required fields should be denoted graphically as required (usually this is done with an asterisk).
  • If you are going to put an unexpected limit on the input someone can enter (e.g. Age) then you should state those limits (e.g. ‘No one under 10 or over 99 should fill out this form’).
  • I would suggest making the cursor a pointer when hovering over both the radio/checkbox inputs and their labels. Also for hover over select and submit button.
  • Most people expect buttons to be just a little wider than their text. Similarly, does Age need to be that wide when you just want a two digit number?
  • Responsiveness is really good. The only thing I would suggest is at narrower widths lose (or reduce drastically) the side margins on .container and .form-elements so that you have more room for the content and input boxes.
  • I would make the keyboard focus indicators on at least your check boxes much more prominent. Personally, I would make them more prominent on everything.
  • If you really want to be serious about accessibility, then use fieldset/legend for the radio/checkbox groupings:
    https://webaim.org/techniques/forms/controls#checkbox
1 Like
3

@bbsmooth

Thank you for your time checking my code. I wasn’t expecting that much detailed feedback straight away on my first project. WOW :smile:

I have spent quite lots of time reviewing the code and even more time trying to make it as clear as possible. I can see my limits now but this also pushing me for more research while coding. So far I can see myself doing rounds when applying changes/suggestions you have pointed out. It means I need more and more practice, specially with simple tasks like choosing classes and reaching particular elements using CSS. I know the concept but with the amount of different options is not so easy at all. Back to your suggestions.

ad.1. I have added label to select element - have missed that

ad.2. I am not sure exactly which placeholder you talking about. I can see that some of them are obvious (name or e-mail) and personally I would probably avoid them but this was part of the project requirements to pass the test.

ad.3. I was reading couple of articles about ‘required fields’ and some of them suggest not to use asterisks at all cause they confuse readers and other says it’s an old thing and personally I don’t like them. Also there is HTML validation in use which will indicate that they required.
I am still thinking if I should use them or not.

ad.4. Have changed width of the element and you right. It looks much nicer this way. With the age limits, I have put them into placeholder to the time being. Will have to review this for the future.

ad.5. Tanks for this. I have changed them. Not sure is have done this right way but the easiest was to add classes and target them this way.

ad.6. both changed. For some reason I like long buttons anyway :slight_smile:. Will try to keep in mind for the future.

ad.7. Just realized I have forgot to add media query to change font size of the labels and width of the fields. Will add this later on, just have to research again.

And finally the last two points. I have not used this feature mainly because I do not have much experience in this field. Since fieldset/legend is understandable, I have to spent some more time on keyboards focus and understand this topic.

There will be second version of this form in the future but need time to learn.

Thank you one more time for your feedback, very constructive and forces me to work harder on the next project.

4

Welcome to the forums @krzys.wach. Your form looks good. One thing to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There’s an error you should take care of.
5

Thank you @Roma for advice.
I have clearly missed that one. No errors in the code now.

:star_struck: