Survey Form Project Feedback (First Time Posting)

Code Feedback
1

Hi All!
I would really appreciate any feedback on this, or ways to improve it / make it the best it possibly can be.
Here’s the link: https://codepen.io/katieraby/pen/WNeEmgq

One thing I know I did which felt dodgy was adding padding to the submit button to make it wider, as when I added a width property to it, the text would left-align instead of center. Any thoughts on why this happened would also be appreciated.

Thank you!
Katie

2

I think it looks good. I like the gradients you use on the background, I think it works well with your border around the form itself.
In regards to the button, I honestly usually just add some padding to make it wider just like you did.

1 Like
3

Thank you! :smile:
Okay thats good to know I didn’t do anything wrong there.

4

the reason this has happened with a width is because you have display:flex; on it which defaults everything inside to the left to get it back to center you would have to use justify-content:center; but imo you shouldn’t be using flex on buttons anyway and should only be used on the containers or parent divs

1 Like
5

Hi Katie,

I have no advice but just learning student here. Just wanted to say like your survey! I am doing mine too)

6

Thank you! That’s really kind of you.
Keep me updated with yours, i’d be happy to take a look at yours when you’re done too.

7

Thank you, Good luck to you too:pray:

1 Like
8

Ah I see, thank you.
The reason I added display: flex; to it in the end was that no matter what I did, I couldn’t centre the button? So adding flex seemed to be the only way around this. Not sure why - hope you can help :smiley:

1 Like
9

haha i totally get it cuz thats what happened when i was testing your code, but you got it to work, that’s the main thing lol its all about trial and error when it comes to code, there’s so many ways to do something and as you progress you’ll be like oh i could of done it that way haha, btw sorry i didn’t complement you on your good work it actually made me laugh having a survey form on your survey form lol.

some games to play…

you wont regret it :slightly_smiling_face:

10

the thing about flex is that it affects how things work inside that container so if you have flex on the full container for all your code, everything inside that container is going to be affected.

11

Hi @katieraby, welcome to the forums. Your survey form looks good but there are a few things you may want to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • you have numerous id's that you use more than one. An id can only be used on time. If you need to style things together use class
  • make it so users can also click on the labels, not just the radio buttons and checkboxes
  • try and not use the <br> element. Use margin and/or padding in CSS. There are ways to group radio boxes and checkboxes without using <br>
  • change the cursor to a pointer when hovering over the submit button
1 Like
12

Hi Roma, thank you so much for your valuable comments. :smiley:
Based on your comments, I have now updated my survey form (which now contains no errors, and is much more usable!): https://codepen.io/katieraby/pen/WNeEmgq

1 Like