Optimize your web forms for Dashlane Autofill

If you run into Autofill issues with the web forms on a website you built or manage, you can optimize the HTML to work better with Dashlane. You can tell Dashlane where and what to autofill by labeling the appropriate fields with the data-form-type attribute.

This article explains the most common scenarios, but you can use any of the values in this Github page about Dashlane and web forms.

Contents

1. Before you get started
2. Get Dashlane to autofill logins, usernames, and passwords
3. Get Dashlane to autofill new, changed passwords
4. Get Dashlane to autofill payment info

Before you get started

Each data-form-type attribute needs to have one or more values. Separate additional values by a comma with no spaces:

data-form-type="password,new"

If you don’t want Dashlane to autofill a specific field, use the value “other”:

data-form-type=”other”

Get Dashlane to autofill logins, usernames, and passwords

If you have a login webpage and Dashlane can’t autofill the username and password, add these data-form-type attributes to the webpage’s HTML.

For the login form itself, use:

data-form-type=”login”

For the username, use:

data-form-type=”username”

For the password, use:

data-form-type=”password”

Example of a typical login form with the data-form-type attributes added in bold:

<form action="/login" data-form-type="login">
<label for="username">Username</label>
<input type="text" id="username" data-form-type="username">

<label for="password">Password</label>
<input type="password" id="password" data-form-type="password">
</form>

If your username field lets people sign in with an email or a phone number, add “email,phone” as additional data-form-type attributes to the webpage’s HTML.

Here’s what that line of HTML would look like, with the additional attributes added in bold:

<label for="username">Username</label>
<input type="text" id="username" data-form-type="username,email,phone">

Get Dashlane to autofill new, changed passwords

If your webpage lets people change their passwords and Dashlane can’t autofill the new password, add the following data-form-type attributes to the webpage’s HTML.

For the change password form itself, use:

data-form-type=”change_password”

For the old password, use:

data-form-type=”password”

For the new password, use:

data-form-type=”password,new”

If there’s a confirmation for the new password, use:

data-form-type=”password,confirmation”

Example of a typical password form, with the data-form-type attributes added in bold:

<form action="/change-password" data-form-type="change_password">
<label for="old-password">Your old password:</label>
<input type="password" id="old-password" data-form-type="password">

<label for="new-password">Your new password:</label>
<input type="password" id="new-password" data-form-type="password,new">

<label for="new-password-repeat">Repeat your new password:</label>
<input type="password" id="new-password-repeat" data-form-type="password,confirmation">
</form>

Get Dashlane to autofill payment info

If you have a webpage that allows people to enter their credit card information and Dashlane can’t autofill the information, add the following data-form-type attributes to the webpage’s HTML:

For the payment form itself, use:

data-form-type=”payment”

For the credit card number, use:

data-form-type=”payment,credit_card”

If this is broken into multiple fields, use this for each:

“payment,credit_card,part”

For the expiration date, use:

data-form-type=”payment,credit_card,date”

If this is broken into month and year, use:

data-form-type="payment,credit_card,date,expiration,month"

and

data-form-type="payment,credit_card,date,expiration,year"

For the credit card CVV, use:

data-form-type="payment,credit_card,cvv"

Example of a typical payment form with the data-form-type attributes added in bold:

<form action="/checkout-payment" data-form-type="payment">
<label>Credit card number</label>
<fieldset>
<input type="text" id="cc-number-block-1" aria-label="credit card number block 1" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-2" aria-label="credit card number block 2" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-3" aria-label="credit card number block 3" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-4" aria-label="credit card number block 4" data-form-type="payment,credit_card,part">
</fieldset>

<label>Expiration date/label>
<fieldset>
<select id="cc-expiration-month" data-form-type="payment,credit_card,date,expiration,month">
<option value="" aria-label="select the expiration month of your card">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>

</select>
<select id="cc-expiration-year" data-form-type="payment,credit_card,date,expiration,year">
<option value="" aria-label="select the expiration year of your card">Year</option>
<option value="24">24</option>
<option value="23">23</option>
<option value="21">21</option>
</select>
</fieldset>

<label for="cvv">CVV</label>
<input type="text" id="cvv" data-form-type="payment,credit_card,cvv">
</form>