Survey-form fedback

Hello! I finished my first HTML/CSS project. I was looking for feedback on my survey project.

Welcome to the forums @SerGo3577. Your form looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
  • On the form it says the age is an option yet the user is required to fill it in. This would be a bad UX.
  • If you’ve ever filled an on-line form you notice that the required fields have an asterisk. Your form has an asterisk for “Choose you role”(sic) yet that field is not required. This is a misleading UX.

On a side note, placeholder text should not mirror the label. It should show the user the format they are expected to use.

Welcome @SerGo3577 to the forum. Your project is good and amazing.

Here are my feedback and my suggestions:

So this white space is existing because your #form-div 's height is 1050px.
All you need to fix that is to delete this specific height and add padding. When you add contents to your #form-div, the height is changes automatically. And don’t forget to add margin-bottom to have a good layout. And you don’t need to set margin to #recomendation-div

#form-div {
padding-bottom: 1rem;
margin-bottom: 2rem;
#recomendation-div {
    margin-bottom: 0;

The final layout will be:

  • Your button is not looking good because of the border.
    Screen Shot 2021-08-04 at 11.51.25 AM
    All you need to do is delete this default style by:
button {
  border: none;

After you add this to the button the final layout will be:
Screen Shot 2021-08-04 at 11.53.37 AM

Do you see the difference?

  • You can also delete the default border style of textarea and add some padding:
textarea {
border: none;
padding: 1rem;

See the final layout:
Screen Shot 2021-08-04 at 11.57.27 AM

Thanks for your feedback but i don’t understand how fix responsive, because if look from Chrome it’s look like normal but from Firefox it’s doesn’t look good on the same sreen size

unset the height of #form-div then your surevy page become fully responsive

I did it, but nothing has changed

I can see the changes(mobile responsive). Good

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.