Hey Guys,
It took me so long but I am happy I am done with my survey form and the way it looks. 
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
Hi,
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. 
Amazing job!
Just a little bit responsive layout fixes and it will be great. Viewed on Google pixel 2 mobile on chrome
- Text area overlaps with the field set container
- Text in dropdown is cut in half. I canât see all the text.
- Submit button is sticked at the bottom might be better if thereâs a space below.
- 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
-
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)
-
The
ď¸ check icon on checkbox can be more noticeable by making it bigger -
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
-
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 http://flexbox.io
Happy coding!! I wish you the best
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 . 
But I somehow canât change the ď¸ 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?
Yeah itâs great now! Since you used content: âď¸â , 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 
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!
Thank you very much @doubleUTF It helped.
The form looks cool 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