Feedback please - Survey Form

Code Feedback
1

Good afternoon, from my part of the world.

I’m hoping for some feedback on my survey form project.
It all seems functional but I’d love other opinions.

I’m also quite interested in feedback of the code. Is the layout ok etc. I’m sure I’ve done some things that probably don’t fit best practice so any suggestions on how it can be cleaned up would be much appreciated.

4 Likes
2

IDs should be unique within a page, but you’ve used the same ID “checkbox1” for all your checkboxes. You should use unique IDs for each element.

3 Likes
3

Thanks for pointing that out. Seems so obvious now that I know.

3 Likes
4

Hello @jeff_beynon
First, amazing job :slight_smile:
The UI looks really professional and stylish.

I have two piece of feedback.

  • Some labels are not connected with the relative form fields. you can see that if a user clicks on the text Email: the relative input does not focused. The reason is because the for="Email" in the label does not match the id="email" in the input element (the match it is case-sensitive).
  • To have a more readable code I would remove the long CSS selector:
    input[type=text] ,select ,input[type=email] ,input[type=number]
    And have instead a class to share between the elements you want to style in the same way

Hope you find them useful and let me know if I was not clear in something.

Happy coding and keep up with the great work :penguin:

4 Likes
5

That’s great feedback. I’ll take a look at it and try and make the CSS more concise. Didn’t know about the case sensitivity either. Thanks for the help.

3 Likes
6

Hi there,

Title and subtitle are partly unreadable on the busy background.
This can get you into trouble with accessibility requirements in professional projects.

Solution would be to put them either in their own box or in the survey box.
The text needs to be high contrast for the same reasons.

Here a great bookmark, you need to be familiar with this as a web developer, best start adopting this as early as possible:

1 Like
7

Very useful feedback. Thanks for that. I’ll try to start implementing these rules in future projects.

1 Like
8

Hey, Its cool!
Do you really like Batman so much that he is the only checkbox option:
Screenshot 2023-10-24 143524.
Sincerely, Spider man!

3 Likes
9

Yep, that’s the idea!

10

@DanielHuebschmann I’ve just taken a brief look at some of those web standards. Is that the kind of thing you need to memorize? Does it just come with practice? Seems like a lot of information to know.

11

Sorry for the late reply!

No, nobody is able to to that.

Key accessibility to remember:

  • Enough contrast for all texts

  • Alt-texts for images and videos

  • Easy to find CTAs like buttons

  • Allow the user access to keyboard navigation

  • Using semantic HTML for screen readers, like section instead of just div

These points will already make your site/ app more accessible for most.

Our accessibility experts can add to the list of course.

1 Like
12

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