Survey Form - Feedback needed

Code Feedback
1

https://codepen.io/philip-song/pen/zYGpzyr

Hi guys, just finished my survey form and I was wondering if you could give me some suggestions to improve the project.

Thanks :slight_smile:
~ Phil

2

let’s check it out! I will leave you a feedback after that

1 Like
3

Hi there phildabeast,
Your page looks good from the top level.
Looks like the tests reveal some issues to look into though.
A few simple suggestions:
What are the numbers that auto show when you click inside the number field for.
The text field could remove the default text in there when you enter in any info.
Check your fields for their proper fit inside things. Something is outside its bounds.
The checkboxes could be a bit larger for ease of use.
Don’t worry about scrolling off screen just to squeeze it in.
You could tighten up on the margins if you had to.
Good start, keep at it.

1 Like
4

Thanks for the feedback ill improve it some more

5

I like how you used the picture as the background! I might consider using a different color font for your title – or maybe a darker version of the color you have? I’m not sure it’s high enough contrast with the photo.

1 Like
6

Your presentation looks very nice, now we need to work on the accessibility a little:

  • You have label tags but they aren’t set up correctly. Every label tag should have a ‘for’ attribute which points to the id of the input element it is associated with.
  • The header at the top does not have enough color contrast. You can check your contrast ratio at:
    https://webaim.org/resources/contrastchecker/
  • Do not set height on the inputs/buttons in pixels. The height should be able to grow as the user increases the font size.
  • As the font size increases the textarea gets too wide and breaks out of page causing a vertical scroll bar. Set the width in ‘em’ instead of using the ‘cols’ attribute and then make sure that the form wrapping all of the inputs is allowed to expand as the textarea expands (hint: do not set the width on the form in pixels).
  • Any inputs that are required should have some sort of graphical notation as such (eg. an asterisk)
2 Likes
7

Awesome appreciate the feedback

1 Like
8

Welcome to the forums @phildabeast. Your form looks okay. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Don’t use the <br> element to force spaces or line breaks. There are ways to group like sections and then style them in CSS.
  • Users should be able to click on the labels to select, not just the radio button/checkbox.
  • I’d remove the JS from your textarea. You can do what you want with just HTML.
  • Make your submit button look like a button instead of a bar.
1 Like
9

Gotcha thanks for the feedback! Every improvement is a good humbling point keep it coming