Survey Form Feedback USAPL

Hey everyone, back again with my second project. Tried to take what I learned from the previous project/feedback and apply it to this one. I know there is still probably a bit more I could do. I was hoping for an improvement from the first project. Hopefully this is decent enough but honestly feel like it just didn’t turn out how I expected. :upside_down_face: :grin:

Got this idea for a form because I power lift and if any of you do, and compete in usapl or alike you might appreciate this. Local meets can be very political. Judges don’t care about your opinion even if their call was in all reality a pretty bad call. The last meet I was in I saw some folks get robbed and wished there was some way for the to improve calls/judges or just the over all meet experience cause it was sour.

I was also running into some trouble with different formatting in Firefox vs chrome. Anyways thanks in advance! The critical feedback is only helping me get better.

Your form looks okay @william.cole.boren. Some things to revisit;

  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.

Some little things;

  • checkboxes for gender so user can select both male and female?!!?
  • why have other weight classes after 84kg +? If you’re giving them the choices of heavier weight classes then get rid of 84kg+
  • Do yourself a favor and Google something like “css reset code”.
  • pick a realistic age range
  • placeholder text should show the format expected, it shouldn’t be a repeat of the label
1 Like

Thank you for getting back to me! I will get all that sorted out this week . Oops on the check box but possibly PC I think? :thinking: jk nice catch.

The 84+ is the way make a distinction between is it the male or female 84 weight class. All Females over 84+ are still 84+ where as my class is just 84 and the if I gained weight could go up to 93 and so on.

I’ll dial in the age range but I will say I have seen some strong 74yos compete lol. :sweat_smile:
I’ll fix the br issues as well. I am not entirely sure what you mean by the placeholder text but I’ll scope everything again and sort it out.

I have been watching some flexbox/grid stuff by Jen Simmons and Wes Bos to tackle some of the stuff I figured run into. I think that will help clear up some of what I am lacking along with the css reset code you mentioned, what do you think? I really think take some more stuff on udemy/youtube will help me fill in some gaps I may still have after the fcc modules.

Did not know about the CSS reset code, I’ll look into that.
Thanks again for the feedback!

But I don’t think a 1yr old is competing :wink:

placeholder text is the text you put in the placeholder attribute. It’s what you have appearing in the input with a label of Name for instance

Don’t know Jen Simmons but I’m familiar with some of Wes Bos’ stuff. Very good supplemental info

1 Like

But I don’t think a 1yr old is competing :wink:
You got me! :joy:
Dang thats pretty good. Thanks again for the help. Check out Jen Simmons, shes really good. I wish I started watching more of her and Wes Bos earlier on. I should all this touched back up soon.

Still very new to js,not having done any of that section here yet and only played around on grasshopper the check box issue is proving frustrating. I have found examples exactly like what I am trying to do but can’t get anything to work.

I kind of get what you’re saying about the place holder text but I am still not fully tracking.

You don’t need to use JavaScript. I’m not sure what you’re issue with the checkbox is. Can you explain?

Placeholder text will be something like the following. (Just modifying your code)

<label for="name" id="name-label">Name</label>
<input id="name" type="text" name="name" class="validation-error" placeholder="Joe Lifter" required>

For the email, the placeholder would be something like `"

I think I get what you’re saying now, well as far as I can see the way to get the check boxs to only allow one selection at a time requires js but I can’t seem to get it to work. I made a simple text doc with a prompt when you enter the website and got that to work. As for the the code I am trying to use as an example/ template from I haven’t go it to work yet. Getting there though, pretty sure my ignorance is showing lol.

Check boxes normally don’t allow you to select just one or the other. That’s what radio buttons are for.
Maybe come up with another question for the checkboxes rather than trying to alter their intended usage.
UX when filling out a form is that checkboxes allow multiple selection within the grouped area and radio buttons allow one choice within the grouped area. To alter that on a standard form would be confusing to any user.

1 Like

Just made some changes and incorporated some of the

Let me know what you think. Seems Like stuff is mostly OK now, but I am gonna take a week or two off from the projects to learn a bit more and really try to change some parts of this guy from ok to good or great. I have started using the inspector as well to clear out some junk and figure out how stuff works. Still need to look into css code reset, read a bit but It seemed like some hate it and some love it.

Thanks for all your help! Definitely helping me fill in some knowledge gaps.

That looks better…better use of the radio buttons. Remember, users should be able to click on the label to select too.
When I was saying look into CSS code reset it was because you were noticing a diff with Chrome and Firefox. Each browser has a difference in how they render. I was suggesting the code reset, something simple like the following just to get things evened up…

* {
  margin: 0;
  padding: 0;

You’re doing good. And this is one way to learn, trying different things and seeing what happens instead of racing to finish. Keep up the good work. I look forward to seeing what you come back with.

1 Like

I made some more edits after taking some time to learn a few things. I think I am moving in a better direction now with the layout, just gotta make a few more edits and should be good to go.