I just completed the Survey Form - Please provide a feedback!

Code Feedback
1

Hi all,

I just completed the Survey Form. I’d love to get feedback for this. I’m apologizing in advance for putting you through this. The code is a mess, especially the CSS part. I’m looking for ways to improve the structure without having to randomly stick things together.

https://codepen.io/akkisagiraju/pen/OYdejM

Thank you,
Akki

2

@AkkiV
Hi. You need to fix the mobile/tablet view. This is what the project looks like at 700px width.

survey
survey680×597 23.9 KB

You can possibly increase the width of the textarea.
How about some brighter colors?

3

Hi Brandon, thank you for the reply!

The screenshot you posted looks strange actually. I thought I already had it adjusted at 700px width.

Anyway, I adjusted the width again now and changed the color to a brighter one. :slight_smile:

4

@AkkiV Nice!
I like the color.

The fields are still coming out at 622px width. They should stay within the form. I always add box-sizing: border-box to the input fields to keep them inside the parent div.

Why use floats when you have flexbox?

Here is my survey form. You can look at the way I coded mine.

5

I should have a look at why it’s happening. I don’t see the fields coming out at 622px at my end.

I used floats for this project because I’m still not comfortable with flexbox. I’m learning more about it and will use it for my next project.

Your survey form looks fantastic!

1 Like
6

Wow! that is a really nice survey form!!
I’d just say that the three inputs at the top are a bit too far. place them closer to the left.

1 Like
7

Thank you! I was thinking the same. I will change it. :slight_smile:

8

Hi @AkkiV, your page is looking good to start however there are some things you may want to revisit.

  • if you’ve ever filled out a form on-line you may have noticed that fields marked with an asterisk are required. If a field is not required, don’t give it an asterisk
  • both of your dropdowns ask the same question but give different choices for replying
  • with the radio buttons the user is allowed to select either the radio button or the label. with the checkboxes the user can only select the checkbox. make it so clicking the label enables the checkbox
  • change the cursor to a pointer when hovering over the Submit button
  • a nit but, the black title is bordering on being a little hard to see with that blue background
1 Like
9

both of your dropdowns ask the same question but give different choices for replying

Yeah, haha. I added a second dropdown forgot to change the label for that. I removed it now.

  • with the radio buttons the user is allowed to select either the radio button or the label. with the checkboxes the user can only select the checkbox. make it so clicking the label enables the checkbox

This is good advice. Thank you. I wonder why I haven’t thought about that before.

change the cursor to a pointer when hovering over the Submit button

Done.

a nit but, the black title is bordering on being a little hard to see with that blue background

I think it is due to having a black shadow for a black text. I removed the shadow now. And it looks a little better.

Thank you so much for your feedback! It is very informative.