Fill vehicle details from a VIN
Autofill editable year, make, and model fields from a 17-character VIN using form.js.
On this page
Working example
HTML + form.jsRun the example
Download HTMLvin-form-autofill.html
Replace YOUR_PUBLIC_API_KEY in the downloaded file with your public key. Add localhost to that key's allowed domains. In a terminal in the download folder, run:
python3 -m http.server 8000Open localhost:8000/vin-form-autofill.html. When publishing, add your website's hostname to the key. Keep secret keys on your server.
Connect the VIN to vehicle details
Autofill year, make, and model from a vehicle identification number (VIN). Include form.js, mark the VIN input, and connect those three fields to its answer. Your form keeps its own labels, styling, and submission.
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
<div class="field">
<label for="vin">VIN</label>
<input id="vin" name="vin" data-parse="vin" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="1HGCM82633A004352">
</div>
<div class="field">
<label for="year">Year</label>
<input id="year" name="year" data-parse-from="vin" data-parse-fill="year" inputmode="numeric">
</div>
<div class="row">
<div class="field">
<label for="make">Make</label>
<input id="make" name="make" data-parse-from="vin" data-parse-fill="make">
</div>
<div class="field">
<label for="model">Model</label>
<input id="model" name="model" data-parse-from="vin" data-parse-fill="model">
</div>
</div>data-parse-from="vin" points each output at the VIN input. The year, make, and model bindings come directly from the API answer. Other details are optional bindings, not extra fields the script creates.
Type or paste a VIN
The script waits for a complete 17-character VIN, then checks and decodes it. Try 1HGCM82633A004352 for a 2003 Honda Accord. A failed check does not fill vehicle details; an unavailable request does not label the VIN invalid.
Known details fill the existing fields. Missing values stay blank so the person can enter what they know. All three fields remain editable. A pending response cannot overwrite a manual correction, and changing the VIN clears the old generated values.
A decode describes a vehicle; it does not establish ownership, title, mileage, or history. Treat the submitted fields as customer input and repeat any checks your application relies on at the server boundary.
Build directly with the Vehicle API when you need a custom workflow or additional decoded fields.
Complete example
One HTML file with your fields, styles, and the form.js include. Replace YOUR_PUBLIC_API_KEY with your public key, then run it on a domain you have added to that key.
View and copy the complete source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fill vehicle details from a VIN</title>
<style>
:root { color-scheme: light dark; --bg: #fff; --ink: #152029; --muted: #5e6b75; --line: #d9e2e7; --field: #f6f9fa; --accent: #007c91; --error: #b42335; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bg: #0b1015; --ink: #eff7fa; --muted: #94a6b2; --line: #2c3942; --field: #121b23; --accent: #67e8f9; --error: #fda4af; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0b1015; --ink: #eff7fa; --muted: #94a6b2; --line: #2c3942; --field: #121b23; --accent: #67e8f9; --error: #fda4af; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 24px; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, sans-serif; }
main { max-width: 540px; margin: 0 auto; }
label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
input { display: block; width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; }
input::placeholder { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field + .field { margin-top: 18px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.row .field { margin-top: 0; }
/* Your form owns these styles. form.js adds semantic markup and states. */
input[data-parse-status="invalid"], input[data-parse-status="disposable"] { border-color: var(--error); }
.parse-hint { margin: 6px 0 0; color: var(--muted); font-size: .875em; line-height: 1.4; overflow-wrap: anywhere; }
.parse-hint[data-parse-status="invalid"], .parse-hint[data-parse-status="disposable"] { color: var(--error); }
@media (max-width: 380px) { body { padding: 18px; } .row { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main>
<!-- example:form -->
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
<div class="field">
<label for="vin">VIN</label>
<input id="vin" name="vin" data-parse="vin" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="1HGCM82633A004352">
</div>
<div class="field">
<label for="year">Year</label>
<input id="year" name="year" data-parse-from="vin" data-parse-fill="year" inputmode="numeric">
</div>
<div class="row">
<div class="field">
<label for="make">Make</label>
<input id="make" name="make" data-parse-from="vin" data-parse-fill="make">
</div>
<div class="field">
<label for="model">Model</label>
<input id="model" name="model" data-parse-from="vin" data-parse-fill="model">
</div>
</div>
<!-- /example:form -->
</main>
</body>
</html>
Need a key? Set up this browser example. For every field and parameter, see Vehicle API reference.