Survey Form Feed Back

Hey everyone. Here’s my survey form with all its tests passing. What do you think?

I don’t think that is the best choice of colours mate :smiley:

Great page: it is perfectly responsive and I personally found the color scheme very pleasant. The only problem I noticed at a glance is that the placeholder text in the input boxes and dropdown are cut at smaller screen widths. This can be solved by reducing the placeholder text font size for smaller screens.

image

Hope this helps you.

Really? I thought it was neutral rather :confused:

HI @AdityaVT. Thank you for your feedback. Yeah I like the color arrangements as well. Something neutral and easy on the eyes was what I went for.

About the placeholder, that’s actually a super small screen-width. I didn’t go that far. My browser doesn’t go beyond 280 pixels as well (at which point it doesn’t overflow) so I couldn’t know what size to set. I’ve set 10px though by estimation. How does it look now?

@kirubiel It’s too small now.

image

Font size of 13px works well for smaller widths on my browser. Beyond that the place holder is cut.

image

Yeah that was what I was thinking too.

Yeah that looks better. What’s your browser though? And the device you are using?

The browser I am using is Mozilla Firefox 62.0 on Ubuntu 14.04.5 system.

I would prefer the containing div to have a smaller max-width on large screens, use media queries.

Summary

Just an example, do your own thing:

@media (min-width: 800px) {
  div {
    max-width:65%;
    margin: 0 auto;
  }
}
@media (min-width: 1000px) {
  div {
    max-width:50%;
    margin: 0 auto;
  }
}

Its good but too wide/ all the content is to far to the left. Here i what i did (arrows pointing to the css i added):

(I have dual monitors, so my screenshot includes my other monitor :l)

  • Box shadow for a pop (box-shadow: 2px 2px 5px;). You can also add this to you form input boxes,
  • text-shadow to your h1 (text-shadow: 2px 2px 5px black;),

Note that the 5px is in their for a blur affect. You can remove that for a crisper look.

  • width of 75% to lessen the width. You can use that media query to change it to 100% on smaller screens,
  • margin 0: auto; to center it.

The color scheme is unique, the only reason people will say they don’t like it is because its not a trendy modern design. I feel like its pretty decent.

I would suggest using classes instead of just targeting div. Its way easier to read and will help you in the long run on bigger projects.


Helpful links:

And your device?
(20 characters)

The device I use is Lenovo G50.

@Tenchiken @lasjorg I’ve heeded both of your advices and edited the form. The containing div has smaller width on larger screen sizes and the width gradually increases as the screen size decreases. It was a good pointer.

Yeah I agree with you on that Michael. Maybe make the checkboxes, radio buttons and the text area to the right side of the form and then keep the questions to the left. That way it utilizes all the screen space available and also not look boring. And then add media queries for decreasing screen sizes and shift the positions of all of these. Yeah I got the idea. I will come back to it as I am on the product landing page and doing both at once is near to impossible and too much of a multitask.

I didn’t do that one because it’s a bit much. Especially the black shadow. Maybe a green shadow so that it blends in with the color scheme of the form?

I got the decorative idea but why decorate the heading? Since it’s a survey form, there’s a level of seriousness and professionalism in the decoration. So you would want to keep that down to a minimum while still looking good and appealing.

Thank you :smile: Normal colors just couldn’t cut it.

I agree yeah. It’s just that everything is small and cramped in codepen. I can’t imagine doing big projects with it. That’s why I didn’t give div a class. Since there’s only one div anyways.

Yeah maybe it’s your screen size (mine is 15") or it’s because it’s Ubuntu (mine is Windows 10). Anyways thanks for your feedback.

1 Like

Nice page, I have one suggestion to add labels connected to radio buttons and checkboxes instead of using simple text beside. Because it’s more convenient to click on the words and get marked what you want to mark

1 Like

Thank you! And nice observation. Especially applies for the checkboxes. I’ll remember that when I come back to the form. :smile: