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!!
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;
<body> </body>
tags in HTML. (No need to include the body tags).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.
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.
@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.
.text-input {
box-sizing: border-box;
}
@media only screen and (max-width: 450px) {
.text-input {
width: 98%;
}
#comment {
width: 90%;
}
}
.page-outline {
margin: 0% .5rem;
}
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!