Survey form feedback, everyone invited!

Code Feedback
1

I’m very satisfied with how this turned out and would like some feedback, all of it. The good, the bad and the ugly… well maybe just the good and the bad. :slight_smile:

1 Like
2

Hi @redwagen,

Great job. This looks good and responds well.

Only few small things.

  • You have the opening/closing body tags in your HTML. This is already included in the CodePen boilerplate.

  • I’ve recently learnt that JavaScript should be placed at the bottom of your HTML - just above the closing body tag (if it was a live site and showed the body tags). This is so your page loads before the JS.

  • Just on an aesthetic note, I would add 5-10px padding to your input and textarea. Just to give some space between the text and page. Also the font-size is different in your textarea compared to your text input boxes. I would keep them all the same.

But well done on this!

3 Likes
3

This is very good.
One thing I want to point out that. Dont use colon(’:’) after label name because the text area is in next line(In my mobile). You can remove the ‘:’ and make the input in next line.

1 Like
4

Hello @redwagen. Great job! I like your survey form, but a few suggestions are recommended:

  • Can’t you add an opacity property to your background image and give it a less value like 0.5? It’s a little bit distracting.
  • Your HTML code has many errors. Run your code through the W3C validator and solve the errors. As you’re copying and pasting your code from CodePen, you can ignore the first three errors.

Anyway, very good form. Wish you best of luck!

1 Like
5

It’s good to load your JavaScript resources at the bottom inside the body tag (for better page load time), but in CodePen, I think it is not necessary. The existing position of the script tag is fine.

Thanks.

1 Like
6

Welcome to the forums @redwagen. Your form looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Change the cursor to a pointer when hovering over the submit button.
  • Remember the DRY (Do not Repeat Yourself) principle. You have this line font-family: tahoma; multiple times throughout your CSS. Define it in once.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
7

Thanks! I’ve made some adjustments based on what you said. :beers:

8

Good call, it looks cleaner now. :beers:

9

Thanks for the feedback. I’ve adjusted the background and adjusted the container opacity. You were right, I feel like its easier to focus attention on the form itself now.

1 Like
10

Thanks for the feedback. I’ve been able to fix all but two HTML errors, updated the cursor and fixed the font-family redundancies. I cannot figure out how to get the same effect as line break using CSS.

11

Hi @redwagen, good job so far.

  • Review this lesson for creating checkboxes . It’ll be the same for the radio buttons. Pay attention to why and how the for attribute is used.
  • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

EDIT: Something else you can look into for grouping your radio buttons and checkboxes (though it’s not limited to just those two) is the fieldset element. It’s handy in a form.

1 Like
12

Is this as simple as wrapping each label inside a div?

13

Yes. Although I’m thinking it’s a rhetorical question and you’ve already done it. :wink:

1 Like
14

Not quite, I know for sure now though. Thanks so much for your help with this!

15

You’re welcome. Glad to help.

Happy coding!