Who would love to review my Survey Form

Who would love to review my Survey Form
0

#1

Its about the world cup. I know it started a few hours ago but I still want you guys to review it.
It was really tiring but I finished it finally.
I hate forms:angry::angry:
hahaha
Thanks in advance:sweat_smile::sweat_smile::sweat_smile:


#2

I would review :+1: , proudly.

The work is great and working, well done. I think you did it well, but could be better with some small changes you could do them very easy, let’s check.

Good stuffs:
layout is great, it’s working, very good.works well for mobile and desktop very good.
You specified placeholders for text fields, very good, but forgot to specify for the textarea, please fix.
Using relative percent unit to control font size, and also not overriding the global font-size. AWESOME< really great :+1::+1:
Almost using relative units over absolute units, you mah dude! great, give me five :raised_hand_with_fingers_splayed: , well done. :ok_hand:
To be honest, one of the greatest layout I’ve seen of many page layout submitted by people. really good.

And now issues (so simple to fix, I know)
The one very weirdest one is the style override for all input tags,
line 44 in your css as following

label, input, select, textarea{
  display:inline-block;
    width:40%;
  height:15%;
}

Try not to control the height this way, let browser calculate it based on internal content(such as font-size, padd, etc…)
This width and height will affect radio and checkboxes too which is not appreciate, but as you applied dedicated css for radio and checkboxes as following

.rad input {
    width: 2%;
}

This is not very logical! first becasue the radio button is almost hidden, check:


same story about the checkbox.
TIP: input[type=text] css class will apply rule to input comes with type of text, not all inputs.
You may not override all input tag, and instead have a class like .text_input and use it for all text field inputs.

For tablet and mobile(especially tablet) the spacing between elements look a little too much, check:


This is better use more relevant unit like em over percent for padding and margin.
I also realized you applied margin for all div tags, please don’t.
Applying some internal padding for text fields could be great.
Check now:

For input text fields, you may set font-size:1em to grab global font size(recommended).

Also use box-sizing: border-box; to tell browser to no calculate padding and margin values with width(for select and input tags for example).

Radio buttons and checkbox buttons come without any label associated to them(but text field inputs do), please fix.

And suggestions:
I think the background image is a little too much colourful! I think something else is better. don’t know how to explain, but it makes the form not very readable a little.

Make the submit form a little bigger.

Very good, go for fixes for now please, and I hope see great progress for next update.

Keep goin on great work, happy programming.