Redesign my survey form, any feedback ? best practices ? tips for UX

Code Feedback
1

I just finished the survey form project and I’m really excited about it
it’s a mobile-first responsive design and it didn’t take a lot of work to make it responsive
link here

2 Likes
2

I like your page
it `s nice

2 Likes
3

Looks good, nice and responsive.
Only a few very minor things I think would improve it. You could give the textarea some placeholder text and also I think the submit button would look good if you put a hover effect on it so we know when we are hovering over it.

1 Like
4

good point man
done :heart:

5

I think it looks great! love the colors, the layout and the font. I think your code is neat and easy to read. I also noticed some code has some advanced stuff that I haven’t seen yet such as "input[type=“submit]” on the css part. Where is that from? i didn’t know that would work on css. Love the hover on the submit button, I just learned it myself today and added it to my survey form. Great job!

2 Likes
6

It’s the attribute selector

You can simply select any element with an attribute value

element [attribute = value]

Check this out for more advanced selectors

2 Likes
7

Oh I’m really happy, i think the first time someone liked my code and that makes me feel motivated :black_heart:
About the selector it’s really helpful when you want to select somthing based on their attributes for example [type="email"] will select every element that has a type attribute with the email value … It saves me sometimes because I’m too lazy to add a classes for every element :rofl:

1 Like
8

This is nicely done. I’ve got some accessibility issues for you to think about.

  • Both <select>s and the <textarea> need a <label>. This is easy for the textarea, just make the <p> above it a <label>. You’ll want to move the default text for each select into a <label>.
  • The color of the description text at the top is not dark enough to be readable. Use the WebAIM contrast checker to verify that your contrast ratios are accessible.
  • This is very picky but I would lose the "ex: " in the placeholder text. If a screen reader were to read that it would read the “ex” every time which is unnecessary.
  • I don’t think FCC covers this so consider this an added bonus. You can use the autocomplete attribute on a lot of these inputs to make things easier for the user. For example, the first name field would have autocomplete="given-name".
  • If you want the user to know that something is optional then it should be in the label text, not the placeholder text. Most screen readers don’t read the place holder text by default so a blind user will not know that the Address input is optional. If you put “(optional)” in the label text then the screen reader will read it for sure.
  • Personally, I think it is better if you put “required” in the label text for each field that is required instead of using “optional” for those fields that are optional. You’ve only used “optional” once even though there are several fields that are optional, so it is not clear which fields are required. I think most people are used to having required fields marked as required and then assuming anything not marked as required is optional.
1 Like
9

I didn’t really focused on the accessibility more than the design and make it as simple as possible.
I learned something from you but to be honest accessibility is in my list but it’s on bottom because I want to learn how to build something then when I have all the knowledge that I need I will learn how to make it accessible to everyone so … As i told u I didn’t focus on it in this project
Thanks for your opinion I really appreciate it :pray:

10

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