Survey Form - Looking for Feedback

Code Feedback
1

Hey, looking for some feedback on my survey form. At first, I thought that implementing the design I wanted to do wouldn’t be too bad. Not quite, turn out to be more difficult than I imagined but it was a cool experience trying to figure out precisely why something wasn’t working. Definitely learned a few things on the way!

Here it is and feedback welcomed and encouraged
Survey Form Project

2

Good job! I like the design.

First, I would increase the sizes of input fields. Also I would add a hover effect on submit button when my mouse hovers over it.

1 Like
3

Added a simple hover effect to the button, but also took the opportunity to had an active state as well. Really like adding the hover, pretty simple change for great results!

Regarding the input fields is that for the text-box fields, the radio/checkboxes, or both?

New version here: Updated Survey Form v1

4

The project is nice. I like the color pallete. I would only look into the padding here:

body {
	background: #FAF3E1;
	padding: 5vw 10vw 5vw 10vw;
}

and i would add a media query to change the values for smaller screens (mobile, tablet). With values like 10vw you are eating up to 20vw of your screen just to display a background color and not content.

And also why have you choosed same value vw for all dimensions and not vh for heights and vw for widths?

1 Like
5

Thanks for the comments sorinr. I did not notice that I used vw for all of them in the body (which was designed mobile first) until you mentioned it, even though in the media query for non-phone devices I used vh for the padding. I think your advice was super solid regarding reducing the size for mobile, so I reduced the values by half and things look a lot better.

In addition, I incorporated shimphillip’s comments about the input box size and increased the vertical height of the input boxes, which I think made things look a better. I then took that opportunity to further refine and change the input boxes pretty significantly by adding a rounded border, changing the default font, border color, adding a little left padding so the content was jammed against the left edge of the input box, and adding a very slight background gradient from the grayish background for the survey container to white. Overall, the feedback has really helped me spot further things I needed to work on my project.

Here is the latest version, thoughts?

Updated Survey Form v2

6

It looks much better now. Good job and happy coding :+1:

1 Like