Survey Form Feedback!

Hey Guys,

It took me so long but I am happy I am done with my survey form and the way it looks. :slight_smile:

On my phone and laptop everything is okay but someone on twitter said tehre is a problem with submit button.

Can you guys ahve a look?

Thank you.

1 Like


It may look good on mobile but on large screen the text is too big! I don’t recommend using viewwidth as a unit for font size since it makes the font look disproportionately big. Something like 1rem or .75 rem looks fine to me. I would like to see a placeholder text for the ‘How often do you use delivery service’ dropdown. The ‘How you rate our service’ section should not have a default value of excellent. Also, the submit button is too large as well and grows beyond the screen. On large display, the form would not need to span the entire width. I would make the necessary adjustments to make a more responsive layout. Happy coding!

1 Like

Thank you very much for the suggestion, you are right, it will look better. I will check that. :slight_smile:

Amazing job!

Just a little bit responsive layout fixes and it will be great. Viewed on Google pixel 2 mobile on chrome

  1. Text area overlaps with the field set container
  2. Text in dropdown is cut in half. I can’t see all the text.
  3. Submit button is sticked at the bottom might be better if there’s a space below.
  4. Submit button text is small (hard to read)

After solving these you’re good!

And these are suggestions (disclaimer: I just read from ux blogs and look up concepts/examples at famous ux sites like Google or Mozilla) - you can make it for the future or not

  1. Might be better if there’s difference with checkbox and radio 's shapes (they’re all same shapes so in my user experience, I thought they are all checkboxes)

  2. The :heavy_check_mark:️ check icon on checkbox can be more noticeable by making it bigger

  3. You can put different color (maybe red or yellow) for the asterisk * in the required fields so it’s more noticeable that it is required. Also you can put * fields are required notice

  4. Vertically center the checkbox/radio and label beside it. (this can be easily achieved by flexbox I suggest also to study it. It avoids element overlaps in the container. Like the bug 1 and 2 above)

Heres a good resource for flexbox

Happy coding!! I wish you the best :slight_smile:

1 Like

Hey Jonathan,

Thank you very much. I changed the 1) Text area, 2) Text in drop down 3,4)submit button

Change the radio buttons . :smiley: But I somehow can’t change the :heavy_check_mark:️ when i increase it’s size. Why? Itried to use scale and also tried to change width, height. Can you please suggest me how I can do that if you know? Otherwse, I will check it on google.

Yes, I have started his course couple of days ago actually, but to be honest if you look at mycodepens, I like grid so I just use that. But I know I have to learn flexbox. properly!

@doubleUTF I tried to change what you suggested but I like the big texts. As this is not for a client, I will leave this for now. I changed the submit button too, is it better now?

@alexandriaroberts Yes it looks better now.

1 Like

Yeah it’s great now! Since you used content: “:heavy_check_mark:️” , I’m sure it’s a text so I think increasing the font size will make the check bigger. But overall amazing job, keep coding, and never give up :+1:

Now that you’ve mentioned, I saw your pen and it’s an amazing use of grid! It is like the examples of layout land

1 Like

Thank you very much sorry for slow response I always take Saturdays off. I tried doing taht it did’t work, but maybe I will give it a few days and go back to it again. It mst be something I am missing.

Thank you very much, I love Grid very much. So, tahnk you. Yes, I am big fan of Jen Simmons work! :slight_smile:

Thank you very much @doubleUTF It helped.

The form looks cool :+1: Nice work. But you can make it better by not repeating the backgroud images. The text fields don’t completely occupy the box and it makes it look kinda weird.

Evenly spacing out the radio buttons and checkbox in the box space will help too.
The ‘Submit the Survey’ button is not viewed properly so you can work on it.

Overall, the design is great!

1 Like