Completed survey form topic, but looking for critique

1

I completed the Survey Form project, but I’m unsatisfied with how the desktop version came out. For one thing, try as I might, I was never really able to properly align labels and inputs in a row in a way that looked appealing.

I also attempted to highlight the labels for the radio and checkmark buttons once they were selected, but that didn’t look good either. This was the code I tried to use for highlighting checked radio buttons / checkboxes.

input:checked ~ label {
	flex: 1;
	background-color: rgba(255, 255, 255, 0.2);
}

I’m looking for critique now on how I can improve both this project and the upcoming ones too.

2

Your form looks good @DrantDumani. I’ll give some comments and suggestions;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are a couple HTML coding errors you should be aware of.

This is me personally, having filled out a form or two on-line I’m used to seeing things like checkboxes (and radio buttons) stacked rather than side-by-side. That being said, are you aware of the CSS column-count property?

1 Like
3

Since this is one of the first projects you have done it is good. But from a design perspective there are several areas you can improve. (But it is fine since this is one of the first projects):

  1. Too much white space between each section. (Either increase width and Height of each input or decrease white space)

  2. No need of placeholder text if you are already using labels. You could also use floating labels (advanced concept for a beginner, but check it out if you are curious as to what you would be able to do in the future)

  3. What genres do you like section can have check boxes side by side (again due to too much white space on right hand side).

  4. Maintain visual hierarchy between label of input and input itself. Either make it bigger or bolder

  5. Submit button is too big. Maintain visual hierarchy in any design.

Again, all of this is fine as you are still beginning, but something to keep in mind for future projects if you want to design good looking web sites / apps

1 Like
4

Thanks for the W3C Validator! I’m going to make sure I use it from now on. One question though. Form tags don’t require actions, right? I removed the action attribute altogether instead of leaving it empty.

I did fix the empty name attribute with one of my input tags though.

5

This was all very helpful advice, thanks! About the placeholder text. The user stories require them, so I can’t remove them for this challenge. I do see what you mean about the redundancy though.

To make up for the white space on the desktop version (since I assume the mobile version is fine?), I made some media queries and edited a few properties. I hope it looks better now.

1 Like
6

yeah looks so much better imo!

7

Oh I noticed a bug. Your text area has unintended spaces in them. Remove all spaces between opening and closing textarea tags to solve that.

8

That’s correct. Although if you wanted to have the action attribute instead of leaving it empty you could have coded it as action="#" I wanted you to be aware.

Regarding this. Ideally placeholder text shouldn’t mimic/repeat the label. Instead the placeholder text should contain the format of what the user should input. For instance the ‘name’ field could have placeholder text of ‘Jane Doe’, the email placeholder could have ‘jdoe@email.com’.

1 Like
9

@DrantDumani, that looks better. Couple of things;

  • I forgot to mention, change the cursor to a pointer when hovering over the submit button.
  • This is minor, if you’ve ever filled out a form on-line you may have noticed the asterisk for a required field. And that the asterisk is red. The abbr element isn’t really appropriate here. A user would not typically hover (or even notice the ellipsis).
10

I think from design perspective it is redundant. But it boils down to preference I guess