My Survey Form--Need Feedback

Code Feedback
1

Hello there,

I just completed my survey form and would like to know what you think and open for any suggestions.
here is my survey form check it out: https://codepen.io/Kodingpowers/pen/PowRozg

Thanks :slight_smile:

1 Like
2

Hello!

There are a couple of things to improve:

  1. The most important thing to improve is responsive design. I tested your site on Firefox and Edge, and it is not responsive :frowning:.
  2. On the inputs and textareas you could use the placeholder attribute instead of value for the initial text, that way, when a user clicks (focus) on the element she will be able to write text right away instead of having to delete the existing one:
<label>Name: <input type="text" placeholder="Write your name" /></label>
  1. I’m not much of a designer, my critique is purely cosmetic: I like it :grimacing:.

Hope it helps you improve :slight_smile:,

Regards!

1 Like
3

Thank you for the feedback. I fixed #2 but still figuring #1 out.

1 Like
4

Hi @Kesinee, your form looks good. Some things to revisit;

  • Try to not use the <br> tag so much. Instead, use margin and/or padding in CSS

  • Change the cursor to a pointer when hovering over the Submit button

  • It’s a nit but, try picking a realistic age range

  • You have fields, radio buttons and checkboxes, that you have pre-checked. Let users check them themselves, don’t do it for them

  • You have something like this required="firstname" multiple times in your code. They are all bad values for that attribute.

    • You have a couple of instances where the attribute is require. That is an invalid attribute.

  • It seems you just threw this line into your code, <meta name="viewport" content="width=device-width, initial-scale=1.0"> This would normally go between the <head> </head> tags. Since codepen doesn’t require you to use those tags, you would include this line by clicking on Settings and then putting it into the ‘Stuff for <head>’ box

  • So codepen’s validator is okay but there are some short comings. To see all the errors in your HTML (those that I mentioned and more) you can copy your HTML code and paste it into a W3C validator. Click on the ‘Validate by Direct Input’ tab and paste it there. It will show you your errors and give a brief explanation of why

  • As mentioned, make your page responsive.

1 Like
5

Thank you so much! I really appreciate it.

6

Awesome keep going :+1:

2 Likes