Survey Form - feedback wanted

Hello everyone,

I finished my survey form project and would love some feedback from you guys.
https://codepen.io/vincentqdo/full/LwLVrK
Thank you so much for checking out my project.

Have an awesome day!!

Hi @VincentQDo,
Your page looks good. A couple of things you may want to revisit;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags).
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • You have the color incorrectly specified when hovering over submit
  • make it so users can click on the labels of the radio buttons & checkboxes too
  • change the cursor to a pointer when hovering over the Submit button
1 Like

Test every label to make sure they work.

Invalid color name #white

Duplicate #comment selector

#email-label` used more than once. IDs should be unique.

Gender is not a label. Male and Female are labels.

Realistic user age range would be nice.

“Best way to contact you:” is not a label. Email, Phone, and Mail are labels

Label for “Which option best describe you:” has the wrong value.

1 Like

I would increase the font size and give the inputs more width. I’d probably also move the social icons to the bottom above the footer and make .footer an actual footer element.

1 Like

@Roma Thank you for your feedback, I changed the button on hover for the submit button, also made the labels for radio and check boxes clickable. Thanks for pointing out the analyze tool.

@tlc35us Thank you for your feedback, good catch on the duplicate selector and id. I changed the age range to 8-125 (I figure people live long and kids use computer young nowadays haha). I also fixed the labels and they are now clickable. Also fixed the values for the things you said. Thanks again.

@lasjorg Thanks for the ideas, I really like the social buttons at the bottom, plus the footer element make the html easier to read.

@VincentQDo
Here are some improvements/suggestions you can do.

  • Add box-sizing to your input fields. So the fields stay in the parent div.
.text-input {
  box-sizing: border-box;
}

survey

  • Add another media query for smaller screens.
@media only screen and (max-width: 450px) {
  .text-input {
    width: 98%;
  }
  #comment {
    width: 90%;
  }
}
  • Use font-family: inherit on the textarea element.
  • Decrease the width of the margin in mobile view of the page outline.
.page-outline {
  margin: 0% .5rem;
}
1 Like

Thank you for your feedback. Adding another query for smaller screens and reduce the outline as you said, made it look much better on the phone.

Really nice job!
I love the colors and the layout a lot!