Survey Form CSS form styling

Code Feedback
1

Hello,
Here is my Survey Form project on codepen. https://codepen.io/berubenic/pen/XWXLjWa Anyone have any resources for styling forms? I used the ffc example to make mine look decent. Got back to coding after 2-3 months off and css was giving me a headache lol.
Thank you for your feedback.

2

Hi,

I can’t see the background image. So there’s only a color. I don’t think it work together with the background-color of the form.
Your page looks very nice and everything works. You are using all the right tags the way they are supposed to and though that seems obvious, it isn’t. You’re using margins and paddings and everything looks logical and clear.
It’s just not very exciting. I’m looking forward to that background-image.
I would put left-margins on the divs so that everything does’nt stick to the edge so much.
I would also work on the fonts. Sometimes the font is smaller and it is not clear why. I would also create some space between radio buttons/checkboxes and the text next to them.

It’s a good start.

Greets,
Karin

Greets,
Karin

1 Like
3

Hey, thanks for reviewing. I wrote in sublime and the image is in my local files. I should of changed the img src. My bad on being lazy… but I had a color incase something like this would happen in rl. I started reviewing ffc 6hr css tutorial on youtube. Should be a good refresh. Thanks again.

1 Like
4

Hi @berubenic!

I think you page could be smaller on a PC screem, like:

  1. Putting Age(optional)and Which option best describes your current role? next to each other.

  2. And on What would you like to see improved? (Check all that apply) put the items in 2 columns.

Just some tips :grin:

And I liked the colors you used!

Nice job! :facepunch:

1 Like
5

Thank you @ julio-pinheiroo

1 Like
6

Welcome back @berubenic. 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 address.
  • User’s should be able to click on the labels to select, not just the radio button / checkbox