Fill provider details from an NPI
Use form.js to fill an editable provider name and specialty from a ten-digit NPI.
On this page
Working example
HTML + form.jsConnect the NPI to your fields
Include form.js once and mark your NPI input. Bind the provider name and specialty to fields from its answer. Your input names still control what your form submits.
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" defer></script>
<div class="field">
<label for="npi">NPI</label>
<input id="npi" name="npi" data-parse="npi" inputmode="numeric" autocomplete="off" placeholder="1881018208">
</div>
<div class="field">
<label for="provider">Provider name</label>
<input id="provider" name="provider_name" data-parse-from="npi" data-parse-fill="name">
</div>
<div class="field">
<label for="specialty">Specialty</label>
<input id="specialty" name="specialty" data-parse-from="npi" data-parse-fill="specialty">
</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="npi" names the source input's ID. data-parse-fill="name" and data-parse-fill="specialty" choose the details this form needs. Add further bindings only for fields your application uses.
Enter the provider's number
The script waits for ten digits, then checks the NPI and fills a registered provider record. Try 1881018208. A checksum failure or an unregistered number does not fill a provider's details; a failed request leaves them unchecked.
Both filled fields stay editable. Missing values stay blank. Changing the NPI clears the old generated details, and a pending lookup cannot replace a correction someone is typing.
The same provider-name field handles an individual or an organization. An NPI record does not establish licensure, eligibility, or that the person completing the form represents that provider. Validate submitted identifiers on your server when you rely on them.
Build directly with the NPI API for a custom integration and the complete directory response.
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 provider details from an NPI</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; }
/* 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; } }
</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="npi">NPI</label>
<input id="npi" name="npi" data-parse="npi" inputmode="numeric" autocomplete="off" placeholder="1881018208">
</div>
<div class="field">
<label for="provider">Provider name</label>
<input id="provider" name="provider_name" data-parse-from="npi" data-parse-fill="name">
</div>
<div class="field">
<label for="specialty">Specialty</label>
<input id="specialty" name="specialty" data-parse-from="npi" data-parse-fill="specialty">
</div>
<!-- /example:form -->
</main>
</body>
</html>
Need a key? Create a public API key. For every field and parameter, see NPI API reference.