Interactive tool · runs entirely in your browser
Form Practice
A realistic job application with every kind of field a browser can throw at you. Fill it in, get told what is wrong as you go, and take the answers away with you. Nothing is submitted — there is no server behind this page at all.
Every field type
58 controls across 4 rounds — 22 control shapes, from a plain text input to radio groups, a table-cell label and a shadow-DOM input.
Instant feedback
Each field is checked the moment you leave it, in plain English. No round trip to a server, no error summary at the bottom of a long page.
Take the answers with you
Copy the answers as JSON or as a request body, or download the whole form as a standalone HTML file that prints its own payload.
Round 1 — About you
The identity fields every form asks for. Split names, a repeated email and a date of birth are where most fillers trip.
Given name on its own. The given-name autofill token is what browsers and fillers match on.
Optional, and usually the field people skip.
Family name on its own — do not put "Mr" or "Dr" in here.
What you actually go by. Real forms ask this so they address you correctly.
The email autofill token is the single most useful hint on a form.
A second box that must match. A filler has to fill both, or the form still fails.
Use type="tel" plus the tel token. Never use type="number" — it drops the + and the spaces.
The bday token, and a date picker rather than three text boxes. A picker gets the format right for you.
A select with a "prefer not to say" option. Leaving it blank is usually the same as declining.
A file input. Note that file inputs are skipped by most form fillers — you must choose a file yourself.
Round 2 — Where you live
The address block. Autofill tokens only work if every line uses the right one, and a hidden dependent field breaks naive fillers.
The address-line1 token. House number and street, nothing else.
The address-level2 token is the town or city — the bit people put in the wrong box.
Region, not the town — the address-level1 token.
The postal-code token, plus a pattern so a typo is caught before you submit.
The country token. A select, because countries have a long, changing list of official values.
Round 3 — The role
The application itself. These are the field names a recruiter built the form around, and the ones an extension recognises.
Free text, because job titles do not come from a fixed list.
Half years are allowed here, so the step is 0.5 rather than 1.
A select whose values are slugs and whose labels are words. A filler that fills by label and one that fills by value will both get this right — test both.
Number, not text. The unit lives in the label so the number stays machine-readable.
Three honest answers, including the one people are embarrassed to pick.
The field name recruiters use. File inputs cannot be filled programmatically, so this one is yours to pick.
Long free text with a character limit. A good filler tells you it wrote a summary rather than pasting 2,000 characters.
Free text with no minimum — the "optional but appreciated" field.
Round 4 — The awkward ones
Every remaining HTML input type, plus the three shapes that break naive fillers: a table-cell label, a shadow-DOM control and a cross-checked date pair.
Must be after the date above. No single field can check this on its own.
date plus time in one control, to the minute.
A calendar week. The least used input type there is, and the one fillers most often write an invalid value into.
Bounded on both sides, with the legal minimum enforced.
A slider. The live number next to it is the only feedback a range input gives on its own.
A colour picker. The value is a hex string, which is what gets submitted.
A multiple select. It submits several values under one name — a different shape from a checkbox group.
Password fields exist to be handled, not to be guessed. A good filler leaves them for you.
| Alternative contact number |
|---|
This control is rendered inside a shadow root. It is a normal input underneath, but it is not in the light DOM — and a shadow-DOM input is left out of the form’s own payload, so a plain submit would quietly drop it.
An optional checkbox. Leaving it alone must not be treated as a failure.
Required, and the only box in the form that has to be ticked for the round to pass.
Test bench
What a form-filling tool actually sees. The map lists every control's fill key, type, autofill token and options; the answers are what you typed; the body is how those answers would arrive at a server.
| Label | Fill key | Type | Autocomplete | Required | Value |
|---|---|---|---|---|---|
| First name | first_name | text | given-name | yes | — |
| Middle name | middle_name | text | additional-name | no | — |
| Last name | last_name | text | family-name | yes | — |
| Preferred name | preferred_name | text | nickname | no | — |
| Email address | email | yes | — | ||
| Confirm email address | email_confirm | yes | — | ||
| Phone number | phone | tel | tel | yes | — |
| Date of birth | dob | date | bday | yes | — |
| Pronouns | pronouns | select | — | no | — |
| Profile photo | photo | file | — | no | — |
| Address line 1 | address_line1 | text | address-line1 | yes | — |
| Address line 2 | address_line2 | text | address-line2 | no | — |
| Town or city | city | text | address-level2 | yes | — |
| Region | region | select | address-level1 | yes | — |
| Postcode | postcode | text | postal-code | yes | — |
| Country | country | select | country | yes | — |
| Would you work remotely? | remote_ok | radio | — | no | — |
| Relocation | willing_to_relocate | checkboxgroup | — | no | — |
| Which address is this? | address_type | radio | — | no | — |
| Role you are applying for | role_title | text | — | yes | — |
| Years of relevant experience | years_of_experience | number | — | yes | — |
| Are you currently employed? | currently_employed | select | — | no | — |
| Notice period | notice_period | select | — | no | — |
| Salary expectation (£) | salary_expectation | number | — | no | — |
| Right to work in the UK | right_to_work | select | — | yes | — |
| Will you need visa sponsorship? | sponsorship_required | radio | — | no | — |
| CV / résumé | resume | file | — | yes | — |
| Cover letter | cover_letter | textarea | — | yes | — |
| LinkedIn profile URL | linkedin | url | — | no | — |
| GitHub profile URL | github_profile | url | — | no | — |
| Portfolio or website | portfolio | url | — | no | — |
| How did you hear about us? | how_did_you_hear | select | — | no | — |
| Why do you want to work here? | why_do_you_want_to_work_here | textarea | — | no | — |
| Earliest start date | contract_start | date | — | no | — |
| Latest start date | contract_end | date | — | no | — |
| Preferred interview slot | interview_slot | datetime | — | no | — |
| Best time to call you | preferred_call_time | time | — | no | — |
| Earliest month available | preferred_month | month | — | no | — |
| Earliest week available | preferred_week | week | — | no | — |
| Your age | age | number | — | no | — |
| Budget available (£) | budget | number | — | no | — |
| How are you feeling about this form so far? | satisfaction | range | — | no | — |
| Favourite colour | favourite_colour | color | — | no | — |
| Skills you have (select several) | skills | multiselect | — | no | — |
| Shirt size | shirt_size | select | — | no | — |
| T-shirt colour | t_shirt_colour | radio | — | no | — |
| Languages you speak | languages | checkboxgroup | — | no | — |
| Password | password | password | — | no | — |
| Confirm password | password_confirm | password | — | no | — |
| Security question | security_question | select | — | no | — |
| Referral code | referral_code | text | — | no | — |
| Alternative contact number | alt_contact_number | tablecell | — | no | — |
| Emergency contact name | emergency_contact_name | shadow | — | no | — |
| Send me the newsletter | newsletter_opt_in | checkbox | — | no | — |
| I have read and accept the practice terms | terms_accepted | checkbox | — | yes | — |
Fill this form automatically
Auto Form Filler is a free Chrome extension we build. It reads a form like this one, works out what belongs in each field, asks your own AI provider, and fills the form in. Press Ctrl + Shift + F on this page and it will offer to fill it.
It runs in your browser, works with your own API key, and sends your form contents to your provider rather than to us. Nothing here is shared with the extension — the page works exactly the same without it.
Questions about this form
Is anything I type sent to a server?
No. Every check on this page runs inside your browser tab — the validation, the progress count and the export are all local. The form has no action, the page makes no requests, and there are no cookies. Close the tab and the answers are gone.
What does this cover that a plain test form does not?
A test form gives you a list of inputs and nothing else. This one adds a realistic flow, a short note under every field explaining what it is for, live validation as you type, a dependent field that appears only when it is needed, a label in a table cell, a control inside a shadow root, and an export of the field map and the answers.
Which HTML field types does the form cover?
All of them: text, email, tel, url, password, number, range, colour, date, datetime-local, time, month, week, file, single and grouped checkboxes, radio groups, single and multiple selects, and textareas. On top of that there is a text input labelled by a table cell and a text input inside a shadow root.
Can I use this to test my own form-filling tool?
Yes. The Test bench panel lists the semantic map of every control — the fill key, the type, the autocomplete token, the options and whether it is required — which is what a filler actually sees. The Download button exports the whole form as one self-contained HTML file that prints its own submitted payload, so you can point a tool at a local file and read the output without a server.
Why are there two unusual fields near the bottom?
They are deliberate hard cases. Real forms put labels in table cells and real web components hide their inputs inside a shadow root. Tooling that only walks the light DOM misses both. The fix for the first is an aria-label on the input; the second needs a query that looks into shadow roots. A shadow-DOM input has one more catch: it is left out of the form’s own payload, so a plain submit drops it silently.
Do I need an account, or an email address?
Neither. There is no sign-up, no account and nothing to hand over. Open the page and start filling it in.
What is this useful for if I am not a developer?
Practising. The form is a realistic job application — the kind with a CV upload, a salary expectation box and a right-to-work question — and it tells you what is wrong with your answers before a real employer ever sees them.