Autofill forms on a site
Autofill in Yandex Browser enables users to quickly and safely enter bank card numbers, passwords, and other personal data (such as contacts information) in forms. This can make it easier to place orders, encouraging users to order more often. Yandex research and experiments to improve autofill in order forms have shown that the conversion of orders is 5–10% higher on sites where this function works correctly.
For details, see Autofill forms.
Note
If autofill doesn't work in Yandex Browser, it probably won't work in other browsers either.
To check autofill on a site:
Step 1. Complete your profile in Yandex Browser
- Install Yandex Browser.
- Click
→ Passwords and cards or go to
browser://personal/contacts
. - Open Personal data.
- Click Add and fill out the form.
- To add other fields to the form, click Add field.
- Click Save.
If forms on the site have Passwords and Bank cards fields, enter this data as well.
Step 2. Check autofill in the form
Click all the fields of the form on your site and check whether the autofill hints are displayed correctly.
Step 3. Make any necessary edits
If there aren't any hints or the hints are displayed incorrectly, make sure the form markup follows the recommendations below.
Markup recommendations
Make sure that:
-
The form markup meets HTML standards.
-
The input element has the
autocomplete
attribute with a valid value.For example:
Name input field
<input placeholder="Name" autocomplete="given-name">
Email input field
<input autocomplete="email">
For details, see HTML Living Standard and MDN.
-
Data input elements are child elements of the
form
tag. For details, see Submitting forms. -
Data input elements have intuitive attributes, for example:
Attribute
Field type
Possible name options
id
First name
first_name
,name_first
,fname
,firstname
,given_name
,givenname
name
Phone number
phone
,phoneCity
,telephone
,tel
placeholder
Organization
org
,organization
,company
Example of code that is understandable for autofill
<form action=""> <input id="first_name"> <input id="last_name"> <input name="email"> <textarea placeholder="Enter address"></textarea> </form>
Example of incorrect code
<form> <!-- The browser recognizes the field as unknown. --> <input id="xdia_13"> <!-- The browser recognizes the field as an address because it fits the definitions of both an address and an email. --> <input name="mail address"> <!-- Ambiguous designation which can be recognized as email, delivery address, or website URL. --> <textarea placeholder="Address"></textarea> </form>
-
The value of the
for
attribute of thelabel
tag unambiguously refers to the input element that it was intended for.Example of the label tag that is understandable for autofill
<form> <div id="customer"> <label for="fname">Name</label> <input type="text" id="fname"> ... </div> </form>
Example of incorrect code
<form> <div id="customer"> <label for="">Name</label> <div name="klw21"> <div name="md-12"> <input type="text"> </div> </div> ... </div> </form>
Submitting forms
The browser recognizes most of the data entered by the user during the form submission process. When the form doesn't have the form
tag on the site and there is no explicit submit
event to submit a form, the data stored in the browser and autofill may not work correctly.
Several mechanisms are used to recognize the submission. The simplest one is processing a submit
JavaScript event. There are also heuristics that analyze the filling in of form fields, save the entered data, and respond to:
- Navigation on the site.
- AJAX requests.
- Deleting
iframe
s that a form was completed inside of. - Deleting or hiding filled elements.
Heuristics sometimes cause a false trigger and may save incorrect data. The process becomes especially complicated if the form
tag is missing. The browser is forced to find fields, consider them a single form, and analyze their completion.
In order for the browser to save the entered data so that the user can fill out the form with one click on the next visit to the site, it is important to prepare the submission form correctly: use the form
tag and inside it define input type="submit"
.
Example of a simple and clear submission form
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
Example of a complex but understandable submission form
<div>
<input type="text">
<input type="text">
<input type="submit">
</div>
Example of a submission form that is not understandable to the browser
<div>
<input type="text">
<input type="text">
<div>Button</div>
</div>
How to disable autofill on the site
If you only want to disable autofill because it doesn't work correctly, contact the Yandex Browser team at browser-autofill@support.yandex.ru. Our experts will help you get autofill set up. If you have other reasons for disabling it, try the following non-standard solution:
autocomplete="none"
Any invalid value of the autocomplete
attribute signals the browser to disable autofill. In addition to none
, you can use the values nope
, all-off
, smth
, or any other arbitrary set of letters.
The Yandex Browser team can't guarantee that this method will work in every environment. To see if you disabled autofill, click the form fields and make sure that there are no hints.