Feedback please - Apocalypse survey form

Hi Campers,

I had great fun with my tribute page and decided that just because forms can be boring doesn’t mean you can’t have fun with them either so I’m ready for some feedback on my survey form please.

As forms are probably a necessary evil in a developers career I would really love some feedback if there are any best practices for forms that I missed with my project?

Thanking you

5 Likes

Love it, great concept! The “this vs. that” toggles look really cool too.

Mostly it looks like everything’s on point, but a couple of nitpicks:

  • The font is difficult to read, especially for body text at small sizes. I initially misread “1” as “4”. In the title, “SURVIVED” reads like “SUTZVIVED”.

  • Your text-transform: capitalize on the name field is not reflected in the underlying data, only the presentation. You’d need to use JavaScript to transform the data before sending it to the server, and you’d need server-side validation too if you wanted to prevent users from bypassing it under any circumstances.

    However, enforcing any type of validation on names is almost always a bad idea. In the case of capitalization, it would break for perfectly valid names like Vincent van Gogh. There’s a great article called Falsehoods Programmers Believe About Names that goes into more detail about this.

  • It’s great that you’ve used abbrs for the asterisks to clarify what they’re for and make them accessible; however, an asterisk usually means “required” (and you’ve also included the required attribute on the corresponding inputs). That doesn’t just mean “we really want to know”, as the titles state; it means you can’t submit the form if you haven’t filled in this field.

  • Your span.crossthrough should really be a del, as it represents deleted text.

  • The chk_covet elements should really be groups of double radio buttons, not single check boxes. Though they represent binary choices, the binary choices are not truthy vs. falsy. Compare:

    • “Do you want to receive our newsletter?” (yes/no, i.e. a check box)
    • “Do you want to a) receive our newsletter or b) get pooped on by a seagull?” (choose a or b, i.e. two radio buttons in a group).
  • Press me” and “Press me” are not descriptive labels for buttons. They should really be “Reset” and “Submit” or similar.

2 Likes

@MazontheMoon Wow!!! your survey form and tribute page look super cool! I can tell you put a lot of work into them. I dig your style a lot. You are very creative.

On the form I suggest that you widen the elements in mobile view. I shrunk the width of the form to 320px wide and a saw that the margins are a bit big at that size. In mobile view I try to use the maximum amount of space since there is so little of it. Here is a screenshot.


Some phones with small screens such as the iPhone 5 are still in usage, so I start my designs at the smallest screen size possible and then I expand outwards. My survey form uses 96% of the width in the mobile view.

1 Like

Hi @lionel-rowe and thanks for taking the time to look over my page and the nit-picking which is exactly what I was looking for :nerd_face:

  • Looking at it with fresh eyes the font for the main text whilst looking like chalk which was the effect I had in my head was hard to read so I have changed it now.

  • I know this was not something I saw in any articles when I was reading up on designing forms so I kinda made it up myself and was not sure if it would be common practice or not but it is a personal bug bear of mine through my day job that people do not capitalise their names any more (going back 10 years ago this wasn’t a problem but currently I can honestly say that for around 30% of the contact details I see filled in on our webforms people are not capitalising and it annoys me almost as much as people saying May 6 instead of May 6th…okay…mini-rant over :laughing:) However, I do take your point…and liked that article :+1:

  • I have seen a few forms on the forums and whilst some were very nicely coded and laid out etc. I found them a bit boring to be honest so the “We really want to know” (my original draft had “I’m “not” going to sell your info”) and the "Press Me"s was more just having a bit of fun but I do understand how it would not be suitable at all in a real world form.(oh, the strikethrough was more to add to the overall chalkboard effect I was going for but I hadn’t come across del before so cheers for that)

  • I admit it would have been so much easier to do the ‘chk_covet’ section as radio buttons rather then the check boxes (although I did get a lot more comfortable using position after it) and if it wasn’t for the fact that the test user stories required to have a checkbox I would have (I felt the form was busy enough now without adding another section just to use up a checkbox)

Appreciate the feedback :smiley:

1 Like

Hi @brandon_wallace and thanks so much for your comments which have really made my day :partying_face:

Lovin’ the look of your form too :clap:

I see what you mean about the smaller screen sizes and will work on fixing it, thanks :smiley:

1 Like

The tribute page is really nice! I love the new, abstract way you did it!
the surver form is pretty cool. the only thing I’d suggest is to change the text font to Luminari.

Hi @ConnerOw1115 and appreciate the comment and will check out that font :smiley:

Hi again campers :wave:

I’ve taken a break for the last month or so to work on something else but I’ve come back to my survey form and tried to take on board the feedback I’ve received previously so I’ve made a few changes and would love some feedback if there is anything else I can do to either make the look or design more accessible, or any other coding best practices I’ve missed or misunderstood?

Full page view of my form
Pen view of my form