Email Domain Datalist Helper

What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the "forgot password" feature doesn't work, and there is a lot of frustration and finger pointing.

Can't we help with that?

I had a really basic idea to suggest common email domains with a <datalist> suggestion dropdown. Essentially like this:

Datalists like that can be attached to any text-y input and they essentially provide suggestions. The user can still type in whatever valid value they want. It's like a cross between a <select> and and <input>, I suppose.

Here's how it works.

The Markup

Perfectly normal HTML that will work whether or not is supported or our JS runs or anything.

Inserting the datalist with JavaScript

Datalist is an HTML element, but we can't put it in the markup straight away because we don't know what to put in it yet. The options we put in there will need to have the first part of the email address in them. That's JavaScript territory, so we might as well only add the datalist when JavaScript runs.

Building the datalist on-the-fly

Notice in the above code I slipped in a little bit where I split the value that we pulled out of the input at the @ symbol. That allows us to pull out the part of the email address before the domain. For instance, the "chriscoyier" part of "chriscoyier@gm". Then we pass that over to a new function called addDatalist. Now let's use it:

Remove the datalist if we aren't ready for it

As a final bit of cleanup, we should remove the datalist if the value in the input doesn't have an @ symbol yet. Even if the user originally typed it but then backed up. We can handle that in our testValue function. We either update the datalist with the latest and greatest, or we remove it all together:

Final Demo

A More Robust Solution

For the record, I'm not absolutely sure the datalist approach is a great idea. It would require some real UX testing to see if it's actually helpful. It may be hurtful in the form of user confusion. I am more sure that some form of email domain checking is a good idea.

There is an open source project on GitHub called mailcheck.js that looks pretty good.

Share On

Comments

I’m not sure which I like better, but I have seen the use of the datalist before…can’t remember which site but (from an advanced user perspective) I like the list. From a developer standpoint, the “Did you mean…” seems easier and much cleaner.

I like it. I think that a solution to the mistyped emails would definitely be very helpful but I agree with your last comment that the ‘Did you mean x@x.com?’ solution may be better. It’s a bit less obtrusive, and less shocking to the user.

If a layperson was signing up for a brand new site and it provided them with a list of emails and they recognize some of them as addresses they have used, it may bring up privacy concerns (even if there isn’t an actual privacy issue with this solution.)

So, to put it another way. If you have 1,000 signups to your site per month, 10 of them will fail, perhaps 5 of them will contact you in frustration… or about 30-60 minutes per month of support, depending on how difficult it is in your CMS to change the email address.

If you have 10,000 signups, it’s 2 days of work.

Either way, it seems like the few hours it takes to research and implement this would pay off in a matter of weeks or months. If you already have a user base, taking a look at the most common domains would make this technique a whole lot more usable. In fact, you could go one step further and automate monthly maintenance, checking domains used recently to populate the list.

I think it will cause some confusion since a dropdown like that is reserved for the browsers native functionality of displaying recent form history. And you’d have to disable that which is not only confusing but annoying also.

Autosuggest is used in various forms, particularly by google. I don’t think you’d find much confusion. However, if you’re really worried, you could visual distinguish it as a suggestion and the word “suggestions” somewhere in the list.

I’m also curious how these solutions might compare to the ubiquitous pattern of requiring users to enter their email address twice (as a way of trying to reduce mistyped emails). I personally prefer these.

Seems like a pretty good technique, however not sure if I’m the only that noticed this or not, but in Safari on Mavricks the menu does display after typing ‘@’ think it has something to do with the new autofill passwords/usernames.

I guess it’s like a built in solution to the problem, only allowing you enter a valid e-mail address you have entered on your mac. It will definitely be nice on older systems that don’t support such a feature.

I don’t see how this is intrusive when it’s basically the exact same behavior that all browser already have: A dropdown appears on form fields that are similar to ones you have filled out before, or if you’re filling out the same form (like the Commens form here*).

Also, this is exactly what we know as “Live Search” introduced by Google several years ago (I’m not talking about “Instant Search”, that’s something else).

And I don’t see anyone on the web complaining that the above two features are intrusive, and this idea from Chris’ piggy-backs on the same concepts.

I do see one technical issue and one potential usability issue though:

The technical issue is that this script did not work for me in my iPhone 5 with iOS 6 (and I plan to wait even longer before I give in to flat). Can anyone confirm in iOS 7?

The potential usability issue I see is that users may feel apprehensive seeing this feature “mysteriously know” their e-mail address before they’ve even completed it. Just saying. Which in this case, maybe mailcheck.js could have an advantage since it happens after the user has finished. Again, just saying.

I was also wondering: Every time I’m going to post on CSS-Tricks.com I need to fill out the fields at the top and since I’ve filled them before then Firefox is showing me the dropdown with the emails I’ve used in the past, so: What happens when these two features are combined, the browser’s dropdown and the script’s dropdown?

I dunno about you, but speaking as a user, I always just copy/paste the second email (Which totally defeats the purpose.) And in the few situations where that ability was disabled, it absolutely infuriated me.

Interesting idea, although I wonder if it might increase the risk of people using other email providers than the big ones accidentally autocompleting to, for instance, a gmail address.

Some nitpicking with the code:
It seems you are rebuilding the datalist on every keystroke after @ which seems a tad wasteful. Might be cleaner to remember the old “value” (the part before @) and only rebuild when it has changed.

Is it just me who thinks the more “ways” we have to do something, the harder it seems to actually decide on which one to use?

I can see (mainly) pros and (some) cons for all three methods; dual email fields, datalist and “did you mean?” so, apart from trying to second-guess what your “average” user may or may not find “confusing” I guess it boils down to just picking one and going with it.

NEAT, as usual, Chris! I might also prefer the »mailcheck.js« style after i tested it out. Google Chrome gives me an autocomplete for an <input type="email">right away. Then the autocomplete get’s suddenly replaced with the huge list, kind of confusing. So maybe the browser autotfill has already solved this enough? But again: great small idea!

We take the “did you mean x?” route at Vimeo. MailCheck looks like a great library, but like the docs state, you should absolutely consider supplying your own domain suggestions based on what your site visitors most often use. The downside of this is that you can find yourself doing a lot of updates.

Yahoo and Hotmail’s love of multiple TLDs have been the biggest issues so far, so I just recently created a separate loop to populate my list with all possible permutations.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.