Survey Form: Die Hard - The Greatest Film of All Time?

Took some initial feedback and this is round 2 of the survey form, any feedback appreciated!

https://codepen.io/learntocodequickly/pen/ExgBMoW

1 Like

Hi there,

Your form looks good, plus it made me chuckle.

A couple minor things:

  1. Your image should have an alt tag.
  2. There’s a typo in margin-bottom. Codepen has an Analyze CSS and HTML feature you can use to find errors. It’s also good to run them through a validator.
 label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin-bottom: 0r5em;
}
  1. You shouldn’t put style rules in the html. Keep all your style rules in the CSS.
  2. This last one is simply personal preference. I like subtle hover effects on the submit button. a change of color, perhaps, as just one more visual for the user.

Nice work.

3 Likes

Your form looks okay @LearntoCodeQuickly. Some things to revisit;

  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
    • The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Keep all your styling external
2 Likes

Thanks @cherylm for the feedback, I’ve incorporated and given the button some hover love.

@Roma , I’ll always use the validators moving forward now, thanks for re-iterating that, I think that’s a critical lesson that just finally sunk in with me, you’re right that W3 caught a couple of things CodePen missed, and it caught a couple of problems with the boilerplate HTML I’ve been using in Visual Studio that I’m drafting in.

As for not using any example code, thanks for the perspective, I re-did the assignment from the ground up, taking a different tact than the example form. I found an alternative for dealing with the primary container over a full-page background (e.g. not using the boolean body :before) and I avoided using as many div classes (e.g. avoiding the use of the form group and styling the inputs themselves). Learned a few things building this from the ground up for sure.

By the way, super impressive how much feedback you’re able to give on these forums, kudos!

1 Like

Good job cleaning things up @LearntoCodeQuickly. A couple of things you should revisit;

  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • With the regex you’ve put into the pattern attribute for the email input user’s are not going to be able to submit your form. The error message that pops up is not helpful. This would be a bad UX.
    • It’s not a required attribute and you probably shouldn’t use it at this point.
1 Like

Fixed those, thanks!

Good job.

Happy coding!

2 Likes

Hey, this is looking real nice. Just a few last minute suggestions:

  • When I crank the text size up to 200% the button text at the bottom of the page breaks out of the button and is hidden. Whenever you have an element with text content you want to make sure it can grow as the text size increases. Right now you have the width on that button set to 20%, which doesn’t allow it to grow wider. If you just remove that width then the button grows as needed. I don’t think there is a good reason to have had that width on there in the first place. In general, if you do need to set widths/heights on an element that contains text use em (or rem) units so the width grows as needed.
  • I think the the white background needs to be a little more opaque. I know you already have it set to 85% but I don’t think that is enough. You’ve got a very busy background and depending on where the text is on that background it can be very hard to read.
  • The label for your textarea doesn’t have a for attribute. Add an id on the textarea and then point the for attribute on the label to that id.
  • For the radio button/check box groupings, consider using a fieldset/legend combination, which will improve accessibility.
  • I’m getting a horizontal scroll bar when I narrow my browser all the way in. Granted, it doesn’t scroll much, but if you are a perfectionist like me you don’t want it there :slight_smile:
  • As I’m widening my browser, the form starts to get wider and then I reach a break point and it gets narrower again, and then it gradually gets wider again. This happens twice. I don’t think you need to use break points here to control the width of the form. Just put a max-width on it (in em units) to keep it from getting too wide and keep it centered on the page.
  • Really picky feedback here :slight_smile: The placeholder text is generally used to give the user an example of the input you want. So “your name…” and “Your email…” aren’t really providing any helpful information. In the textarea, if the information you have in the placeholder is really important then you should move it out of the placeholder so it is there permanently on the page (because as soon as I start typing it disappears). Also, I don’t think screen readers will read the placeholder text (I could be wrong about this), and if this is the case then screen reader users won’t get this information.
1 Like

Love picky feedback, it’s great, thanks!

Couple things there I hadn’t thought of (like text size 200%). I can’t replicate the horizontal scroll bar though with my devices, what are you looking at it with? I think the ::before background boolean is a better way of setting bg images and it’s because of the way I set it, I’ll re-look at it, I think that takes the problems away.

Firefox 85 on both Linux and Windows 10. It does not seem to appear with Chrome.