Survey Form with Monty Python influences

Survey Form with Monty Python influences
0.0 0

#1

I’ve been having some fun with this:


Survey Form Feedback - Become an Overwatch Hero
#2

Looks very great! very good.

I’m going to use this as a good layout for other great people trying to come with a good layout for forms. Thanks.

The only issue is the red border color by default at the page load! I assume it’s supposed to be red(warning) when user wants to submit the form, but some fields got invalid values.

Also please use no-pixel unit, relatives are much better as you used in many rules.

Keep going on great work! very good.
happy programming.


#3

Thanks for the feedback NULL_dev.

The red border on required fields is not what I was going for, but I’m new to using HTML5 validation, so I have yet to delve into how to tweak the behaviour so that it works as I expected.

Agreed, I should go over the units I am using and use rem instead of px.


#4

I found an article about the :invalid pseudo class that notes the problem with the default browser behaviour and some workarounds.


#5

Hilarious content. Thanks for making my day. A great form too!


#6

NULL_dev, thank you for the helpful comments. I have added some JavaScript to add a class of submitted to the form when the Submit button is clicked. Then the styles for invalid fields are activated. This is based on this advice from StackOverflow:

Except that I used some vanilla JavaScript rather than require jQuery.

document.getElementById("submit").addEventListener("click", function( event ) {
  document.getElementById("survey-form").classList.add("submitted");
});

Changelog

  • Add javascript to add submitted class to form
  • Show background image only on large screens
  • Change units from px and rem to em
  • Add white background behind Octicon chevron down icon
  • Add left border to chevron down icon
  • Change color of Octicon chevron down icon
  • Wrap label elements around checkbox and radio inputs
  • Display checkboxes and radio buttons as block elements on small screens
  • Move bottom border to top
  • Adjust styles for invalid field borders and box shadows

You can view the commits for the Responsive Web Design Survey Form project on GitHub:

If you have any other suggestions, please let me know. Thanks.


#7

O YES, you really work very professional, neat and cool.

There is no doubt you will be one great UX/UI developer soon, which I believe already are.
Always follow your passion, no matter if back-end looks and sounds much harder and pro than front-end, if you like front-end, just try to keep it awesome.

Just keep going on great work, very good! Great developer.

Happy programming.