Best practices for a hidden login form on a home page that 1Password will recognize?
Hi, I'm building a website with a login form that appears as a pseudo "pop up" (layer) on the home page when clicking a "log in" button … but I would like to be able to have 1Password recognize that there is a login form there and be able to quickly sign in.
Right now, my login form is "display:none" around the whole form. If I first show the form, and then invoke 1Password browser extension (on Safari), the form fills in right away. But if I don't show the form and invoke 1Password, it doesn't auto-fill the form. It might recognize that we're on the same website, allowing me to pick it from the menu that pops up, but really I want to just fill in the form immediately even though it's hidden.
Looking around, I've found some posts where you indicate what the plug-in does to try and fill in a hidden form, but I don't find any specific suggestions on what we ought to do. Can you tell us what are the best practices to having a form be hidden, but findable by 1Password?
Unfortunately the website is not live yet so I can't hand the URL over to you to test. (Though I suppose I could mock up something similar if needed.) But hopefully you can just tell me the "rules" of what I ought to do. :-)
¡Muchas gracias!
Comments
-
Since version 4.2 of the extension, 1Password will not fill hidden fields. This was done because most sites put application specific data in hidden fields (something like a Session ID) or fields that have no meaning in the current context (Having your registration and login on the same page and hiding one depending on what the user selects); guessing which hidden fields should be populated was becoming very hard.
Also, we try to emulate what a normal user would do, for compatibility mostly and a normal user can't modify hidden fields.
Hope that answers your question, please let me know if you have any other.
Thanks and have a nice day!0 -
If I understand @frickinlaserbeams question correctly (I have wondered the same thing myself)… I think this is not about filling in
<input type="hidden"…fields but rather input fields which are hidden because their parent element is set todisplay: none;or some other CSS property that make them non-visible to the visitor. E.g. having a login form in a drop-down or in a modal overlay like this discussion forum uses…What are the best practices for making forms like those 1P-ready?
0 -
@Niklas we treat them both the same.
Hidden for us is hidden for the user, whether it's because it's an input of type hidden or it's hidden with CSS. For 1Password to fill you must have the fields visible.
0 -
I've noticed that, which is why I am asking how password forms such as the very one you use here can be made compatible with your application's default setting to automatically fill in the form and submit it. Live like you learn and all that. :)
0 -
Just click on Sign In before filling. It's unfortunate that this forum can't be used with go and fill. It should probably have always visible fields.
Edit: forum context
0 -
I know that you know very well that a web site owner can't do that for the visitor, the question is why do even say such a thing? There is an undisputed fact that 1Password has a default setting and a button that says "open and fill" as a default action, if you don't want to contribute answers to this question then that's fine, but as someone who has built a site or a dozen where some has had login boxes, just as your very own, I am asking an honest question: How do I make sites such as discussions.agilebits.com compatible with 1Password's default behaviour?
0 -
You have edited your post. Now my previous post looks a bit odd. Before my post was made all you had written was:
Just click on Sign In before filling.
0 -
Our recommendation right now is to show the login form one way or another, whether it's to have a dedicated login page or make it visible on one's main landing page. We want to avoid a lot of issue with filling hidden fields, such as having registration fields and login fields on the same page (or even on the same form!) and filling the wrong one.
The forum software we use here (Vanilla, for the record) is of course an exception, but we chose it for its many other advantages. Go and Fill is available if you set the URL to be this dedicated sign in page. Not optimal, I know and I must say that I forgot about it, I'll see what I can do about our forums.
0 -
Let's say I work as a web developer at some of these places (I obviously don't), can I do nothing to assist my users who are using 1Password's default settings?
The Verge: (modal)
Ars Technica: (modal)
Hulu: (modal)
Nike Plus: (hidden/drop-down)
Stack Overflow: (hidden/accordion-like)
Engadget: (modal)
Threadless: (modal)
Good Old Games: (modal)
Instapaper: (modal)
My point being that modals and otherwise hidden login fields are extremely common and I bet they will be even more common now that JavaScript frameworks mature and help developers create more and more rich web applications. Therefore having a default setting in 1Password that is at odds with these might not the the most optimal solution.
So… Instead of having to completely refactor these sites login flow, would it be possible to make minor changes to these login forms so that 1Password will fill in the form and submit it properly?
Edit: Forgot two large ones: NY Times (modal) and Financial Times (modal)
0 -
Hi @Niklas,
Thanks so much for taking the time to discuss this issue! I know that these modal windows for Logins can be a bit frustrating. As Phil says, the best advice that we can offer to web designers at this time is to make the sign-in fields visible for users.
Many websites already have alternate signin pages with visible fields. This forum, for example. I use http://discussions.agilebits.com/entry/signin . It works perfectly and completely automatically. You might want to check to see if any of the sites you list above also have an alternate page. :)
0 -
Unfortunately you did not fully consider my statement/question, maybe because I phrased it badly. You can't expect the entire world to do stuff the way you want it, but you can aid the ones that use your tools. Therefore I asked the following: Can I as a web developer add something to the form that either allows 1Password to fill in modals or have 1Password redirect to the login page?
More sites with hidden login forms, some have dedicated login pages as well, but the default login behaviour is a hidden modal:
Home Depot: (modal)
Disney Store: (modal)
Indiegogo: (modal)
Sprint: (dropdown)
Wikia: (dropdown)
AirBnB: (modal)
Dropbox: (modal)
…let's not keep going…
We are at a point where the default behaviour of your app is at odds with how the world works. I make login forms and I know (and have data to prove it if you need) that neither usability nor accessibility is hampered by modals. You may wish that you lived in a world where light boxes on web pages did not exist and a world where accordions and drop-downs where a thing of the past, but that is not the Internet of today.
Because I make login forms on most services I build I want to continue to give my non-1Password using visitors the same usability and experience as my 1Password-using visitors. That is why I want to help 1Password to fill in my modal login forms. How can I signal to your application that it is OK to fill in data and submit my form even though it might not be visible to the visitor?
I want to support 1Password's default behaviour! But I also understand that the way your default behaviour currently works is not compatible with major parts of the internet and I want to make sure you understand.
0 -
Hi @Niklas,
As always, your feedback here is much appreciated, and we are taking your opinions under advisement.
You can't expect the entire world to do stuff the way you want it, but you can aid the ones that use your tools.
We're certainly not trying to change the world and abolish modal views here. We appreciate that you are considering 1Password users in your web design.
Because I make login forms on most services I build I want to continue to give my non-1Password using visitors the same usability and experience as my 1Password-using visitors.
Here's the experience for non-1Password users with a modal sign-in page:
- Type in the URL
- Click the sign-in button to engage the dropdown
- Type username
- Tab/Click next field
- Type password
- Hit 'Enter'/Click 'sign in' button
With a modal sign-in page, the 1Password user's experience is this:
- Type in the URL
- Click the sign-in button to engage the dropdown
- Use ⌘\ ( Command- \ ) to fill (and submit, if desired) user information.
If you're looking to provide an equal user experience for 1Password and non-1Password users, neither user can fill a form field that is not visible ... but 1Password users will have an easier experience, simply by virtue of the keyboard shortcut. ;)
Therefore I asked the following: Can I as a web developer add something to the form that either allows 1Password to fill in modals or have 1Password redirect to the login page?
As Philippe-AG mentioned above, filling in modal windows is not currently possible. And he should know, he's one of the filling gurus responsible for our browser extension. To make filling easier for 1Password users who visit the sites you build, at this time I would have an easily accessible dedicated login page that users could find and add to their 1Password entry. (Some sites seem to make the alternate login page rather hard to find.)
I hope this helps!
0
