Survey Form Attempt 01

Here is my survey form. Please let me know anything I can improve on with organization and graphic design among any other stuff. Thank you!

Link:
https://codepen.io/coe9257/pen/dyYVyow?editors=1100

Here’s a few things I noticed.
Hope it helps!

Code-Wise

  • Extra tags.
    Codepen already uses the <body> tags behind the scenes, so you don’t need any <body> or <html> tags in your HTML section. Also, since they also provide a CSS pane, you don’t need the random </style> tag either.
  • Spacey HTML.
    Your HTML code is really hard to read because of the weird spacing.
    Look for the little button next to the section divider between the HTML and CSS
    (it looks like [ V ]). Click it and then click “Format HTML”. This will make your code look much neater, and make it easier to spot errors.
  • Email validation.
    You’re currently validating the email by using a regular expression. Your expression won’t work for some valid emails, like ones that end with ‘.edu’. I’d recommend using the built in email validation instead of building your own. Check out W3school’s documentation about email validation inputs.
  • Syntax Errors.
    You have a lot of little syntax errors in your HTML. use the [ V ] button again and click on “Analyze HTML”. This will help you spot those pesky little errors that are hard to find on your own.

Design-wise

  • Consider using a sans-serif font.
    Using something like Open Sans would make your page look much more modern.
  • Better contrast in required form elements.
    When the page first loads, all the required fields are red. The red color clashes with the purple and makes the placeholder text hard to read. Maybe you could use a red border instead, so the user could still read the placeholder text.
  • Random black text.
    The header looks a little out of place since it is the only black color on the page. While white header text would not be legible because of your background image, I would try using the dark purple that you’re using as the form background color.
1 Like

it was quite interesting looking at your code, as it would seem your not a newbie with the code, with the practices you use?

that or you’ve gone through quite a few tutorials!

1 Like

It’s a good first attempt, have you tried making the form element’s dark blue color slightly transparent? Perhaps it’s gonna look even better :slight_smile:

1 Like

You form looks good @coe9257. Some things to revisit;

  • There’s a horizontal scroll bar. Attached a link at the end of this so you can see how to get rid of it.
  • 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 coding errors you need to address
  • Change the cursor to a pointer when hovering over the submit button

Edit: I see someone suggested you use a different font. You need to either link or import the font named ‘Open Sans’ in order to use it. It’s not a font that pre-loaded on any box. And provide a backup font too.

1 Like

Just an update everyone. I accidently mixed up my reset stylesheet somehow. I was inputting some of my code into that and not into my actual CSS sheet. Long story short, it blew up all my work haha. I have most of it fixed. Right now I am trying to get my freaking checkboxes to align but having a hell of a time with it.

Does anyone have any advice for that? I couldn’t find clear instructions on google. I think I have to use flexbox… Going to mess around with that soon.

Ok everyone, I made the changes you suggested. The feedback is much appreciated!

Blockquote
it was quite interesting looking at your code, as it would seem your not a newbie with the code, with the practices you use?

that or you’ve gone through quite a few tutorials!

Haha yeah, I went through tooooons of tutorials. I am specifically trying to find ways to stay away from media query’s because they are soooo time comsuming. How long have you been coding?

I’ve been stuck in tutorial purgatory for longer than i’d care to mention!

But i’m knuckling down, I’ve come back here to work through the curriculum and get the creative juices flowing!

BlockquoteI’ve been stuck in tutorial purgatory for longer than i’d care to mention!

Blockquote
But i’m knuckling down, I’ve come back here to work through the curriculum and get the creative juices flowing!

What part of the tutorial are you on?

i’ve gone back over the HTML and CSS parts in a couple of hours over the last 2 days, going to start the projects tomorrow, was thinking today but it been a hell of a week at work, so having some relaxation time today (BBQ’s + vodka :D) and going to crack on again tomorrow

previously gone over quite a few courses on Udemy, getting different ideas on there, but i’m a big fan of here with the actual projects side of things, and it seems the videos have gotten loads better since the last time i visited

https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/