What do you think of my Survey Form?

I noticed the datalist doesn’t work in Safari. Should I change it to select or is there a better way?

FCC Survey Form


I really like it. It is clean, the color scheme gives a nice feeling of freshness (whatever that may mean) and it is user friendly.

Things that could improve, imho:

  1. Adding label to the check boxes, so you don’t have to target the small boxes, but the text itself.
  2. Change the spacing in the radio buttons, because it looks a bit ambiguous with the button standing right between the words.

Good job. Keep it up and happy coding.

Great color choices and layout! The white creates a clean & organized feel, but at the same time can be a little tough to look at for long. That could just be a personal thing to me, but maybe play with some neutral or off-white colors that could achieve the same feeling, and see what you think.
Nice work! :grin:

Thank you for the feedback,. Good suggestions, I will change it.

Thank you for taking the time to have a look and comment.
I know what you mean, that’s why I used a little bit off-white for the backgrounds.
Perhaps not off-white enough to your taste? :slight_smile:
I like the use of clear white for the input fields, so they stand out from the off(ish)-white background.

Could do with some responsiveness added to it, the form is quite badly squashed on mobile views

Very good! More than likely it’s just my eyes :wink:

Thank you, that will be the next step.

Nice job.

First of all, I suggest adding a link to the GitHub repository where this project is stored. It will help users to get fast access to the project code, so they can review it. It much more convenient than via native browser development tools.
Secondly, you should try to add at least one breakpoint for mobile devices to make your form responsive.

  1. Her is the repo https://github.com/Topzie/FCC-survey

  2. Will do that.

And thank you for your feedback, much appreciated.

You misunderstood me a bit about GitHub repo. I meant, that you can add a link in your project, at the bottom for example. That’s a nice approach to do for every future project, in case you use GitHub.

Your code very clean, I already can say, that you put a lot of effort into it. But much more important that you made this project not on 5 out of 5, but on 6 out of 5. I think so, because you use GitHub, apply shadows and try to implement your own style, especially with color play. That means, that you are not satisfied to “just” make a project, that you want to step further and make it better. Therefore, I encourage you to upgrade it even more and apply such a mentality to all your future works.

For instance, you can wrap every pair of input+label with a div element and apply a class to it. Thus that, you are free to position this pair inside the container via manipulation with defined class or position input/label individually inside this div wrap. Such an approach is considered as a best practice when you work with forms.

Also, you can try to add icons to your form, via https://fontawesome.com/ for example.

Or you can play with CSS pseudo-classes :valid and :invalid to add some behavior for cases when an input is valid or invalid respectively. It will increase UX of your form.

In the end, once again, I encourage you to apply such a mentality to all your future works. It will help you to grow. Good luck.

I think it looks nice.

  1. The datalist element isn’t great in Firefox either, not sure why they have the default style like that. It’s missing the dropdown indicator and you have to click twice to get the dropdown list to show up.

You can use the select element instead of datalist.

If you switch to using select, you have to remove the input’s associated with the datalist’s. Add the option value’s as text to the options element. Then style the select element by adding select to your input styles (or give it it’s own style).

input[list], input[type=email], input[type=number], input[type=text], select {

<select id="likes">
  <option value="Challenges">* Select an option</option>
  <option value="Challenges">Challenges</option>
  <option value="Projects">Projects</option>
  <option value="Community">Community</option>
  <option value="Open source">Open source</option>
  <option value="All above">All above</option>
  1. Speaking of Firefox, for some reason it is not displaying the normal outline style, meaning the input boxes completely disappear when they have focus because of the background-color: white on the :focus style. Not sure when they started doing that, i checked in the current and developer versions and they both don’t display the outline. In any case, I would give the inputs some subtle focus indication (a background color, or border-bottom, or make the ::placeholder text something other then white). Probably better not to rely on the default outline style of browsers anyway and make sure the focus indication is a bit more accessibility friendly.
background-color: #3CBC8D33;
border-bottom: 2px solid #84d4b7;

::placeholder {
  color: #323232;
  1. Using empty elements as spacers is semantically not great, and not needed. I’m here referring to your .empty-space div and empty p element. The reason why your <br> tags aren’t working is because the inputs are inline-block elements, if you set them to be display: block the <br> tags will work as intended. You can also just add margin-top/bottom as needed on elements you want space between.

  2. Making the form responsive would be pretty easy, you can just switch the form from grid to flex and use flex-direction column.

@media (max-width: 890px) {
  form {
    display: flex;
    flex-direction: column;

Thank you for your feedback. I have changed my code, but not exactly as you suggested, because I use the id-tags tfor styling. I don’t like using too much divs. :wink:

Perhaps you would like to have a second look at it and let me know what you think of it.

I have changed the code to make it responsive.

Perhaps you would like to have a second look at it and let me know what you think of it?

I have made it responsive.
Perhaps you would like to have a second look at it and let me know what you think of it?

Looks great now. Good use of breakpoints and the layout is nice and clear on smaller views. Good job!

Thank you and thanks again for your feedback. :+1:t2:

Nice, you integrated media queries and now your form responsive, or not?..
Go and open it on your phone or open dev tools in Chrome, then toggle the device toolbar (ctrl+shift+m on windows) and select iPhoneX in the top menu.
Looks like you forgot to add something =)
hint: viewport in html

I would still consider making the inputs focus style more obvious, it’s pretty confusing in Firefox the way the boxes just disappear. Also relying on the default outline style of browsers forces vendor specific looks on you that you have no control over, it’s not predictable nor reliable. If you like the way it looks in Chrome, implement that as a style.

Again, if you want to use <br> for separation you have to make the inputs block level elements (and i would still ditch the empty spacer elements).

Not sure why, but this “Feedback needed” got my attention. I went through it (I didn’t check the code very deeply, just one fast look), so only few code bad practices found.

Anyway, good news is, that I made pictures of all not-so-well stuff I found, bad news is, that I can have only one image in this post… one image it is…

But time for some criticism:

  1. Use anything to center the icon with text, ideally flexbox.

  2. Fix that border radius.

  3. I’m sorry, but the colors you chose, are really, really bad together. Ask Google what is ‘color wheel’, do some research and change it.

  4. Make all the stuff the same way. Users like it.
    Order input and label in the whole document in the same way.

  5. There are some bad looking padding/margin stuff here. But the most obvious is spacing between inputs and labels.
    Pairs label-inputs should be separate by bigger space than there is between label and input -> you know that they belongs to each other.

  6. Remove min-width form body element, please.

  7. Use some no-wrap magic. Flexbox for example.

  8. Wanna work in a team? Stop doing this formatting.
    Are you using tabs or spaces? And do you know, that tabs can be 2 or 3 or 4 or what ever spaces long?

  9. Wait, what? Where did the formatting go?

  10. Well, again bad formatting, but that’s not the big problem here. What is the list of inputs and labels good for? How can I find anything here?
    Wrap every pair into separate div! You can then easily style it. Will solve problem no. 5.

  11. Using ids in styles is very bad practice, don’t get use to it. Use classes. This is very small project, so you don’t get the picture, but when it grows, it will go really, really bad.
    Google stuff like ‘oocss’, ‘bem’, ‘dry’, …

  12. Styles that do your page responsive, takes over half of the styles and they are quite useless. You can use flexbox, vw, vh, min-width, max-width,… to make it responsive on its own without using media queries. Also grid is too big weapon for this page, flexbox is all you need. (Btw, IE doesn’t really supports grid, but you have to make pages to look nice in IE too…)

Here is the promised picture, voila:

Some tips to make the survey form even better:
Add border-radius to your button.

You are on the right path, but you are using a lot of bad practices. You will make it better and better, but you have to thing about it all the time.