Survey Form almost fine-tuned

Hi. I have been working hard at making this look pretty and am getting close to something I like. I do see an issue with the checkboxes being numbered and not aligned with one another. I am getting ready for bed, but will tackle this particular issue tomorrow. I also plan to locate and add some fonts that I like, though I don’t expect any issue with that. Still, I would appreciate any suggestions or advice on the code or even just the checkbox issue! Here is the link to my codepen:

https://codepen.io/TheTechLead/pen/LYRdLbM?editors=1100

Your checkboxes are numbered because you have wrapped them up as ol list items. You will have to get rid of ol and li tags to get rid of the numbers.

1 Like

I was kinda hoping I’d find a way to keep them as list items and somehow edit out the bullets and numbers, but I see the example form shows a different method altogether. I’m just being lazy!

If you want them in a column. You will have to use flex

1 Like

Radio button and check box groupings should really use <fieldset> and <legend> in order to be accessible, not lists.

2 Likes

@HideoKO, in addition to bbsmooth’s input some other things in your form that you can revisit;

  • User’s shouldn’t have to erase text in the textarea in order to put in their own
  • Change the cursor to a pointer when hovering over the submit button
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on large and smaller screens. Hint: Take a look at your .colorOverlay selector.
1 Like

Thank you. Yes, accessibility was not studied yet, but I have a whole page of semantics I’m in the midst of studying. I was returning to this after many months away and strictly went by user stories. I also mistook using “plain CSS” as not using flex or grid, but I’m glad to apply some of that where I can. I was getting itchy listening to lectures and just wanted to get back into practicing. Thanks for the input.

I really like the suggestions and sincerely appreciate the constructive feedback.