Fill vehicle details from a VIN
Use form.js to fill editable year, make, and model fields from a VIN.
On this page
Working example
HTML + form.jsConnect the VIN to vehicle details
Include the script, mark your VIN input, and bind the three fields you want filled. Keep your own labels, styling, and submission.
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" 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>Replace YOUR_PUBLIC_API_KEY with a Public key from the keys page. Allow your site's hostname and localhost for local development. Serve the downloaded HTML over HTTP; keep secret keys on your server.
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. 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 VIN 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" 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? Create a public API key. For every field and parameter, see VIN API reference.