The Anytime Orchestra survey form

I created a feedback page for the fictional “Anytown Orchestra”. I welcome constructive feedback.

Andy

Your page looks good @amrlearn. Some things to revisit;

  • Change the cursor to a pointer when hovering over the submit button.
  • Make your page responsive. Things fall out of the container on smaller screens.
    • To see what I mean, grab the right edge of your browser and drag it all the way to the left.
    • Remember, the R in RWD stands for Responsive
1 Like

Thank you, Roma, great feedback. I think I fixed up the “R” part of “RWD”, and added the pointer cursor to my Submit button.

One thing I struggled with was the form elements that have required input. I wanted to put a hint in the tag by adding a little ‘*’ character (smaller than the main label text).

I am sure there must be more than one way to do it, but I chose to use a CSS grid for the form elements, mainly to enable the stretched input element style across the form width. I tried adding a element to the label that has the ‘*’ in it, and I defined a CSS class for that element to use a smaller font. When I did that, the element seemed to be treated as a separate cell in the grid, appearing on a separate line.

To fix that up, I defined two columns for the grid: one for the label, and one for the element. With appropriate alignment and gap settings, I could make it look like a single line of text, as I wanted it to appear. But when I reduced the browser window width, and the text had to wrap to a second line, the element just hung off to the right (in its own column) instead of appearing at the end of the label text.

As a result, I just ended up adding the ‘*’ to the end of the label text, and having just one column for the grid. Overall it works better, but I still cannot figure out how to get the smaller asterisk.

The project’s example form seems to mix different font sizes in the label, but I feel like I’d be violating the code of conduct if I looked at the source.

Good job making it responsive @amrlearn.

I just looked at this really quick. You could try something like;
HTML
<label id="name-label" for="name">Your name <span class="req">*</span></label>

CSS

.req {
  color: red;
  font-weight: normal;
}
1 Like

Well, @Roma, I’ll be darned! I swear I tried something like this earlier, and the span kept going to its own row, below the label text. I can’t remember exactly what I did, but it must not have been right. But I tried your approach, and now it gives me the desired result. Thanks! -Andy

1 Like