1007176 - Implement requestAutoComplete on donate.mozilla.org

Status: RESOLVED FIXED

(Websites :: donate.mozilla.org, defect)

Description

[Bobby Richter [:secretrobotron]]

requestAutoComplete has the potential to further optimize flow on donate.mozilla.org. Easy to implement in JS or HTML: http://www.html5rocks.com/en/tutorials/forms/requestautocomplete/

Looking to Andrea to coordinate implementation details. Happy to lend a hand in putting together code snippets.

Will do SA kickoff.

Comment 1

[Bobby Richter [:secretrobotron]]

Some tips from Evan Stade @ Google:


1 - adding autocomplete attributes[1]. You can and should do this regardless of requestAutocomplete. This helps the browser fill in the fields even for browsers that don't support requestAutocomplete (although it's also a requirement for requestAutocomplete).
2 - hide those forms! When you detect that rAc is available, you can hide the address and CC info forms. The user still gets to see all the data they're sending to the page in the rAc dialog; no need to show it to them twice. The resulting page is smaller and cleaner :) The text about the privacy policy might need to change to continue making sense in this new formless world.
3 - If a user selects MC or Visa (or neither), rAc should trigger when the user presses "Donate now". If a user has selected Paypal, go through normal paypal flow.
4 - I can't tell if there's a confirmation page, but we recommend having one after the rAc dialog is done.

TODOs:
5 - Soon, Chrome will support figuring out which card types a site supports. Right now it doesn't, so you may get the wrong kind of card back (shouldn't happen often though, because the cards Wallet provides are always MC). You can handle this in the same way as if a user typed in an unsupported card (show the forms + error message).
6 - Soon, Chrome will support specifying a transaction amount. Currently, Wallet cards won't work for transactions over $2k, so you might not want to use rAc in the >$2k case.

Comment 2

[Andrea Wood [:andreawood]]

(Moving comments from technical launch bug #1007181 to this bug)

Quick feedback after initial review of the AutoComplete feature -- It was added to our default -- on desktop (Mac):

I just tested the form and autocomplete, and it’s definitely not making the experience smoother! 

I took screenshots using Chrome on my Mac Air laptop.

**Screenshot 1: https://www.evernote.com/shard/s202/sh/80b33172-df06-470b-83c0-5759bd24378e/ddf87d0819a48ef3b0a2859a6574b808/deep/0/Support-Mozilla.png
>> When I dropped my cursor into the first name field, this box popped up. It's overwhelming and likely to reduce conversion (esp. since it pops up on a browser, instead of mobile-only).

**Screenshot 2: https://www.evernote.com/shard/s202/sh/50f0adc7-323f-498a-92f2-3cec18ff7623/d360b12bb86ec4dda5fa4094060a3e57/deep/0/Support-Mozilla.png
>> When I select auto-fill my name disappears and my street address if duplicated in both address fields (I have no apartment #)

**Screenshot 3: https://www.evernote.com/shard/s202/sh/3372c215-9509-4263-917d-e8a55a5f0a02/6b5ac96c75611ea7080b09daeb4de55c/deep/0/Support-Mozilla.png
>> Our payment processor doesn't accept AMEX. I was rerouted to fill out the original form with a different card. Huge abandonment risk if our payment processor doesn't communicate with rAc about acceptable forms of payment.

**Screenshot 4: https://www.evernote.com/shard/s202/sh/d9b5ac8a-c295-414d-8465-7d17108195cc/6be7170c3694b42a1b1a8edc0de5fbb4/deep/0/Support-Mozilla.png
>> I tried the form again today and my autofill info is now included (though I still don't have wallet turned on)

Another major issue is that the form requires so many fields, including a phone #. This could be perceived as invasive and unnecessary PII from a user perspective if they simply want to make a one-time donation quickly.

===========
We have created a duplicate donation form and added the script for rAc -- we can use this as a testing instance (we won't be making this form public)

https://sendto.mozilla.org/page/contribute/autocomplete-demo

===========

Here is the note from Tom based on the edits you discussed over the phone -- 

to show on desktop in Chrome, use:
https://sendto.mozilla.org/page/contribute/autocomplete-demo?wallet=true

Otherwise, just use this for only showing on mobile:
https://sendto.mozilla.org/page/contribute/autocomplete-demo

Also, it will only show for user whose language is set to U.S. English, so that should do a pretty good job of limiting to U.S. based people, though it could also including some of Canada. Let us know if that works....

Thanks, and let me know if you have any other questions or requests for the autocomplete.

Katie