Survey-Form Review & feedback

Code Feedback
1

Hello everyone,

I just completed my survey form project. Your feedback, criticism, and hints on this project are highly appreciated.
https://codepen.io/umaobinna/pen/mdOwmQo

Regards

2

Looking good! Next project…

3

It looks great!!!

  • You need to fix the zip code input. It allows me to add too many numbers. You can set a limit.
  • Some text is showing up too light, like in the “Date of birth” field. I can barely read it. Increase the contrast.
4

Thanks. Already working on the next project.

Regards

5

Your form looks good @umaobinna. Some things you should revisit and correct;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (There’s a selector you reference incorrectly.)
    • (The one for HTML misses things which is why I recommend W3C)
6

brandon_wallace

Thanks for the feedback.

Setting an input limit for zip code will require the use of JavaScript and i haven’t taken out time to learn javaScript.

Regards

7

Thanks for the feedback @Roma. Errors have been addressed, kindly check through.

Regards

8

You need to run the validator in the CSS editor. There’s an error on line 214 in your code. That selector is not valid. There’s no such element as survey-line-column In your code it’s either an id or a class. You need to reference as such. It does affect how your code displays.

On a side note, when you do fix it, what the user sees is a bad UX.

9

Thanks for the feedback. I deleted the html element earlier but forgot to do the same with the CSS .
Kindly check through the survey-line-column have been removed.

Regards

10

That looks better on the desktop.

You don’t have to fix these things but I just thought I’d mention;

  1. Not everyone has a middle name
  2. Postal codes in some countries contain a mix of numbers and letters and even hyphens
  3. Placeholder text should show the user the format they should be using for the input field. It should not mirror the label.

Good job!

11

Thanks for the feedback.

1 Like
12

@umaobinna You can add min, max, and pattern to your HTML for the zip code field.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

13

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