I would like some feedback for my Survey Page project

Code Feedback
1

I have made use of Material Design (CSS-only). The content may be uninspired, however. Codepen link

2

I like MD, I like its clean looks :slight_smile:

I would stretch input boxes more to the right so that it has about same space from edges to the left.
Enable to check radio/check boxes by clicking on their texts.
Change cursor when mouse hovers on submit button.

Good luck.

1 Like
3

Thanks for your prompt reply! I’ll consider your suggestions.

Is it okay if I keep the radio button/check-box labels unclickable? The way I have laid out my code makes it difficult to nest the labels within the inputs and I don’t know of any other way of implementing the same without the use of Javascript.

4

yeah ofc!

It was only a suggestion for better user usability :slight_smile:

1 Like
5

The whole idea of use radio buttons in a group is so there is only one choice which can be made. In your Rate our service fieldset, you have split the radio buttons into 3 groups of 2 ratings. This is unexpected from a user stand point. For example, one I click on another number like 6, the 1 should no longer be selected. It would make more sense with the following:

       <fieldset>
          <legend>Rate our service</legend>
          <div class="md-radio">
            <input id="1" type="radio" name="rating" value="1" checked>
            <label for="1">1</label>
          </div>
          <div class="md-radio">
            <input id="2" type="radio" name="rating" value="2">
            <label for="2">2</label>
          </div>
          <div class="md-radio">
            <input id="2" type="radio" name="rating" value="3">
            <label for="2">3</label>
          </div>
          <div class="md-radio">
            <input id="2" type="radio" name="rating" value="4">
            <label for="2">4</label>
          </div>
          <div class="md-radio">
            <input id="2" type="radio" name="rating" value="5">
            <label for="2">5</label>
          </div>
          <div class="md-radio">
            <input id="2" type="radio" name="rating" value="6">
            <label for="2">6</label>
          </div>
        </fieldset>
        <br>
        <br> -->
        
             <fieldset>
          <legend>Rate our service</legend>
          <div class="md-radio">
            <label><input id="1" type="radio" name="rating" value="1" checked>1</label>
          </div>
          <div class="md-radio">
            <label><input id="2" type="radio" name="rating" value="2">2</label>
          </div>
          <div class="md-radio">
            <label><input id="2" type="radio" name="rating" value="3">3</label>
          </div>
          <div class="md-radio">
            <label><input id="2" type="radio" name="rating" value="4">4</label>
          </div>
          <div class="md-radio">
            <label><input id="2" type="radio" name="rating" value="5">5</label>
          </div>
          <div class="md-radio">
            <label><input id="2" type="radio" name="rating" value="6">6</label>
          </div>
        </fieldset>
1 Like
6

Its a very neat design choice, i would’ve never thought of. very simple, good looking.

I would suggest making it a little wider, and then making it have a relative width on smaller screens.

limit the min-width to 320 pixels.

7

I see. I hadn’t understood the whole group by name thing and had just hastily thrown it together to fulfill the tests. I’ll look into it, thanks!

8

Thanks a bunch! I was actually trying to replicate the Google Forms style, albeit rather unsuccessfully, hence the narrow width. But, I’ll see what I can do!

9