Survey form feedback please!

Code Feedback
1

I don’t usually ask for feedback, but I decided that I need to start, so here goes. Please be ruthless!

Check it out at GitHub or on CodePen:

2 Likes
2

I like your design, it’s cool!

I would change cursor on button mouse hover.
Also consider changing the border color of your inputboxes on focus to match your theme color rather than default blue.

1 Like
3

i really liked it… specially the usage of JavaScript…
consider changing the background to some light color, so that your text will be more visible.

1 Like
4

@shimphillip Thanks for the suggestions. Changing the cursor to pointer over the submit button is a good idea, and I’ve done that.

The blue rings you get when the inputs are focused are not borders. It’s actually an outline which chrome automatically applies to input elements when they’re focused. If you add this css rule:

input:focus {
  outline: none;
}

You’ll find that the rings are gone from the <input> elements (though they remain on the <select> and <textarea>).

I don’t love the blue outline, but I haven’t removed it because I think those focus rings are considered important for accessibility? Perhaps someone with good knowledge of accessibility can chime in? I’d like to know. Thanks!

EDIT I did a little googling and found an article that covers the accessibility concerns here. It’s a bit old but I think the points are probably still valid.

5

@MdAmeenuddin Thanks for the suggestions. I was a little worried about text visibility. I’m usually a light background kind of guy, but I decided to use a dark background for this project, so I don’t think I’ll change that. But I may fiddle with the colors slightly to try to produce a better contrast.

1 Like