Feedbacks on my first Form
https://myexampleform.gregwoodsfronti.repl.co/
This is my first form, which is from a freecodecamp certified project.
My goal is to make it an order form of a made-up coffee shop/coworker space.
This is a very barebones I know, so I would like some guidelines on how to make it look more like one.
An Example Survey Form
Example survey form
15 Replies
Looks good, I'd recommend to make the Submit button stick out more (different color, add
filter: brightness(200%) on hover, and make it a little bigger probably)
Also might just be me, but the #FFF white on the background color kind of burns my eyesis there any palettes that ui designers use?
Yea there's a lot, look up color palette generator
in addition to Vince's comments, I would try to be more consistent with the spacing.
You can do this experiment: imagine 3 boxes that are 24x24, 16x16, and 8x8 pixels. And then use those as the spacing guides for every element in the form. Things that need to be together are closer, and discrete items are further apart. For example, your title and subtitle are too far apart. while your name / email / 10 out of gud sections are way too close
so name could be 8px from it's field, and they could be 16px away from the email + field group, and the title section and button section could be 24px away from everything, etc
and as long as the spacing is consistent through all the elements then you can also get rid of those seperators you used in the rest of the form
also, you can remove all the redundancy. You don't need to write 'name' above the field, and then put 'enter your name' inside it. You can just delete the field text because people will already know and it will feel a lot less cluttered.
and finally, regarding colors, like Vince, I think the pure white is too bright, and the bg is too saturated
on the left are your original colors, and on the right, are colors i came up with real quick by desaturating your original bg an additional 10% (*modern web dark bg colors are generally very desaturated)
and for the white replacement, you can use that new bg color and add 80-90% light to it.
I should prob use hsl colors instead?
what seperators do you mean ?
i meant those line dividers that you have between the questions
those are part of the
<fieldset> that I use. prob I need to do sth to the padding.
Should I make more css vars for better spacing controls ?if you want to keep them, then i would only recommend adding them between the name / email / random question fields at the top so you are consistent throughout
thank yall the feedback
how do I make the choice go down?
like
[ ] coffee
[ ] chai
Sorry but how do I make the checkboxes go in list form?Add to your fieldset class
order-drinks
Thanks for the reply🥹🥹🥹