This is theSurvey Form of #alonaranjo

Hi there! this is my surver form, please tell me what do you think about it.

Thanks a bunch!

1 Like

Looks very good! I like the image you selected as the background, really good, but not sure if it’s very good for a web page background image.

The great part of your design:

  • Using transparent white colour for the form to bring some contrast for text and better readability, very good.
  • Placeholders for text fields, very good.(you forgot for the text area)
  • text fields have same advances(size), awesome. but the same as combobox.
  • Applied good padding(but using absolute pixel unit) for text fields and combobox, very good.
  • Living linked labels for radio and checkboxes, very good. perfect.
  • No globally font-size override with absolute unit, awesome! (but you did in some section, please use relative values)

Issues(easy to fix):
The white background coloured with no border for text fields, combobox and textarea makes it hard to see/catch the element in the page. (apply a border for input elements, or change their background color) (tip: what color you use for the border, use the same colour for submit background color for more coolness)

Some mess layouting(mess with padding, and margine, and sizes) in you form in some section such as text fields and combobox.
For instance you set 100% width for input fields, and 103 for combobox. I think you were trying to do some hacky stuff to make the combobox with text-fields, but you know it doesn’t work.
the fix is really easy, let the combobox goes for 100% just like text-fields, but still not same width? this is becasue (by default)when you set a width of 100%, this 100% is part of the width, and actual width could be included with padding and margin too. So tell the browser to calculate the width from border with box-sizing: border-box;, so your new rule looks like following:

#survey-form .form-group .input, #survey-form .form-group #dropdown, #survey-form .form-group textarea {
    width: 100%;
    /*..other stuffs..*/
    box-sizing: border-box;

Now you should have all width size for combobox and text-fields, cheers!

Next issue is about the absolute units, I note it’s not really an issue, and more recommendation. but believe me absolute units could break your design/layout. try to replace absolute units like pixel with relative units like em, vw, etc…

Another issue could be about the mobile view, your layout is responsive in heart, but in mobile it got too much margin/padding for both left and right sides, and it means wasting of space in a small screen which is bad!!

You may use @media queries to bring different margin/padding for mobile, or just using relative units to control default and min/max margin/padding values.
Check this I tried and worked(no media queries)

#survey-form {
    background-color: rgba(255, 255, 255, 0.90);
    /* padding: 20px 40px; *//*no pixel please*/
    padding: 2vw;
    /* max-width: 900px; */
    max-width: 8in;/*or 9, or 10, but no pixel*/
    /* width: 60%; */
    width: 100vw;/*by default goes for 100%*/
    -webkit-box-shadow: 0px 0px 20px 0px #000;
    box-shadow: 0px 0px 20px 0px #000;

You also left some white space in your textarea by default. This is becasue you went to next line and then closed the text area tag. So whitespace and newline applied as default value.

The combobox comes with student value by default, this is better you add one non-selectable element like “please select one” as default value, this informs and wants user to check and input current values.

With some media queries and for some element I see you override the font-size using absolute pixel values, again please don’t. if you like enlarge the font-size for some section, use em instead(e.g. 1.3em means 30% bigger than current). (tip: best font-size is not setting font-size)

I think the background white color of form is a little too much transparent, I think more alpha could make it better, I suggest background-color: rgba(255, 255, 255, 0.90);

In mobile view, adding a little more space between radio buttons and checkboxes could be awesome.
tip: add both radio button(input) and associated label with a span, and then apply margin to span to not break the baseline of label and associated input

Making the radio and checkbox select elements(circle and square) bigger for mobile will be awesome, sample:

#survey-form .form-group input[type="radio"], #survey-form .form-group input[type="checkbox"] {
    /* margin-top: 10px; */
    width: 2em;
    height: 2em;
    /* margin-top: 1em; */
    /* margin-bottom: 1em; */
    vertical-align: middle;
    /* padding: 1em; */

Centering the submit button could make the form more nice.

Add horizontal line between each section in your form, for example after and before radio button groups. it will make the form more professional, and easier for user to understand easier which elements are belong to each other.

Keep goin on great work dude, happy programming.

1 Like

Thank you so much for your feedback, I just applied it and now my code is much cleaner and efficient. I learned about the box-sizing and the importance of relative units.

This is a perfect way for learning, coding and getting awesome feedback.


YES, very good progress, it’s more cool now. This could be better also, re check my review again, this could have some more job and be better, for any issue, reply so we can help.

keep going on great work, happy programming