Feedback for my Survey Form Please

Please take a look at my survey form and give me some feedback if you have the time. I just went with the same freeCodeCamp Survey Form. IMO I am terrible at the design aspect of websites so any help there would be fine, I’d also like to know anything you have to say about the code. Thanks in advance.

Survey Form CodePen

-Ryan

Hello! Good job on your project. I do see a few areas that can be improved.

  1. The height and width of your age input needs to be adjusted. When possible, have the input fields on your forms to have the same height and width. It will look better.

  2. I would reconsider your font colors. You want more contrast between your font colors and the background for better readability. For instance, it’s hard to read your form title. The color of the font is too similar to the bg color.

  3. In the code, I see several unused ids. Only add classes and ids if you need them. Otherwise, you are adding unnecessary code.

Hope that helps. :slight_smile:

Thanks for the feedback!

I changed the width of all of the input elements now to resize responsively, however, the dropdown’s are a different size than the rest even though the value is the same. Do you know the reason for this?

I also changed the font colors of the text for the title as well as the footer to the same color of the background of the form container background. At least you can see the writing a bit better.

As far as the id’s, that could honestly just be because the project requires a few that I don’t really need but I wanted to pass the case. Although, I do need to keep that in mind because I do tend to put ID’s on elements and never use them, lol.

Thanks again for the feedback!

Hi @RyanMaxiemus, it looks good but a couple of things to revisit;

  • make it so the user can click on the labels, not just the little radio button and checkbox
  • change the cursor to a pointer when hovering over the Submit button