Please review my code of my survey form

Code Feedback
1

I feel like I was mostly stacking css rules at this point so guidance is very much needed and appreciated.
1 Like
2

This is very pleasing to look at, nice job!

Some things that could be better:

Increase the font size on the input fields, remove placeholder values from inputs as you’ve already given a label to them.
The submit button is one of the most important thing in a form, make it look important, it’s tough to differentiate your button from the input fields.

Keep Coding :slight_smile:

1 Like
3

Welcome to the forums @AquaPhoenix. Your form looks good. Some things to revisit;

  • 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 HTML coding errors you should be aware of and address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.
1 Like
4

Wow! Nice job on your project!

The style is pretty nice. Great job on that.
I would suggest that you either thin the text and number input borders, apply a little padding to them (at least 5 px) or both.

I noticed that when I minimized the result width, the form isn’t very responsive. The form looked really… …squished in a way.

I made the editor somewhat the size of a phone and this is what happened.

Screenshot007
Screenshot007564Ă—1010 491 KB

I would suggest that you increase the form width to at least 80% if you want it to display properly.

One more thing:
I noticed that you applied the background image to the form with body:before. It would be better to just apply that to the main body or create a div to store the background image in.

By using that way you did, there is a horizontal scroll when the width of the site is not full-sized.

Great job overall. Keep up the great work.

1 Like
5

Thanks! , I wasn’t sure whether placeholders were mandatory or optional so that’s why I left them, I guess now I know, and yes you are definitely right about the submit button.
Gonna update the pen so you can see the changes

6

Thanks, W3C was extremely helpful, I addressed the HTML issues and I replaced the line breaks with margins and cursor changed to pointer, It does look much cleaner .
here is the update:
https://codepen.io/loay-waleed/full/abNJmVZ
and thanks again for taking the time to review it sir.

1 Like
7

Thanks ! I added a media query to make the width about 90% here


concerning the background , I tried to put it in the container div but it simply just cuts the rest of the form I don’t know why though, a little more insight could help , I appreciate you taking the time to review it so thanks again!
1 Like
8

Nice job cleaning things up. You made some changes though and now one of the tests fail. Run the tests again. It’s an easy enough fix and as long as you’re doing it let me mention that placeholder text ideally shouldn’t mirror the label. Rather it should give an example of the format the user should enter.
Btw, there’s a stray <br> tag still.

1 Like
9

gotcha, all good now, thanks a ton!