Page MenuHomePhabricator

Other amount in WMF donation form: error message unclear
Closed, ResolvedPublic

Description

Donors inadvertently entering a currency symbol in the Other amount field get message saying please select an amount, which confuses them. Ideally, we would just strip the symbol on our side before submitting, thereby letting the donor pass through without an error. If that's not possible, let's update this error message to something like please do not enter the currency symbol in the amount field that would be really helpful. We've seen 11 Zendesk tickets related to this in the past 4 days.

1Screen Shot .png (860×740 px, 71 KB)

2 Screen Shot.png (720×1 px, 393 KB)

Event Timeline

MBeat33 raised the priority of this task from to Needs Triage.
MBeat33 updated the task description. (Show Details)
MBeat33 added a project: Fundraising-Backlog.
MBeat33 added subscribers: MBeat33, Ppena.

@MBeat33 this is so weird. We never saw this before and had that field there forever. What country is this coming from? Maybe we should change something in the banner or the way we present the information instead?

@Ppena, most of them are US donors like ZD #168645, but we're also seeing it in France, as in #167497

Yes, this is odd. We've been using forms like this for a long time now (both in banners and donatewiki), and nothing has changed about them recently. I'll take a look how we can improve it though.

@Pcoombe could we put a currency symbol just to the left of the text entry box? We should also be able to deal with this on our side with validation. Adding to the next sprint for the time being.

atgo triaged this task as Medium priority.Nov 16 2015, 7:52 PM
atgo updated the task description. (Show Details)
atgo set Security to None.
atgo moved this task from Triage to Sprint +1 on the Fundraising-Backlog board.

Not sure why, but the volume of this is much higher than normal. A comment I've seen from multiple donors is "The fixed donation amounts had a $ sign in from of each of them. Therefore when I typed in my own amount, I thought that I had to put a $ sign in."

@Pcoombe - tech thinks this is something on your side. Let us know if you need help :)

Okay, solved. We never had the code to strip out currency symbols in donatewiki that we had in banners. I've added it to make them both the same. I guess the increase in volume is just because we've been sending many emails recently.

Three major donors who've received the recent enMG15 bulk email have reported this problem occurring; the donor in the screenshot said it occurred on their iPad but not a desktop. ZD #s 188299, 188260, 187559 can we confirm that this fix has been applied to all mobile forms?

OtherAmtScreen_Shot_2015-12-12_at_1_28_15_PM.png (1×1 px, 231 KB)

Okay, think I fixed what might have caused this (silly javascript error on my part). Have tested on crossbrowsertesting and it worked, but they don't have iOS 9. Will try on my iPad when I get home in a few hours.

This seems to be working again now.

The donor in #189016 on 12/13 got the minimum amount error message after selecting 10 USD. They're using an Apple iPhone 6s on iOS 9.1

MOBAMTIMG_0386.PNG (1×750 px, 123 KB)

Re-opening because I confirmed there's an issue when adding a currency symbol on iOS in banners (it shouldn't even be possible to add currency symbol since the input type=number!)

Ok @Pcoombe I'm going to remove Fundraising-Backlog for now. If it becomes an fr-tech thing please re-add

The mobile donor in #261500 got a minimum amount error despite specifying $5.00 in the Other field:

261500.png (1×964 px, 345 KB)

I am following up to get their specs/vitals

@Pcoombe / @Jseddon this looks like it's in a banner - do you add that $, or did the donor type it? Would that mess with the amount logic?

Oops, just saw all the comments above. Guess this is a well understood issue!

This was due to particularly annoying Safari behaviour. When <input type="number"> is used, on mobile it will display a keyboard with symbols including $, and allow them to be typed. However once the input loses focus (e.g. when the user clicks a payment method) it will think "Hey, that isn't a number!" and blank the entire field. So our own validation then fails.

It is possible to get a keyboard with only numbers by applying a certain pattern attribute, but that makes it impossible to input decimal points.

Instead I've worked around this by adding some javascript to block input of anything that isn't a number or decimal point.