Lightning Autofill Practice Form

Install Chrome extension Install Firefox add-on Install Edge extension

This is a sample web form to help you practice creating autofill rules for all the different types of form fields that Lightning Autofill supports. You can identify the field to automatically fill by entering a supported attribute's value into the Name column; in cases where the field is linked to a label using the for attribute, you can also enter the label text. With dropdown menus, you can autoselect by entering the text of the menu item you would like to select into the Value column in double quotes; alternatively, you can also specify the index number of the menu item to select (for multi-select menus, separate each selection with a "|" symbol). For more information, please refer to the online documentation.

Form Field HTML Code Sample Rule
Full name:
<input type="text" name="fullname" autocomplete="off"> Type = Text  Name = ^fullname$  Value = TOM SMITH
First name:
<input name="firstname" placeholder="First name"> Type = Text  Name = ^firstname$  Value = TOM
Last name:
<input name="lastname" placeholder="Last name"> Type = Text  Name = ^lastname$  Value = SMITH
Email:
<input type="email" name="email"> Type = Text  Name = ^email$  Value = tom@smith.com
<input type="text" id="uname" name="username"> Type = Text  Name = ^username$  Value = tsmith
<input type="text" id="user" title="Enter your ID"> Type = Text  Name = ^user$  Value = tomsmith
<input type="text" id="userID"> Type = Text  Name = ^userID$  Value = tom.smith
Account:
<input type="text" name="ctl00_Content_bank"> Type = Text  Name = ^ctl00_Content_bank$  Value = 0123456789
Account #:
<input type="number" name="ctl00_Content_bank_nr" min="0"> Type = Text  Name = ^ctl00_Content_bank_nr$  Value = 9876543210
Passenger:
<input type="text" name="passengers[0].passengerName"> Type = Text  Name = ^passengers\[0\]\.passengerName$  Value = T. Smith
Color picker:
<input id="colorpicker" type="color"> Type = Text  Name = ^colorpicker$  Value = #0080c0
Date:
<input id="calendar" type="date"> Type = Text  Name = ^calendar$  Value = 1984-04-01
Ranged slider:
<input id="slider" type="range" min="0" max="5" step="0.5"> Type = Text  Name = ^slider$  Value = 4.5
Search:
<input type="search" name="q" placeholder="Search for something"> Type = Text  Name = ^q$  Value = autofill
Time:
<input id="clock" type="time"> Type = Text  Name = ^clock$  Value = 12:00
Editable div:
Edit something here...
<div id="editDiv" contenteditable="true"></div> Type = Text  Name = ^editDiv$  Value = This field was autofilled!
Current value: ""
<input type="hidden" id="secret"> Type = Text  Name = ^secret$  Value = shhh
Click button to insert <input name="state"> Type = Text  Name = ^state$  Value = California
Password:
<input type="password" name="pass"> Type = Password  Name = ^pass$  Value = blahblahblah
Confirm:
<input type="password" name="pass2"> Type = Password  Name = ^pass2$  Value = blahblahblah
Birthday:
<select name="month">...</select>
<select name="day">...</select>
<select name="year">...</select> 		Type = Select  Name = ^month$  Value = "apr" or 3
Type = Select  Name = ^year$  Value = "1984" or 84
Quantity:
Quality:
<select name="qty">...</select>
<select name="stars">...</select> 		Type = Select  Name = ^qty$  Value = "5 apples" or 2
Type = Select  Name = ^stars$  Value = "*****" or 5
Answers:
<select id="multi" multiple>...</select> Type = Select  Name = ^multi$  Value = "B"|"D" or 1|3
Fruit:
Bootstrap-select Type = Select  Name = ^fruit$  Value = "Blueberry" or 3
Colors:

<input type="checkbox" id="r" name="red" checked>
<input type="checkbox" id="g" name="green">
<input type="checkbox" id="b" name="blue" checked> 		Type = Checkbox/Radio  Name = ^green$  Value = 1
Type = Checkbox/Radio  Name = ^blue$  Value = 0
Gender:
<input type="radio" id="f" name="gender" value="Female">
<input type="radio" id="m" name="gender" value="Male"> 		Type = Checkbox/Radio  Name = ^gender$  Value = 01
–or–
Type = Checkbox/Radio  Name = ^Male$  Value = 1
 
<input type="button" name="test1" value="Test 1"> Type = JavaScript  Value = document.querySelector('input[name="test1"]').click();
 
<button type="button" name="test2">Test 2</button> Type = JavaScript  Value = document.querySelector('button[name="test2"]').click();
 
<input type="submit"> Type = JavaScript  Value = document.querySelector('input[type="submit"]').click();
<iframe src="https://tohodo-playground.surge.sh/iframe.html"></iframe> Type = Text  Name = ^user_name$  Value = Tom Smith
Type = Text  Name = ^user_email$  Value = tom@smith.com
Type = Text  Name = ^user_message$  Value = Hello, world.
<textarea name="desc" rows="2"></textarea> Type = Text  Name = ^desc$  Value = This field was autofilled!
CKEditor 3 Type = Text  Name = ^Rich text editor, ckeditor3$  Value = <p style="text-align: center;">This field was autofilled!</p>
CKEditor 4 Type = Text  Name = ^Rich Text Editor, ckeditor4$  Value = <h1>This field was autofilled!</h1>

CKEditor 5 default text (contentEditable).

 CKEditor 5 Type = Text  Name = ^Rich Text Editor, main$  Value = <blockquote><p>This field was autofilled!</p></blockquote>
Editor.js Type = Text  Name = \bce-paragraph cdx-block\b  Value = <b><i>This field was autofilled!</i></b>
NicEdit Type = Text  Name = \bnicEdit-main\b  Value = <ul><li>This field was autofilled!<br></li></ul>
Quill default text (contentEditable).
 Quill Type = Text  Name = \bql-editor\b  Value = <h2>This field was autofilled!</h2>
Summernote default text (contentEditable).
 Summernote Type = Text  Name = \bnote-editable\b  Value = <span style="background-color: rgb(255, 255, 0);">This field was autofilled!</span>
TinyMCE Type = Text  Name = ^tinymce_ifr$  Value = <pre>This field was autofilled!</pre>
WYMeditor Type = Text  Name = www\.tohodo\.com/autofill/wymeditor/iframe/default/wymiframe\.html  Value = <ol><li>This field was autofilled!<br></li></ol>
YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte_editor$  Value = <b>This field was autofilled!</b>
YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte-iframe_editor$  Value = <i>This field was autofilled!</i>
YUI 3 Rich Text Editor Type = Text  Name = \[height="99%"\]  Value = <u>This field was autofilled!</u>