"The Cheesy Corner" needs Your Feedback! (Survey Form)

Code Feedback
#1

Hi All

Survey Form Feedback would be greatly appreciated!

Here is link to “The Cheesy Corner” Survey Form:

https://codepen.io/agnes-ka/pen/BaWBZRR

Thank You for Your Feedback!
(PS ->If this link is not here or not working - please let me know too…)

#2

Overall this is a very nice form. I’ve got just a few fixes for you.

  • The <label> for the <textarea> is not quite working due to a typo.

  • I can’t see the keyboard focus indicator at all for the <select>, age input, or check boxes. I can barely see them for all the other inputs. I would recommend you customize the focus indicator for all of them.

  • I know it may not seem like it, but technically your submit button does not have enough color contrast between the text and background color. Use the WebAIM Contrast Checker to ensure your contrast ratio is big enough.

  • Don’t use <br> to create vertical breaks and spacing. The use case for <br> is very limited and it definitely is not intended to be used for spacing between divs.

  • If an input field is required then it should be denoted somehow on the form visually as required.

  • This is a picky one, but really the placeholder text should give the user an example of the type of input you want. So for Name you could have “Joe Blow”. I know the test says “I can see placeholder text that gives me a description or instructions for each field” so I’m not knocking you for following the tests. But you almost never want to put instructions in the placeholder text because the text disappears as soon as you start typing and you want people to be able to see the instructions at all times.

2 Likes
#3

Thank you for Your quick and detail feedback!
After another look on my Survey I can see and totally agree with your points.

I will wait a bit in case if someone would like to add extra comment on it :wave::pray: and will attempt to sort my page (and its code) out.

Thank You! :slightly_smiling_face:

#4

Your form looks good @Agnes-Ka. In addition to what was previously noted 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>’. Everything the browser renders belongs in the body element. This is the code that you type into the HTML editor section in codepen. Links to fonts would go in the head element which is outside of the body element.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. In addition to correcting the other errors remember, an id must be unique within the document.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
2 Likes
#5

Thank you for Your Feedback!

I will test and (try to) correct :grinning:

1 Like
#6

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