ElkArte Community

Elk Development => Theme development => Topic started by: Spuds on July 13, 2021, 07:39:29 pm

Title: Basic Form Testing
Post by: Spuds on July 13, 2021, 07:39:29 pm
Looking to improve some of our basic forms, notably login and registration and others where its userid password email input.

Our login form is not so bad, the field description is to the immediate right/left of the input box and the width is restricted so that description does not wander to far.

The registration form is much wider so the distance from description to the input box can be pretty far, which is not the best human factors / usability.

So I've tarted them up a tad, using various concepts from the web and some semi material design with how the placeholders act / position.  The Login (https://elk.spudsdesign.com/index.php?action=login) form is more compact with a register button as well so you don't have to go hunting.  The forgot password (https://elk.spudsdesign.com/index.php?action=reminder) is now located with the password field.

The Registration (https://elk.spudsdesign.com/index.php?action=register) form follows the same guidelines, just trying to clean it up.  Also we currently have it optional to enter your display name during registration, I really see no need to make that an option, I think it should be required.  To often I see display names as the email address and other ways to "leak" info.  So I'm thinking to make it mandatory.

Thoughts and comments welcome.
Title: Re: Basic Form Testing
Post by: radu81 on July 14, 2021, 08:32:50 am
I like it, simple and clean. Good choice to put a Register button on Login page.

As for displayed name I never used that, I keep it disabled.
Title: Re: Basic Form Testing
Post by: Spuds on July 14, 2021, 03:54:49 pm
Thanks!
As for displayed name I never used that, I keep it disabled.
The default is that the display name is set to their userid ... which is not the ideal.  I could add the field to the form and auto fill it with the userid as well.  That way a user could change it if wanted.  Not sure.

I should have noted in the first post, all of that placeholder text that moves in / out of the text boxes is done only with CSS, not JS is used :D