# My survey form about coffee - Please give your comments

**URL:** <https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346>\
**Category:** I Built This\
**Created:** [November 14, 2020, 3:05pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346 "2020-11-14T15:05:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 14, 2020, 3:05pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/1 "2020-11-14T15:05:19Z")

</div>

Hi everyone!

I finished my second project in FCC - survey form. It passed all the tests and I worked really hard on responsiveness on all devices but I can’t find what else I can do about accessibility. So if you have any suggestions please let me know.  
Thank you in advance!

[This is my Pen](https://codepen.io/dieplumpe/pen/mdEQZgJ)

P.S. How do you put the links to CodePen in here and it looks like a snippet and not just like a link? I see it in all the topics here but couldn’t find an option.

---

<div class="post-metadata">

**Author:** ![skyeparagon](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/skyeparagon/32/282882_2.png) [@skyeparagon](https://forum.freecodecamp.org/u/skyeparagon)\
**Post date:** [November 14, 2020, 3:24pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/2 "2020-11-14T15:24:58Z")

</div>

Great work @dieplumpe, nice colors(they compliment each other), Design is simple, user friendly and responsive, One thing i think you should edit is the placeholders, maybe grey them out, reduce the opacity or just align the text center, Otherwise you nailed it.

## Happy Coding

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 14, 2020, 3:30pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/3 "2020-11-14T15:30:39Z")

</div>

@skyeparagon I changed opacity as you advised. Thank you!  
I just afraid that it might create troubles for accessibility. It’s not so contrast now like they were before.

---

<div class="post-metadata">

**Author:** ![skyeparagon](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/skyeparagon/32/282882_2.png) [@skyeparagon](https://forum.freecodecamp.org/u/skyeparagon)\
**Post date:** [November 14, 2020, 3:42pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/4 "2020-11-14T15:42:43Z")

</div>

@dieplumpe The placeholder is bold enough to counter that I think, Though you can use “letter-spacing” to add a little space between each letter.

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 14, 2020, 6:57pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/5 "2020-11-14T18:57:39Z")

</div>

What do you think? can I submit the form?

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [November 14, 2020, 7:34pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/6 "2020-11-14T19:34:07Z")

</div>

I think your form looks good. The only issue that I think you have to change is the typo for survey. Other than that, I feel like the rest of the comments would be design suggestions. So you can decide which style changes you want to do.

> [@dieplumpe](#):
>
> P.S. How do you put the links to CodePen in here and it looks like a snippet and not just like a link? I see it in all the topics here but couldn’t find an option.

Usually I just post the link. I don’t include it with other text like here is my pen. So you could try that approach.

Hopefully that helps!

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 14, 2020, 7:38pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/7 "2020-11-14T19:38:24Z")

</div>

Thank you! It’s so embarrassing that I didn’t see this typo 😌

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [November 14, 2020, 7:39pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/8 "2020-11-14T19:39:04Z")

</div>

No worries, you’re good. I think you are ready to move onto the next project.

Happy coding!

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 14, 2020, 7:40pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/9 "2020-11-14T19:40:57Z")

</div>

Thank you again! Yes, I’ll start to work on the product page skeleton 🙂

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [November 14, 2020, 10:27pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/10 "2020-11-14T22:27:34Z")

</div>

You mentioned accessibility so I’ll point out a few minor issues:

- The `<select>` needs a label. Since you have labels on everything else I’m assuming this is just an oversight.
- You should probably wrap the content in a `<main>`.
- You are using the browser’s default keyboard focus indicator for the inputs/button. Some browsers are better than others. Chrome looks pretty good but on Firefox some of them don’t show up very well. My suggestion would be to style the CSS outline property for all of them so that they stand out and look the same for all browsers.
- At bigger text sizes the checkbox/radio button content starts to overlap its input. Also with large text, at certain browser widths the ‘Submit Your Answers’ button breaks out of the button.

I’m being pretty picky above because overall your form looks very nice and so there aren’t many problems to mention. Nice job.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [November 15, 2020, 2:15am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/11 "2020-11-15T02:15:44Z")

</div>

Your form looks good @dieplumpe. Some things to revisit;

- Make your page responsive. Remember, the _R_ in _RWD_ stands for _Responsive_.
  - There’s a horizontal scrollbar on smaller screens.

- I noticed you had the following `property: value;` pair in the `body` selector, `font-weight: bold;` but the text does not show as bold.
  - This is because when you imported the font you only chose to select the normal weight so the browser does not have a bold weight. If you’d like have a bold weight then you should select it also. The Monserrat font has quite a few weights so you should select the normal weight (400) and the bold (700). Something like;  
`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 15, 2020, 9:54am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/12 "2020-11-15T09:54:16Z")

</div>

@Roma, @bbsmooth thank you for your comments! I’ll try to fix all that you mentioned.

But I have a problem to see the problems in responsiveness that you mentioned. When I made this page I controlled it on my mobile phone, tablet and laptop (changing size of the screen, zooming it). And there are no breaks or horizontal scrollbars on any of my devices. Can you please give me a bit of advice on how I can see these problems that you mentioned (cause my devices don’t show them to me)?  
Thank you in advance!

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [November 15, 2020, 1:16pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/13 "2020-11-15T13:16:29Z")

</div>

@dieplumpe, the way I see the scrollbar is to grab the right edge of the browser and pull it as far right as possible.  
You can also open up developer tools and click on the little phone icon

You’re probably familiar with the [box methodology](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model). Everything you see on a webpage is just a box you need to move around and resize, things will start to click.  
Use the following to outline every element to see what’s going on if having trouble with something. In your CSS add the following at the top;

```auto
* {
  border: solid 1px red;
}

```

You’ll see where your checkboxes extend out of the container.

 ![Screen Shot 2020-11-15 at 08.15.49](https://global.discourse-cdn.com/freecodecamp/original/3X/8/0/8062f612e2ec7cd396d4efd9f0254c0b492aefa3.png)

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [November 15, 2020, 7:12pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/14 "2020-11-15T19:12:44Z")

</div>

> [@dieplumpe](#):
>
> Can you please give me a bit of advice on how I can see these problems that you mentioned (cause my devices don’t show them to me)?

Hi @dieplumpe. I am using ‘text only’ zoom to increase the text size on the page. The easiest way to do this is to use Firefox. Go to the View → Zoom menu and activate ‘Text Zoom Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. At some point you will see the content for the radio buttons/check boxes start overlapping their inputs.

And like @Roma, I am also seeing a horizontal scroll bar on narrower view ports. Start with your browser wide and then begin narrowing it. At some point the scroll bar will show up. I believe it has to do with the CSS grid you are using for the check boxes. Put a temporary background color on the fieldset and you’ll see that it is sticking out past the form container on the right.

---

<div class="post-metadata">

**Author:** ![landon.h.lloyd](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/landon.h.lloyd/32/187391_2.png) [@landon.h.lloyd](https://forum.freecodecamp.org/u/landon.h.lloyd)\
**Post date:** [November 15, 2020, 11:19pm UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/15 "2020-11-15T23:19:26Z")

</div>

@dieplumpe I think you are ready for the next project! That looks really good. It is responsive, passes tests, etc. Good job. You really have a knack for design that I do not have! Happy Coding! 😄

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [November 16, 2020, 12:02am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/16 "2020-11-16T00:02:09Z")

</div>

It’s not quite responsive and two of us are working with her to resolve.

---

<div class="post-metadata">

**Author:** ![landon.h.lloyd](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/landon.h.lloyd/32/187391_2.png) [@landon.h.lloyd](https://forum.freecodecamp.org/u/landon.h.lloyd)\
**Post date:** [November 16, 2020, 12:02am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/17 "2020-11-16T00:02:57Z")

</div>

I noticed the one header. My bad on that. Other than that everything else is responsive. Sorry.

---

<div class="post-metadata">

**Author:** ![dieplumpe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dieplumpe/32/187570_2.png) [@dieplumpe](https://forum.freecodecamp.org/u/dieplumpe)\
**Post date:** [November 16, 2020, 1:09am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/18 "2020-11-16T01:09:47Z")

</div>

@bbsmooth @Roma I did what I can. My devices still show that it’s all OK, no overlapping, no breaks (but when I change the size on the laptop I change it for all the page not only for text, isn’t it more logic? + Idk if I actually have this function in Chrome). I get rid of scrollbar finaly 😢

@landon.h.lloyd you said you noticed header, what’s wrong with it? Sorry for asking, but I can’t see anything with the header. It shows ok to me, that is why I’m asking. maybe your devices is just better than mine

---

<div class="post-metadata">

**Author:** ![landon.h.lloyd](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/landon.h.lloyd/32/187391_2.png) [@landon.h.lloyd](https://forum.freecodecamp.org/u/landon.h.lloyd)\
**Post date:** [November 16, 2020, 1:48am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/19 "2020-11-16T01:48:41Z")

</div>

@dieplumpe Just when I sized it down to mobile view. I couldn’t see it 100%.

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [November 16, 2020, 3:04am UTC](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346/20 "2020-11-16T03:04:31Z")

</div>

> [@dieplumpe](#):
>
> but when I change the size on the laptop I change it for all the page not only for text, isn’t it more logic?

There are two ways to increase the size of the text, using page zoom, which enlarges everything on the page, and using text only zoom, which enlarges only the text. A lot of people use page zoom, and I believe it is the default for most browsers. But for accessibility reasons, some people use text only zoom. I believe a lot of mobile devices allow you to increase just the text size. And of course most browsers allow you to do this too (Firefox has it built in, Chrome/Edge have extensions you can add).

I can tell you that I use text only zoom all the time. Usually when you use page zoom you’ll get a horizontal scroll bar rather quickly because everything is being enlarged. With text only zoom, if the developer has made the page responsive to changes in text size, then you don’t get a horizontal scroll bar, which is much less annoying. And for whatever reason a lot of sites like to set their default text size very small, so I am constantly enlarging the text size manually (and Firefox remembers where I have it set for each site, so it automatically shows the site at the increased text size I want).

Basically, as a developer, you don’t really have control over the text size the user is viewing your page at (yes, there are ways to control this but you probably don’t want to do that because it kills accessibility). So you want to try and make sure that your page looks good at whatever text size they are using.

But other than this issue, your page is very nice and good job on getting rid of the horizontal scroll bar. I do encourage you though to test anything you create at different text sizes. People like me, who are getting on in age and their eyesight isn’t as good as it used to be, will appreciate it 🙂

[Next page](https://forum.freecodecamp.org/t/my-survey-form-about-coffee-please-give-your-comments/430346.md?page=2)