Fill provider details from an NPI

Autofill a provider name and specialty from a ten-digit NPI in your existing HTML form.

JavaScript (browser)Last tested Sep 6, 2026Download and run ↓

On this page

Working example

HTML + form.js

Run the example

npi-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:

Terminal · Python 3

python3 -m http.server 8000

Open localhost:8000/npi-form-autofill.html. When publishing, add your website's hostname to the key. Keep secret keys on your server.

Need a key? Set up this example

Connect the NPI to your fields

Use a ten-digit National Provider Identifier (NPI) to autofill provider details in an intake form. Include form.js, mark the NPI input, and connect the editable provider name and specialty fields to its answer.

HTML

<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="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>

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 accepts whitespace, periods, hyphens, and parentheses around 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, including details removed from a deactivated NPI record. 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 Provider 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

npi-form-autofill.html

<!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" data-parse-version="2.0.0" 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? Set up this browser example. For every field and parameter, see Provider API reference.