Survey form - I've made it responsive

Project Feedback
#1

Any feedback appreciated.
https://codepen.io/terrifricker/full/dyoOzWV

#2

Your form looks good @terrifricker. Just a couple of things to revisit;

  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS
  • You may have the ‘Palatino Linotype’ font loaded on your machine. I do not so I see your default. You should either link or import your font so others can see your form the way you’ve styled it.
  • All of your styling should be external. Don’t use in-line. That being said, you have some errors. Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since you’re copying from codepen you can ignore first three that it gives.
2 Likes
#3

Thank you so much. I was hoping that you would look at it, Roma. Your replies are always so detailed. I really appreciate it!

1 Like
#4

You have a lot of semantic HTML, that is nice to see.

  1. I’d remove the repeat of the background image and set it to cover.
background-repeat: no-repeat;
background-size: cover;

  1. Add some vertical space between the first three inputs.

  2. I don’t think using a question mark as the placeholder for the number input is a good idea.

  3. Increase the size of the select elements (width and padding). I would prefer having them below the label as well.

  4. Add resize: vertical to the textarea to avoid the user being able to pull its width outside of the form.

  5. Give the submit button some padding.

Good job, keep it up!

2 Likes
#5