Area Codes as Donation Amounts from Chrome Auto-Fill

Dina Zawaski

Hello, 


Anyone else having this issue? On our donation forms, we don't ask for a phone number, but for some reason Chrome (and possibly Firefox) users Auto-Fill function is overwriting the "enter your own amount" field on our donation forms with phone area codes. Constituents are processing donations with their phone area code as the amount without noticing it on the subtotal screen. We've had about 10 donations in the last two weeks that include area codes as the donation amount. We have to keep calling these people to let them know the amount is wrong. 


Is there anything that can be done to the donation form to help with this? Should I add a phone number field even though we don't traditionally ask for one?


Thanks for any and all help

Kim Ethridge

For us it was using the numbers from the street address, not area code. It was Chrome as far as we could determine. Blackbaud said they can’t help because it sounds like a browser issue so our digital marketing firm put code on the donation form (only seemed to be happening on one particular form) to keep browsers from auto-filling any fields. I’ve only seen one gift with this problem since they put the code on.

 

Erik Leaver

This only seems to be affecting the "other" field.


As Kim mentioned, you can turn off auto-fill for the entire form with some additional code. But you can also turn it off for just one field. I'd suggest just turning it off for the "other" field. Autocomplete is a great tool to help improve conversions.


Here's a great article that discusses the code needed to turn it off for the entire form or for just a field: 
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion


Another approach would be to add autocomplete values to your forms. Here's a link to an article that discusses the mapping needed:
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill


Turning it off is the easiest method, the other two will require a small bit of jquery to look for the form field ID and add the autofill value to the input.


Best,

Erik

 

robert badley

Dina Zawaski:

Hello, 


Anyone else having this issue? On our donation forms, we don't ask for a phone number, but for some reason Chrome (and possibly Firefox) users Auto-Fill function is overwriting the "enter your own amount" field on our donation forms with phone area codes. Constituents are processing donations with their phone area code as the amount without noticing it on the subtotal screen. We've had about 10 donations in the last two weeks that include area codes as the donation amount. We have to keep calling these people to let them know the amount is wrong. 


Is there anything that can be done to the donation form to help with this? Should I add a phone number field even though we don't traditionally ask for one?


Thanks for any and all help

We had the same issue except that Chrome users were having their year of birth picked up as the "other" donation amount. We have refunded a few donations of $19xx. Blackbaud said that they could not guarntee that any fix they put in place would last because Google could change how Chrome autofill worked at any time and negate their efforts. We have not had occurences of this for a couple of months now.

Shiloh Fallon

This is the code that is currently working. Google does want auto fill turned on, so they do make changes frequently to force it to work. Note that this enclosure is also a good way to add jquery code to your wrapper, as it uses noconflict.


<script type="text/javascript"> 

/* Use Convio YUI  */

Y.use('jquery-noconflict', function() { 

jQuery(function($){ 

$('form#ProcessForm').attr( "autocomplete", "off"); 

$('.donation-level-user-entered input').attr( "autocomplete", "off"); 

}); 

}); 


</script> 

Mark Kindy

Dina Zawaski:

Anyone else having this issue? [...]

With how modern browsers' autofill processes work, this implies there's a collision somewhere between what data the browser is holding in its autofill database and what the form is requesting. This usually implies that the erroneous input element's name or id attribute is being duplicated in some context where in the first case the user encountered it, the browser noted the data the user entered (in this case, a phone number); and, when the browser next encountered an input field using the same context, it assumed it wanted the same kind of data, even though the data expected was different (a dollar amount).

Do you have or can you PM me a link to one of your affected donation forms so I can take a peek at it?

While you can disable autocomplete on individual fields and entire forms, accessibility would suggest leaving autocomplete enabled for individuals with motor, sight, or cognitive issues.

Kim Ethridge

Mark - feel free to take a look at ours as well.

http://chesapeake.cbf.org/site/Donation2?df_id=1782&mfc_pref=T&1782.donation=form1


Kim

Erik Leaver

Shiloh, does this code just turn the autocomplete off for the other amount or does it do it for the entire form? To me it looks like both but I don't know jquery that well. Ideally we'd have a way just to turn it off for the other field.


Thanks,

Erik

Shiloh Fallon

This solution targets the whole form, Erik, because in testing it did not work to just target the field. One thing to keep in mind is that this is not something that Google wants people to be doing, or which is considered a best practice. We have already seen a situation where a fix we had identified as working stopped working within a month because Google changed something again.

Madeline Cuadra

Hi Shiloh, We are having the same issue as Robert Badley. I am interested in using this code you've provided in hopes that resolves this issue.

We've gotten very odd donation amounts fo $18 and $19 and others frequently when the intention is much larger i.e. $50/$100 - we're losing revenue because of it. 


Where do you suggest to paste this code in on the donation form back end? I've just entered it under the HTML caption but auto-fill still seems to work.


Thank you! 

robert badley

Madeline Cuadra:

Hi Shiloh, We are having the same issue as Robert Badley. I am interested in using this code you've provided in hopes that resolves this issue.

We've gotten very odd donation amounts fo $18 and $19 and others frequently when the intention is much larger i.e. $50/$100 - we're losing revenue because of it. 


Where do you suggest to paste this code in on the donation form back end? I've just entered it under the HTML caption but auto-fill still seems to work.


Thank you! 

 

Madeline, I would say that the code snipet is not the whole answer because we have had the problem since. We had one or two cases of it so far this year.

 

Meghan Christiansen 2

We are encountering this issue as well.  We had a donor enter a tribute gift recently and it pre-populated her credit card expiry date as the e-card send date.  So now the system has her e-card sending out in the year 2022 and we are not able to cancel the e-card from sending.  We have had this happen a few times lately with various fields on our donation forms.


I also tried implementing the code above but it isn't working.  Looks like Google has done an update since.


Meghan


 

Marnee Beck

We had the same issue for a registration form. I removed the field that was causing the issue. It seemed to work better. It's not a great solution but it worked.