Survey Form: Same old, Same old 😄

Code Feedback
1

Just about done with my survey form: Reception Services Survey

Any kind of feedback and recommendations are most welcome. Please don’t hold back.

Thanks.

1 Like
2

It looks beautiful. Congratulations.

1 Like
3

Good job. Just review your html and add the “for” attribute missing on some labels. Otherwise :+1:

1 Like
4

Looks nice and neat!
Well done!!

1 Like
5

Wow. very nice and professional! 100x better than mine; but if you want feedback (and these are my personal thoughts)

  1. Green bar could be full width (no margins on left/right) & " Reception Service Survey" could match the background color. (maybe?)

  2. The list items highlight all the options on mouse-over, not the single option

  3. Sharp corners on the text field (sorry, being picky. everything is beautiful)

  4. Submit button could use a mouse-over color and cursor

Congrats. You did an excellent job with this.

1 Like
6

Thank you @pjonp…appreciate your feedback (personal or otherwise), the more you point out the more I learn.

7

Hey…thanks for taking the time to look at the form.

Quick question.Would you mind chiming in on this topic?

Don’t mind getting a different outlook.

8

The for attribute on labels must be paired with an id with the same name on the input field.
Here a quick copy-paste example code:

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
1 Like
9

Hey…Did what you asked:

  • working on the green bar to span the whole width; the LHS is a little pesky;

  • “Reception Service Survey” text in background color gives a low contrast ratio with the green bkgrd; changed to same color as submit button;

  • List items’ text color changes with mouse over; the background-color property was pushing the buttons+checkboxes out-of-place. Still figuring out how to highlight the dropdown menu;

  • Definitely changed the textarea corners; thanks for pointing that out :+1:

  • The Submit button now has a mouse-over color + pointer cursor :raised_hands: :smile:

10

Looks amazing still, you’ve done a great job with this project! Seriously, this is way better than any of the sites I made during the challenges. Congrats again.

If you want to keep tinkering and playing the CSS, Here are some suggested additions/edits (notes added with ‘fake’ comments)

*{
  margin: 0;
}

global margins (removes space on the left of header) [note; goes at top of CSS & sets to everything!]

html,
body {
  padding-bottom: 15px;
}

add back some space at bottom of the page (overrides above 0 margin) [compare bottom of form if this is removed]

h1 {
  padding: 20px 0px;
}

keep current padding top & bottom, with 0px left/right (fixes the horizontal scroll bar)

1 Like