Survey Form - would appreciate any feedback

Code Feedback
1

Hi all,

I would really appreciate someone taking my form for a test drive especially looking at responsiveness.

OK - nothing original here. I used the same questionnaire as the example. I did try to stay true to aligning the labels and input elements along the center axis.

This was my first experiment with css grid - woohoo! I’m liking it. Alignment and responsiveness was a breeze.

I opted for all white. I thought the color background in the example looked too much like a Google Form.

I experimented some with sticky header and :invalid pseudo class but decided not to include either in my final.

Thanks for looking.

2

This is really nice work. You made good UI choices in terms of the desktop version vs the mobile version.

1 Like
3

Looks really great, simple, neat and clean. Personally I like this kind of simple form, but some people tend to have some contrast colours to make it no so plain and kind of boring, but it’s an opinion-based stuff, not critical at all.

The good stuffs I think it’s a great job so far

  • Using placeholders for text fields, very great!
  • Good spacing, really good, but a little more spacing for mobile could be better.
  • Great responsive layout, well done!

The issues(so small, easy to fix) so far

  • Both combo boxes have unselectable item as “please select one”, but by default they are not selected, instead the very first elements are selected, please fix.
  • Only first two radio buttons have proper label linked to them, other radio and checkboxes come with no any associated label tag, please fix.
  • Class .formContainer has min-width of 260px (absolute constant value), please don’t(remove min-width, not required). let your great layout go for fit to the screen.

Suggestions:

  • For mobile, please bring more spacing between radio and checkboxes, it’s easier to select a radio/checkbox(or generally any input value) when it’s not so near to another elements.
  • Apply some padding for input text fields and combobox, let them be a little larger (for both desktop and mobile)
  • Add horizontal lines between form sections (example after and before radio button groups), it makes the form more pro and easy to follow sort of
  • Sync the size of combo boxes with input text fields (same advance(width and height))

Fix the issues, and it’s awesome, applying suggestion and masterpiece.

Keep going on great work dude, happy programming.

1 Like
4

@NULL_dev @dylanesque Thanks to both of you for taking time to review my Submit Form. Your kind words are motivating.

@NULL_dev I really appreciate the detail of your review - all good ideas. I think I’ve remedied everything you suggested. I’ll look again to make sure later.

For you’re time I’ll share with both of you my discoveries of the day.

  1. This one you’ve probably seen. Styling elements with a colored border or outline makes it easier to inspect what they really look like on your page.
.inputContainer,
.labelContainer {
outline: solid red 1px;
}
  1. This other, I just noticed. If I comment out above styling it is still available (but unchecked) in the Dev Tools console. I just have to check the box next to that style and it is reinstated.

outline