Looking Feedback - Survey Form

Hi,
Would like to have some feedback on my second project submission on freecodecamp - the survey form challenge. I made a hotel stay feedback form. here’s the URL,
https://itsjustmygit.github.io/fcc_SurveyForm_Repo/
and also codepen,
https://codepen.io/itsjust_me79/pen/gOLmoVE
Thanks in advance.

2 Likes

HI @ItsjustMe !

I think your form looks really good.
Congrats!

Have fun with the landing page.

P.S. I love your username :grin:

1 Like

thank you for your reply. :slightly_smiling_face: :relaxed:
:sweat_smile:

1 Like

Overall this is very nice. I’m going to point out a few things to consider.

  • I like that you have customized the focus indicator on the four inputs at the top. A lot of people just rely on the browser’s defaults which in my opinion are never good enough. Now I think you need to do the same for the radio button/check boxes. If you want them to look nice around those inputs consider using box-shadow.
  • The focus indicators on the textarea and the two buttons also need help.
  • Your <label>s are all good but you are missing them for the select and texarea.
  • You’ll want to wrap all of the content that isn’t in the header in a <main>.
  • Whenever you need to set any type of height/width on an element that contains text you should probably use em units (instead of px) so that the element can grow as the text size grows. Right now you have the container div set to a max width of 540px, which looks fine at the default text size. But as I manually increase the text size it starts to get cramped real fast. If instead you set the max-width to something like 30em then the width can grow as the text size increases and everything still looks good. The key here is to remember that the user has the ability to increase the text size on your page and your job as a developer is to make sure it can handle a text size increase of at least 200% gracefully.

FYI, if you are unfamiliar with how to increase the text size on a page, search for ‘zoom text only [your browser]’ and you’ll get back plenty of links on how to do it. I highly recommend you always test your page with a text size increase of at least 200% at both narrow and wider view ports.

Your form looks good @ItsjustMe. Something to revisit;
The placeholder text should not mirror the label. It should show the user the format of the expected input. You can get rid of “enter your full name” and “enter your email”, etc and definitely get rid of “e.g.”

Thank you for your valuable reply. :slightly_smiling_face:
I’ll definitely consider your suggestions and try to improve my code. And yes, I’m not familiar with the practice increasing text size. Is it similar to the feature what you can do on smaller display devices called “pinch-to-zoom” or “double-tap-to-zoom” while viewing a desktop version of a site? I’ll also look into it as well.

Thanks for the reply.:slightly_smiling_face:
I’ll correct those mistakes before moving onto the next project.

Not quite, those would be the same as the default “page zoom” that most browsers use by default. Using “page zoom” means everything on the page gets bigger (such as text and images).

Text only zoom only increases the size of the text (basically anything that can have a font-size on your page). Using Firefox on my phone I can go into the settings and adjust the text scaling by increasing the percentage. This will only increase the size of the text for web pages.