Review requested for my first ever survey form!

Code Feedback
1

I’ve been ignoring things (oh so many things) I should be doing so I can play with my survey form and now I think I’ve done enough! Please take a look and share your thoughts! https://codepen.io/hbar1st/full/YvZzGx/

2

This was fun! It made me wish I was on the outing with you. Love the bus :grinning:

1 Like
3

This looks awesome! It has this feeling that I am filling out the form on a legit paper. I liked the design on your input boxes too. Although the comment box is a little small for mobile.

All in all it looks really cool!

1 Like
4

Looks cool, it reminded me IE6 for a second, very good. I like the retro like designs if everything else goes great.

Dat bus is very good!

Let’s start with good parts

  • Nice colour scheme(my opinion), great colour for text to bring good contrast with background, very good.
  • Placeholder for text fields, very good.
  • Both comboboxes come with a non selectable option as “Select an option” but you forgot to mark is as selected for first combobox, please fix.
  • Radio button and checkboxes have correct associated label, except “Location of hotel” checkbox, fix it.
  • Good spacing! very handy for mobile view, but for desktop it looks it’s a little too much.

And some issues
(my opinion) In desktop view, I think the layout for radio buttons are not very common, the way checkboxes go are more common(each element in one row/line).

You also prefered a hard way (floating radio at left) instead of simply place the text for label at the right! floats could break the layout as it did about your work, check:
image
Text and radio element are not started from same baseline, because of float! use the form you used for checkboxes, radio element first, then associated text.
again, this could be better maybe you place the Maybe radio after the Definitely!

The layout for mobile is not well! I think becasue of some small issues and mistakes of CSS rules, you wasted too much space, check:

image
image567×875 30 KB

Well I would like to see text fields, radio buttons, combobox, textarea and almost all elements go to fit with parent are just like text in mobile view. please fix.

Some other weird stuffs which is kind of counter-hack I would call them is applying negative margin values instead of reducing parent padding value.
Example: by default, browser specify some padding space for ul and ol (it’s usually 1em). So you just tend to apply negative margin/padding(worse the absolute pos pointing using left, right,…) for child li elements, instead of override the ul/ol padding value. check following css rule in your page:

  • .radio, .checkbox {
  • position: relative;

  • left: -43px;/*first go -43px, this is mostly to use applied padding by parent ul, not good*/

  • margin-left: 10px;/*now add some margin to the left?!*/

  • display: block;

  • padding-bottom: 8px;
  • }
    Instead you simply could remove the space by parent ul, becasue ul was the one placed the space at the left, not the li elements.
.hosted_ul{
padding-left: 0.1em;/*overrides the default left padding value*/
}

The .rightTab css rule could go for 100% of width in mobile view, also 100% width for .input-field(and comboboxes, .dropdown) too. For avoiding the scrolling, you may set box-sizing: border-box; Now it looks better, check:

image
image567×875 38.2 KB

You also set max-width for html and body to min-width: 320px;, please don’t, let the content goes and fit with screen.

this is true the input text fields are good large to tap on them easily, but they come with zero spacing with each other, adding some small spacing between them could be great.

Suggestions:
Horizontal line between each section of form makes it more clear and easier to scan the form by user. example add horizontal line after and before radio button groups, it really helps.

I suggest you go for same styling for text field and combobox. comboboxes are in plain default shape, while text fields come with different style I think sync the style between them could make it better.

I suggest you may not override the global(body) default font-size, especially by absolute pixel values. Let the default font-size is suse,d and for section you like bring larger or smaller text, you may override the font-size by em unit

The shadow for the submit button is a little too much I think( my opinion)

FInally this is great to have a sample, basic and template layout which works for all screens, then adding content to them.
Every single content and change you make, this is recommended see the result to fix the issue before it affects other stuffs.

Keep goin on great work, happy programming.

1 Like
5

Thanks for reviewing! And your kind comments!

6

Thanks very much for reviewing! I admit I was a bit lazy to fix things for mobile (it’s my first foray into responsive design and I attempted to make some changes but not too many). On my iphone the page shows up pretty centered (wasn’t at the beginning) but I wasn’t sure if the layout could be fixed beyond that (would have to play with it to see if it can really fit better in some cases on one line or not) I was thinking of embracing the one line per label and one line per field idea (just make the field space bigger and indent the field so it lies under the label nicer).
Thanks for all the tips and careful review, I look forward to using the strategy you suggested as well on my next project.

7

I was hoping to get some clarification on this comment. By “too much” do you mean that there is too much empty space on desktop view? (like in the margins of the form?)

8

It’s not critical too much, for mobile spacing between elements look good enough, for desktop, spacing between elements(example radio buttons) is a little too much, you may apply less element spacing. Same about for margin. For mobile I suggest you remove the form border let the form fit with parent for grabbing more space.

Spacing is needed, but not so wide, and not so narrow. just great.

keep goin on greta work, happy programming.

1 Like
9

Thanks v. much @NULL_dev . I’ve fixed pretty much everything you suggested for the desktop view. (except the max-width which I tried but didn’t like the effect. Prefer the ‘a4’ sizing look of paper for this page). I’m working on the mobile view, just working out how to make the fields longer…

ps. I’m not sure that I have any specific idea on how to sync the styles of the fields with the radio/checkboxes. I know I could spend time modify the default radio/checkbox design but not really sure I have any good ideas at the moment on what they should look like. Let me know if you had anything specific in mind.

10

Setting max-width for the body(top level container) won’t affect your a4 size as you mentioned. You may altered wrong tag, make sure it affects body only.

keep goin on great work, happy programming.

1 Like