# Survey Form - feedback wanted

**URL:** <https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308>\
**Category:** I Built This\
**Created:** [July 31, 2019, 5:36pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308 "2019-07-31T17:36:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![VincentQDo](https://avatars.discourse-cdn.com/v4/letter/v/e47c2d/32.png) [@VincentQDo](https://forum.freecodecamp.org/u/VincentQDo)\
**Post date:** [July 31, 2019, 5:36pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/1 "2019-07-31T17:36:59Z")

</div>

Hello everyone,

I finished my survey form project and would love some feedback from you guys.  
[https://codepen.io/vincentqdo/full/LwLVrK](https://codepen.io/vincentqdo/full/LwLVrK)  
Thank you so much for checking out my project.

Have an awesome day!!

---

<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:** [July 31, 2019, 9:12pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/2 "2019-07-31T21:12:39Z")

</div>

Hi @VincentQDo,  
Your page looks good. A couple of things you may want to revisit;

- codepen only expects the code you’d put within the `<body> </body>` tags in HTML. (No need to include the body tags).
- codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
  - You have the color incorrectly specified when hovering over submit

- make it so users can click on the labels of the radio buttons & checkboxes too
- change the cursor to a pointer when hovering over the Submit button

---

<div class="post-metadata">

**Author:** ![tlc35us](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tlc35us](https://forum.freecodecamp.org/u/tlc35us)\
**Post date:** [July 31, 2019, 9:17pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/3 "2019-07-31T21:17:57Z")

</div>

Test every label to make sure they work.

Invalid color name `#white`

Duplicate `#comment` selector

#email-label` used more than once. IDs should be unique.

Gender is not a label. Male and Female are labels.

Realistic user age range would be nice.

“Best way to contact you:” is not a label. Email, Phone, and Mail are labels

Label for “Which option best describe you:” has the wrong value.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [July 31, 2019, 10:45pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/4 "2019-07-31T22:45:09Z")

</div>

I would increase the font size and give the inputs more width. I’d probably also move the social icons to the bottom above the footer and make `.footer` an actual footer element.

---

<div class="post-metadata">

**Author:** ![VincentQDo](https://avatars.discourse-cdn.com/v4/letter/v/e47c2d/32.png) [@VincentQDo](https://forum.freecodecamp.org/u/VincentQDo)\
**Post date:** [August 1, 2019, 3:31am UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/5 "2019-08-01T03:31:07Z")

</div>

@Roma Thank you for your feedback, I changed the button on hover for the submit button, also made the labels for radio and check boxes clickable. Thanks for pointing out the analyze tool.

@tlc35us Thank you for your feedback, good catch on the duplicate selector and id. I changed the age range to 8-125 (I figure people live long and kids use computer young nowadays haha). I also fixed the labels and they are now clickable. Also fixed the values for the things you said. Thanks again.

@lasjorg Thanks for the ideas, I really like the social buttons at the bottom, plus the footer element make the html easier to read.

---

<div class="post-metadata">

**Author:** ![brandon\_wallace](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brandon_wallace/32/198757_2.png) [@brandon\_wallace](https://forum.freecodecamp.org/u/brandon_wallace)\
**Post date:** [August 1, 2019, 12:02pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/6 "2019-08-01T12:02:30Z")

</div>

@VincentQDo  
Here are some improvements/suggestions you can do.

- Add box-sizing to your input fields. So the fields stay in the parent div.

```auto
.text-input {
  box-sizing: border-box;
}

```

![survey](https://global.discourse-cdn.com/freecodecamp/original/3X/0/5/05d02edf25f4d94b02f2d26c3ff6c6a6df173d66.jpeg)

- Add another media query for smaller screens.

```auto
@media only screen and (max-width: 450px) {
  .text-input {
    width: 98%;
  }
  #comment {
    width: 90%;
  }
}

```

- Use font-family: inherit on the textarea element.
- Decrease the width of the margin in mobile view of the page outline.

```auto
.page-outline {
  margin: 0% .5rem;
}

```

---

<div class="post-metadata">

**Author:** ![VincentQDo](https://avatars.discourse-cdn.com/v4/letter/v/e47c2d/32.png) [@VincentQDo](https://forum.freecodecamp.org/u/VincentQDo)\
**Post date:** [August 1, 2019, 12:44pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/7 "2019-08-01T12:44:07Z")

</div>

Thank you for your feedback. Adding another query for smaller screens and reduce the outline as you said, made it look much better on the phone.

---

<div class="post-metadata">

**Author:** ![ConnerOw1115](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/connerow1115/32/326955_2.png) [@ConnerOw1115](https://forum.freecodecamp.org/u/ConnerOw1115)\
**Post date:** [August 2, 2019, 12:00am UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/8 "2019-08-02T00:00:39Z")

</div>

Really nice job!  
I love the colors and the layout a lot!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 1:31pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-wanted/300308/9 "2021-02-06T13:31:27Z")

</div>