Survey Form feedback (no theme)

Code Feedback
1

Hello all! I would love some feedback on my survey form. This didn’t take me as long as the tribute page (excited about that!) and I feel it looks better in smaller screen sizes - but it is responsive. It also doesn’t have a subject, just placeholder information.

https://codepen.io/zaenaria/full/EBVNdv

Thanks in advance!

1 Like
2

It looks good @nekochan34. I like your color choices. Few things to possibly revisit;

  • since it’s so small move it up a little so it doesn’t require the scrollbar. You have enough real estate to make your form fit fully on the page
  • don’t use the <br> element. Use margin and/or padding in CSS instead.
  • your labels aren’t closed correctly…(should be </label>)
  • add labels to your radio buttons and checkboxes so users can click on the label name to make their choices
  • change the cursor to a pointer when hovering over the Submit button
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link (A missing attribute in HTML)
1 Like
3

i’m doing these projects as well!!!
Can you explain why you have a <label> within a <label> within a <label> within a <label> within a <label> within a <form> ???

image
image1366×768 107 KB

(sorry guys, i don’t know how to upload it differently)

4

The label tags aren’t closed correctly if you look at the source code.

5

@nekochan34 Nice page! I love the background. You made the form look visually interesting, more than most of the other ones I have seen, including my own.

I recommend formatting the fields, checkboxes, and radio buttons better.

6

thnx! looked up the codepen source code. and you’re right. what i “scrn shotted” was after the browser interpreted the code (or so my hubby told me 5 mins ago)

I see now indeed that the Liz didn’t close her <label> tags

1 Like
7

Thanks for the feedback everyone! Glad I found out about the label tags - that’s definitely a blonde moment there…:laughing:

1 Like
8

Wow! nice job doing the survey form!

9

It’s not every day you see a survey form with some personality, I like it.

  1. I would like to see the textarea have a bit more height by default, and have the submit button centered.

  2. As said, add labels for the checkbox and radio inputs.

  3. I’d prefer the use of containers and margin, to all the <br> tags.

  4. Adding a tiny bit of text shadow to the Survey header would help it stand out from the background.

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

2 Likes
10

Thanks for the text-shadow trick! Not sure why I didn’t know that but it really makes the text pop - especially since I didn’t want anything other than white for the title :smiley: