I want to add more to my Survey Form

Code Feedback
1

I have made this form today as a part of my responsive project.
I am not sure about the color combination though but have tried my best.
What I want to do is to add a transition effect to the border color on the input element that is active Input area animation but I am not being successful in doing so.
All suggestions and reviews will be helpful.
Survey Form Codepen.io

1 Like
2

https://www.w3schools.com/css/css3_transitions.asp

try to read here and try to do it by yourself

i think you already know that but if you want hints your css will need to target :focus state of the input form.

try removing the textarea:focus transition css and see what happens in the codepen you linked

https://codepen.io/lehollandaisvolant/pen/aNQNjx?editors=0100 <======== this one

1 Like
3

Can you give a review also?

1 Like
4

Some suggestions:

  • Use a lighter font color for the text inputs, I can’t really read anything that I’m typing (on Chrome at least)
  • Refactor the input labels so you have one label per input and distinguish the star with a span element
  • I’m not familiar with FCC, but the difference between School Student and UG/PG Student is unclear
  • Capitalize every word in ‘Gitter help rooms’
  • ‘How likely is that you would recommend freeCodeCamp to a friend?’ is wordy (and you’re missing a word), maybe rephrase it to: 'Would you recommend freeCodeCamp to a friend?

I’m not much help on the animation department but those are my tips! Nice work!

1 Like
5

Thanks a lot for the suggestions. Would work on them!

6

Hi, @_govindrathi, here’s my feedback…

  • first off, in codepen there are sections for HTML, CSS and JS. For the HTML section codepen exects you to put in that info that would go between the <body> </body> tags. The CSS section would be that which would be between the <style> </style> tags. I mention this because codepen also provides validators for each section. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link. You have a couple of minor issues you can clean up in each.

  • leave the <script> element so you can see how you’re doing with the user stories. Your survey form is meeting 7/17 of the user stories. In case you need it again, add

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  • when hovering over the Submit button, change the cursor to a pointer

After you’ve cleaned it up a bit let us know so we can give you feedback again.

7

Updated the link check now.

8

It’s looking better. A few things to look at;

  • All of your checkboxes, except one, can be selected by clicking on the label. You missed the <label> tag for ‘Back end projects’.
  • Rearrange the label tag in the radio buttons section so the user can select the label there too.
  • Run that ‘Analyze’ link. There’s a misspelling that’s identified, there’s an id that you’ve used more than once (id’s can only be used one time), etc
  • Change the cursor to a pointer when hovering over the Submit button
  • This is minor. If you’ve ever filled out a form on-line, required fields are marked with an asterisk (*). If the field isn’t required, don’t mark it with an asterisk.
1 Like