Project2: Survey Form

I Built This
1

Hi, Please take a look at my project Survey Form. I would highly appreciate any feedback/suggestions. Thank you.

2

Button width of 20% is not good choice. Try controlling button width with padding only. Also good idea to add resize: vertical; to the textarea

1 Like
3

@snigo Thank you very much for your suggestions :slightly_smiling_face: I didn’t know about the resize thing. I have included that now. Also for button width, I removed the percentage and added px.

4

I don’t think the colors you chose go together. For desktop view I think you should make the width of the form smaller so that it’s easier to read. I also think you should make the dropdown bar the same size as the previous text forms so that it flows better visually.

5

Thank you for all the suggestions :+1:

6
  1. Add box-sizing: border-box to a universal selector at the top of the CSS. It will make sizing elements more predictable and make the select element the same width as the other inputs.
* {
  box-sizing: border-box;
}
  1. Instead of using a percentage margin for the width of the form, I’d suggest using an auto margin and a max-width.
.container {
  margin: auto;
  max-width: 680px;
  background: yellowgreen;
  border-radius: 10px;
  padding: 20px;
}

  1. Because you have grouped the textarea with the other inputs in the selector you are setting the height of the textarea to 20px. That is not enough height for a textarea element. I’d probably suggest not setting a height at all on the input elements and use padding and the natural size of the text (font-size, line-height) to control the size of the inputs. You can set a height on the select element, but using padding would work just as well.

  2. Instead of using <br> elements to have inline elements each on a new line, use or set container elements to be block-level elements so they each take up the full with. For example setting the label element to display: block would let you not have to use the <br> element. This is much more maintainable than using a bunch of br elements.

  3. Add cursor: pointer to the submit button.

1 Like
7

@lasjorg Thank you for the detailed review on the project and also the suggestions you have made. I definitely try to apply these rules :blush: