Looking for some feedback on my Survey Form

Hello! I just finished my survey form and I would appreciate any feedback on how I could improve it.

Thank you! :slight_smile:

1 Like

Looks great! Consider styling the submit button to fit the theme. Also, put some space between the bottom of the card and the bottom of the page.

1 Like

HTML markup ignores whitespace in most situations. The content inside a textarea element is an exception to this rule. (Some other exceptions include inside pre elements and elements styled with white-space: pre or white-space: pre-wrap).

  • Currently, your labels are not associated with any inputs. You need to create a link between the input and the label. This is done using the for attribute on the label, with the value being the id of the input.

    For example, if your input’s id is name, then in the label for that input, put for="name"

  • Right now you have one label for a group of checkboxes and one for the group of radio buttons. This is not correct. Your Groups of inputs should each be wrapped in a fieldset and the legend inside of the fieldset will describe the group. Then, each input inside of the fieldset receives its own label.

    So for example, with your radio group, you would do something like:

<!-- this groups options -->
<fieldset>
  <!-- This describes the choices, what the user will be selecting an option for -->
  <legend>How is this survey making you feel so far?</legend>
  <div>
    <input type="radio" id="option1" name="thing">
    <!-- this describes the individual option -->
    <label for="option1">First Option</label>
  </div>
  <div>
    <input type="radio" id="option2" name="thing">
    <label for="option2">Second Option</label>
  </div>
</fieldset>

You can read more about fieldset and legend on MDN.

1 Like

VERY NICE!
As pointed out before, the survey button doesn’t quite fit the theme.
Also, the grey text is very hard to read on the white background.
But I like the mostly plain colors, with just a dash of something more vivid.

1 Like

Thank you! This gave me a much better understanding on when and how to properly use the fieldset, label, and legend elements.

Sorry, I’m note sure what this means. Do I need to style the white space in my textarea somehow?

1 Like

Yeah, I wasnt really sure how to style that better. I’ve tried something a little different with the submit button, hopefully that fits a bit better?

1 Like

Regarding the submit button, at least on my end, the reason why it appears to be off in a jarring way is because it doesn’t act like a button would in real life. That is, usually buttons when pressed look receded/depressed/darken. On my end, when I press your button, it appears to “pop out” and come forward, rather unlike a button. Of course, that is not to say a button must function like it would in real life. One simple solution might be to add an :active pseudo class to it and make it so when its pressed, the background of the button turns into the purple color from your design.

Edit: I figured out what was causing it to look strange on my end, you have a long CSS selector with the :focus pseudo class with a box-shadow style. The problem is that because it also includes input element which also covers the button as you’ve implemented it. However, if you remove that it messes with some other stuff in your design. So, instead I would just override the box-shadow by having a more specific selector for the button itself, ie #submit:focus {box-shadow: none;} and I think that will go a long way because the button looks fine before you mouse over it, but once its into focus, it gets weird. I also might consider seeing how adding a left border the button that is the purple color would work.

I think found that right as your edit came through. Is it better now?

I think the button looks much better now. As final steps for it, I might consider closing the box off by adding a purple left border. And to piggyback off randell’s comments about the contrast, I think if you added a border-bottom to the main element that matched the top border, it would look really slick and help indicate the end of the form because the white main and light purple body contrast is a bit faint at the bottom of the page.

The text color is actually black, but I think the font itself might just be too thin. I’ll see if I can find something similar but more distinctive.

Edit: I dont really know what I did, but it seems to be better.

If your HTML is this:

        <textarea>
      What suggestions do you have for me to improve my enterprises?
    </textarea>

The content of your textarea will be this:

"      What suggestions do you have for me to improve my enterprises?\n        "

whereas what you probably wanted was this:

"What suggestions do you have for me to improve my enterprises?"

This is why there is visible space before the start of the text.

You can fix this by removing the whitespace within the textarea.

In this particular case, I’d suggest that what you actually want is placeholder text. Luckily, textareas also have a placeholder attribute, just like text inputs.

Ok, I understand now. Thank you!