Build a Survey Form project

your feedback will help me to improve my design and skills! thank you

Hi Akram,

Very nice looking form! I think there are a few improvements than can be done, but in overall it looks professional and appealing, so really good work!

What I liked:

  • The color palette looks very professional. You often see forms that are poorly designed, and that might make the user less keen about answering them. This is not the case here :slight_smile: I like the coloring.
  • You added a slider! (first time I’m seeing one in a project, so good for you!)
  • You added “required” red markings to make it clearer for the user. Nice addition!

What I think could improve:

  • Checkboxes usually appear on the right side of the label, similar to the way you styled your radio buttons (first the check box on the left, and then the label on the right).
  • It’s hard to tell which label belongs to which text field. For example, the “email address” label is right at the bottom of the full name text field (and relatively far from the "email address text field). I would add spacing above “Email Address” label, to make it clearer that the text field is below (you can resolve it in many different ways - this is just a suggestion for one option).
  • Center alignment vs Left alignment: I think when a user is asked to fill a long form, it’s best to make the text as easy to read as possible, and I think aligning the text to the left would make it easier to read.
  • I would make the “submit” button bigger and add color, to make it a call to action (and prompt the user to click it).

I hope this helps. Enjoy your coding! :slight_smile:

1 Like

Looks very good, really good.

For desktop it’s really great, but for mobile?! NO, even tablet looks a little mess.

The fix is very easy, you applied width:50% for container class, so it means if screen is 320 point, go for 160 point which is really small! check:

The fix is very easy, I suggest change your container to following and have a try

.container {
    text-align: left;
    /*margin: 10px auto;*//*no need for margine*/
    /* width: 50%; */
    width: 100%;
    max-width: 8.3in;/*when screen goes big, so no more than this, 8.3 because 8.0 is so mainstream :D*/

You used placeholder for text fields, very good, same no any default value for combobox, very good.

I suggest you place the submit button center.

The slider looks good, but for mobile, the button to slide should be a little bigger

Checkbox and radio buttons have no any associated label linked, this is very bad! fix it.
Same add some more space(margin) between radio and checkboxes(or generally any input element) for mobile view.

This is better, all text fields and combobox come with same size, also add a little more padding for text fields and combobox, and textarea.

Also try to use relative units when possible(almost possible for many cases) over absoloute units.

keep going on good work, happy programming

1 Like

Wow thank you so much I really appreciate it :smile:! I have fixed the design as much as possible

  • I fixed the check boxes thing.

  • I added borders to specify which label belongs to which.

  • You are right! left was much better.

  • I styled the Submit button.

Thank you so much for your valuable notes! I been trying to fix the screen thing for mobiles I hope it better now!

I linked Labels with check boxes and radio buttons
I actually hate working with Css >_> lol I do prefer working with JavaScript

Good progress, you got just one issue!

See what happens when you try to control a text field using classic size attribute in mobile form

Image tells, please use CSS, over retro size attribute. Same about cols for textarea. (you set absolute constant values for the textarea in your form, please don’t, please, at-least the width could work better for relative values)

I suggest you may apply same width for all textfields and combo boxes, this is better to have the same size for all.

I also liked the test range input in footer for testing named foo! nice.

Keep going on good work, happy programming

1 Like

yay thank you I just removed the size from input and used CSS [I HATE CSS xD]

As for the range test in the footer i was testing to make A range control with hash marks and labels as it is explained here input type range but did not work out