Need Feedback on Survey Form

Code Feedback
1

Hi, I completed another of my HTML & CSS project and need some feedback
https://codepen.io/kalium123/pen/qBNMEOq (UPDATED)

1 Like
2

Hi @dreamo123. Your form looks good.
Some suggestions:

  • Add a placeholder for the textarea.
  • Make the textarea more big vertically.
  • Add a little bit margin between the input fields.
  • Change the color of the top h1 to black so that it has more contrast.
  • Disable horizontal resizing for the textarea by adding resize: horizontal to the textarea.
  • There are some small errors in your HTML & CSS code. Find it by clicking the down arrow and then ā€œAnalyzeā€.
  • Add a hover animation for the submit button.
  • Change the mouse to pointer when hovering over the submit button by adding cursor: pointer; .

Anyway, good job as a beginner project. Impressive!

1 Like
3

Thank you. I will work on the things you mentioned.

1 Like
4

Looks good to me though the font could me more larger and the spacing should be minimised.

1 Like
5

Your form looks good @dreamo123. Some things to revisit;

  • Userā€™s are not seeing your page the way you want them to. Most wonā€™t have ā€˜Poppinsā€™ loaded on their computer and you neither link to it (head element in HTML) or import it (CSS).
  • Thereā€™s a typo on line 37 in your CSS;
    font-family: Poppins, sans-serif, ;

thereā€™s an extra comma

1 Like
6

Hey, just thought Iā€™d chime in with a few accessibility issues:

  • The keyboard focus indicator is so faint as to basically be non-existent. When you use the Tab key to go through the inputs you should be able to clearly see where the focus is. Use the CSS outline property to make the focus indicator clear on all inputs/buttons.
  • Youā€™ll definitely want a <label> on your textarea. Iā€™m guessing just change the Comments <h2> to <label>.
  • You donā€™t want to use <label> for text above the radio button and check box groupings. Instead, use a fieldset/legend combo:

  • When I increase the text size the ā€œSUBMITā€ on the button breaks out of its container. The way to fix this is to use em units for width/height instead of px, which will allow the button to grow as the text size increases.

  • Technically, your main content should be wrapped in a <main>. So I would suggest you change the #form-details <div> to <main>.

7

Thanks Roma. I corrected the comma and changed Poppins to Arial.