I spent a little time today reworking my customer input form on the West Wind Web site for the West Wind Web Store in order to make it work better with Auto-Fill functionality from the Google and MSN Toolbars. I’d written about this before a while back and kind of made due with a few shortcomings because of the limited support the Google bar has for text areas.

 

My issue is that my address field is a multiline memo field, rather than two individual lines that Google (or the MSN Bar) prefers. While it would be easy to change the form to use to simple text fields, that really doesn’t capture all the data input scenarios – I have lots of foreign customers especially who have those monster 10 line addresses. Yeah, you know who you are you guys (and gals) on that little island in Europe <g>…

 

In order to capture all that I had been using a single text area, which from a UserInterface perspective for the user is optimal, but which didn’t work with the Google pre-fill mechanism. This meant if you auto-filled the form the address was not filled – all the rest of the form was, but not the address fields. Not quite so user friendly.

 

So, today I just changed things around a little bit by adding 1 single line text box and then for the second address line using a textarea field that can still contain those monster addresses. The form below can be found here:

 

http://www.west-wind.com/wwstore/profile.aspx

 

 

This isn’t the prettiest of solutions but I suspect it’s more practical as it lets people fill their data more easily without having to go back and type data into the form. Of course the second field will still not fill in, so if the user’s address is a long one they’ll still have to type the second part – so it’s still a compromise of sorts, but it hits the most likely case.

 

MSN Troubles with the Phone Number

I also installed the MSN toolbar to check things out with it and oddly enough it had problems with another part of my form. For some reason, the phone number will not fill.

 

 

Notice that with MSN the phone number will not fill.

 

Now, I’m not sure what the heck these toolbars are keying off. It appears that they are looking at labels and field names to do their thing and although both claim to be using the ECML spec, which defines long fieldnames for fields etc. The spec can be found here:

 

http://www.ietf.org/rfc/rfc3106.txt

 

Just for kicks I tried using those field names and sure enough it still doesn’t work on the Phone field.

 

I took a quick tour of a few big e-commerce sites like Amazon, Buy.com and a few others and none that I went to use the above spec, so the toolbars are actually using other means to sniff this data out and find the input fields.

 

More interesting though, I compared my form that doesn’t with MSN with one from Amazon which does, and for the life of me I don’t see the difference. I even went as far as changing the field name of the phone field and I see 0 difference.

 

I’m not quite clear what the color coding above means either. I suspect that the toolbar is finding its keywords in some other place and not making the connection to the field, but I even went through and renamed the static text to make sure.

 

Here’s the relevant HTML.

 

<tr>

  <td  valign="top" align="right" width="126">Email:</td>

  <td  valign='topwidth="*"'><input name="txtEmail" type="text" value="rstrahl@west-wind.com" maxlength="256" id="txtEmail" size="55" type="text" /></td>

</tr>

<tr height="25">

  <td  valign="top" align="right" width="126">Phone Number:</td>

  <td valign='topwidth="*"'><input name="txtPhone" type="text" value="" maxlength="15" id="txtPhone" size="22" type="text" /></td>

</tr>

 

What’s even odder about this whole thing is if I move the row with the phone number up higher on the form it works and another field will end up ‘handicapped’. Basically no matter what the last two fields on the form are not fillable showing up in the dark orange.

 

This makes no sense…