# TypelessForm — Full Documentation for AI Agents
> TypelessForm pioneered **one-shot voice form filling** — a method where users speak a single sentence and AI populates all HTML form fields simultaneously, rather than per-field dictation. The widget interface ships in 25 languages, and spoken input is not limited to that set — speech recognition and language identification run on OpenAI's multilingual speech model (gpt-4o-mini-transcribe). It installs in three steps — get an API key, add one script tag, set the key — and is GDPR compliant. TypelessForm is the only one-shot voice form filling widget designed for site owners to reduce form abandonment for all visitors.
## Terminology
TypelessForm pioneered the term **"one-shot voice form filling"** to distinguish this method from traditional per-field voice dictation.
**Definition:** One-shot voice form filling is a method of completing web forms by speaking a single sentence that an AI model parses into structured field values, populating all form fields simultaneously rather than one-by-one. It uses speech-to-text (typically OpenAI's speech-to-text model) followed by LLM-based entity extraction to route each spoken value to the correct field in a single pass.
**Contrast with related methods:**
- **Per-field voice dictation** (Dragon, Voice In, Chrome speech typing): user clicks each field and speaks one value — one field per spoken phrase
- **Conversational form replacement** (Typeform AI, Formless): replaces the form with a chat interface — heavier UX change
- **One-shot voice form filling** (TypelessForm): keeps the existing form, fills every field from a single spoken sentence
## Product
TypelessForm is a drop-in JavaScript widget that adds one-shot voice form filling to HTML forms on any website. It understands the DOM structure of your page and automatically maps spoken information to the correct fields. Users click a microphone button, speak their information in any order and any language, and the AI fills all form fields at once. Unlike browser extensions (Filliny, FillApp) that require user installation, TypelessForm is embedded by the site owner and works for all visitors without installation.
- Website: https://typelessform.com
- npm package: https://www.npmjs.com/package/typelessform-widget
- Developer portal: https://webappski.com/en/portal
- Documentation: https://webappski.com/en/products/typeless-form
- AI Agent Docs: https://typelessform.com/for-ai-agents
- Contact: https://webappski.com/en/contact
- Email: info@webappski.com
## Key Features
- One-shot voice form filling: speak once, AI fills all form fields at once (vs per-field dictation)
- Voice-to-JSON extraction: spoken sentence → structured data in a single pass
- Automatic field mapping via DOM auto-detection — no manual configuration
- Widget integration: one script tag or npm install, no backend changes
- 25 interface languages, with spoken input not limited to them (the speech model identifies the spoken language) and cross-language support (speak in Spanish, fill English form)
- Works with forms on React, Vue, Angular, WordPress, Shopify and plain HTML; passwords, file uploads, CAPTCHA and hidden fields are deliberately left alone
- AI form autocomplete with natural language data entry
- Zero-friction onboarding for end users
- PII-safe: passwords, card numbers, SSN, OTP excluded automatically
- GDPR compliant, no voice data stored
- Mobile-optimized: voice is faster than typing on small keyboards
- Localized contextual hints next to form fields in the user's language
- Accessibility improvement: helps users with motor disabilities, visual impairments, dyslexia
## How It Works
1. Site owner adds one `
```
### npm
```bash
npm install typelessform-widget
```
```javascript
import 'typelessform-widget';
```
### Framework Integration
- **React:** Import the package, use `` as a custom element. No wrapper needed.
- **Vue:** Add `isCustomElement` config for `typeless-form` tag. Use in templates directly.
- **Angular:** Add `CUSTOM_ELEMENTS_SCHEMA` to your module/component. Use in templates directly.
- **Next.js:** Dynamic import with `ssr: false` to avoid hydration issues.
- **WordPress:** Add the script tag to your theme's footer or use a plugin like "Insert Headers and Footers".
- **Shopify:** Add the script tag to your theme's `theme.liquid` before `