Form survey project

Hey just looking for some feed back, i know the codes gotten a bit messy im working on a system to streamline lines for the next project. Any feedback would be awsome ive been working on it for the past few days but am happy with the progress so far. please let me know how i can improve! thanks againMy page

Hey Catlin,

nice to meet you! :wave:

Good job so far! :clap:


My ideas:

  • all tests pass, awesome!

  • when you use codepen (only there!), you only have to add the code that belongs into the body; so you can remove:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body class="bg">
  • you can move the head content into Settings > HTML > Stuff for <head>

  • after you removed this unnecessary stuff, you can get a code validation:

    • HTML: paste your codepen HTML code into the body
    • CSS: paste your whole CSS code
    • you will see some errors and I think you are able to fix them! :+1:
  • you can increase the readability of your code by:

    1. clicking on the small arrow on the right side of the code box and
    2. clicking Format HTML/CSS
  • although I like the idea of the hidden labels because of the content of the page, it’s very hard for me to use the site

  • when I decrease the width of my browser, the content gets cut off; this is important for people who read your page on a smartphone
    Screenshot_2020-08-24_10-28-28


Feel free to ask questions and keep up the good work!

1 Like

Welcome to the forums @catRoman. Your page has a limited audience. Some things to revisit;

  • Not all users can hover. Anyone that;
  1. has a smaller device w/out a mouse
  2. any desktop user that navigates via the keyboard

will not see any of the labels on your form. It’s a bad UX.

  • User’s don’t have access to your google account and cannot see your background image. You need to host it somewhere neutral.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to select, not just the radio button / checkbox.
    • This works for most of your but not all.
  • Change the cursor to a pointer when hovering over the submit button
  • The page needs to be responsive.
    • There’s a horizontal scrollbar on smaller devices. You’ve hard-coded widths in pixels. A percentage would be a better option.

Thanks guys, i appreciate the help, i went back into my code and removed all
elements, adjusting through css to achieve the same results(this was alot harder than i thought it would be lol), moved my info to the appropriate spot, fixed my background-image so it would show up without being a google member and put a redunant background color aswell, and i made it more responsize to different size browers widths and as well as to mobile devices.

i had my phone with the page on it and refreshed it as i was working on the @media to help get a feel, seemed to help.

still far from perfect but i feel a bit better now

please give it another review if you like and to help me polish it some more thanks again!
my updated survey page

1 Like

Hey there,

great effort, way better to read now!

My ideas:

  • I think it’s not so easy to make “noisy” images work well as backgrounds, e.g. in your case the image is black-white, your text color is white. what leads to a small contrast; here is a contrast checker, where you can upload an image and check the different values for the different colors of your image; red means bad, green is good

  • you can increase the overall readability of your page by adding some more spacing, e.g. between the questions and the checkboxes; you can read more about it here

Keep up the good work!

I agree, nice job cleaning up your page @catRoman. There are some things you can revisit;

  • There are two instances of <br> in your form. You don’t want to use it to force spacing.
  • Run your HTML code through the W3C validator again.
    • There are coding errors you should be aware of and address.
  • In the textarea, make what’s in there placeholder text. User’s should not have to delete text in order to add comments.
  • One again, change the cursor to a pointer when hovering over the submit button.
  • Remove your email addr from your form. You’re opening yourself up to a lot of spam. You don’t want to add personal info to a public forum.