Practice Form

This is a sample form to help you practice creating autofill rules for all the form fields that Lightning Autofill supports. A rule typically comprises the field type, a name that matches one of the field’s attributes, and the value to autofill. To see a field’s HTML code, right-click on it and select “Inspect”. Please consult the online docs or our AI assistant if you need help.

Form Field
Sample Rule
Type = Text  Name = "fullname"  Value = Test User
Type = Text  Name = "firstname"  Value = Test
Type = Text  Name = "lastname"  Value = User
Type = Text  Name = "email"  Value = test@user.com
Type = Text  Name = "username"  Value = testuser
Type = Text  Name = "user"  Value = test_user
Type = Text  Name = "user-id"  Value = test.user
Type = Text  Name = "ctl00_Content_bank"  Value = 0123456789
Type = Text  Name = "ctl00_Content_bank_nr"  Value = 9876543210
Type = Text  Name = "passengers[0].passengerName"  Value = Test User
Type = Text  Name = "color-picker"  Value = #0080c0
Type = Text  Name = "calendar"  Value = 1984-04-01
Type = Text  Name = "slider"  Value = 4.5
Type = Text  Name = "q"  Value = autofill
Type = Text  Name = "clock"  Value = 12:00
Editable:
Edit something here...
Type = Text  Name = "editDiv"  Value = This field was autofilled!
Current value: ""
Type = Text  Name = "secret"  Value = shhh
Type = Text  Name = "newly-added"  Value = TEST
Type = Password  Name = "pass"  Value = blahblahblah
Type = Password  Name = "pass2"  Value = blahblahblah
Type = Select  Name = "month"  Value = "apr" or 3
Type = Select  Name = "year"  Value = "1984" or 84
Type = Select  Name = "qty"  Value = "5 apples" or 2
Type = Select  Name = "stars"  Value = "*****" or 5
Type = Select  Name = "multi"  Value = "B"|"D" or 1|3
Bootstrap-select
Type = Select  Name = "fruit"  Value = "Blueberry" or 3
Colors:
     
Type = Checkbox/Radio  Name = "green"  Value = 1
Type = Checkbox/Radio  Name = "blue"  Value = 0
Gender:
   
Type = Checkbox/Radio  Name = "gender"  Value = 10
— or —
Type = Checkbox/Radio  Name = "Female"  Value = 1
Type = JavaScript  Value = document.querySelector('input[name="test1"]').click();
Type = JavaScript  Value = document.querySelector('button[name="test2"]').click();
Type = JavaScript  Value = document.querySelector('input[type="submit"]').click();

Type = Text  Name = "desc"  Value = This field was autofilled!

External iframe

Type = Text  Name = "message_name"  Value = Test User  Site = tohodo.neocities.org
Type = Text  Name = "message_email"  Value = test@user.com  Site = tohodo.neocities.org
Type = Text  Name = "message_body"  Value = Hello, world.  Site = tohodo.neocities.org

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

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

Type = Text  Name = /\bql-editor\b/  Value = <h3>This field was autofilled!</h3>

Summernote

Type = Text  Name = /\bnote-editable\b/  Value = <span style="background-color: rgb(255, 255, 0);">This field was autofilled!</span>

WYMeditor

Type = Text  Name = /practice/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>