FCC: Survey Form Feedback - black/white

Hello… I finished my survey form project last night. But I couldn’t post it because I had exceeded the number of posts for day 1. LOL!
Anyways, seems my “style” is monochromatic…

I didn’t do too much this time. But struggled a bit with display: flex | grid | block for a bit. Nothing too fancy CSS-wise. Not sure how to improve it, to be honest. Or how to use more CSS properties…

Anyways, feedback is welcome! FCC: Survery Form

I kind of like your styling, minimalistic but still has some personality. You do have a few issues to deal with.

  • Narrow your browser as skinny as it will go. I think you’ll see the horizontal scroll bar that appears and problems with overflow regarding the various inputs on the page.
  • You are missing <label>s on the select list and text area (most likely you should just change the <h2>s to <label>s).
  • Nice job using fieldset/legend on the radio buttons/check boxes. They can also be used for other inputs as well. I think that the three personal details inputs at the top should probably be in a fieldset/legend.
  • Placeholder text is intended to give the user an example of what kind of input you want. So the Name placeholder might be something like “Joe Blow”. If you want to make sure the user understands that they should enter their full name then the label should be “Full Name” instead of just “Name”. Likewise, email placeholder should be something like “joe@blow.com”.
  • It seems the only two required inputs are Name and Email. I would add something to make it clear that they are required.
1 Like

Hello! Thank you!

Yeah…kinda forgot about the responsive aspect of the page :woman_facepalming:

Is that like best practice or requirement, that there should be labels whenever there’s a textarea and select list?

Did not think of that. Kinda only wanted to do that for the actual survey part but yeah…that’s a good point.

I typically do that for date inputs… but don’t know why it didn’t occur to me this time. I was pretty much scratching my head, wondering why I’d need the placeholder since I thought the fields were quite self-explanatory. Will keep this in mind.

I can’t believe I keep missing stuff out :confounded:

Thanks for the feedback/pointers. Will improve that later today. Right now I have a report to prepare that the boss wants in 2 hours :tired_face:

All inputs need a valid name to be accessible. <label>s are the most common way of giving them a name. There are some other alternatives, but in this case I think it is easiest to just convert those <h2>s to <labels>.

I like the simplicity of the page! It looks good. Would be nice if some elements were a bit better aligned. For example, the two <fieldset> sections could’ve been the same length. And perhaps you could make your form responsive :smiley:. But other than that, I really like your form!

Wait… when you say accessible, you mean for web accessibility, yes?

Hello @alwinvankuijk! Thank you!

Yeah… I don’t know how I managed to ignore that one major requirement since it is afterall a responsive web design certification course! :woman_facepalming: :sweat_smile:

1 Like

Ahhhh!!! It works now!!
@bbsmooth I fixed my codepen to reflect your feedback. Can’t believe it took me that long! :sweat_smile:

Hey @nikkiczx, it is definitely looking better but you still have responsiveness issues at narrow widths. Narrow your browser as skinny as you can make it and I think you’ll see how the inputs are still overflowing the form. I’m not sure you want a 100px margin on the body when you don’t have a lot of space to begin width.

Oh… I just saw it. I was using the mobile view… didn’t show up there. I wonder why… Anyway, thanks! Now I know what to look for.

The margin should change to 5px for widths less than 400px. Will check on this as well.

Again, much thanks! :bowing_woman:

Edit:
I got it! the max-width: 400px didn’t work because it was bigger than that. I’ve since changed it to 800px. And I managed to align all the boxes too! :partying_face:

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