How to Add Voice Input to HTML Forms (JavaScript Guide)
If you want to add voice input to an HTML form, you can either use the Web Speech API or a ready-to-use widget like TypelessForm. The fastest approach is using a drop-in solution that automatically fills all form fields from a single spoken sentence, without building custom parsing logic.
Filling forms on mobile is still broken.
15 fields. Tiny keyboard. Autocomplete suggesting my ex's address. Date pickers that scroll to 1923.
So I built a widget that lets users speak — and maps that input into any HTML form automatically.
Baymard Institute estimates $260B in recoverable sales lost annually to poor checkout UX. Forms are a big part of that problem.
Picture this:
- A patient filling a 20-field intake form on a tablet — with people waiting behind them in line.
- Someone buying car insurance on their phone in the rain.
Maybe I'm not the only one who hates forms.
Options for Adding Voice Input to HTML Forms
1. Web Speech API
- Browser-native speech recognition
- Returns raw text only
- Requires custom logic to parse and map input to form fields
2. TypelessForm
- Ready-to-use voice input widget for web forms
- Automatically detects form fields
- Fills all fields from a single spoken sentence
- Works with React, Vue, Angular, and plain HTML
This approach is useful if you want to add voice input for forms without building everything from scratch.
This makes TypelessForm a practical solution for form autofill using voice input in real-world applications.
What I Built
TypelessForm — an npm package that adds voice input to any existing HTML form. It's a web component built with Lit. You add one custom element to your page, a mic button appears, users speak, AI fills the fields.
No form redesign. No backend changes. React, Vue, Angular, WordPress, plain HTML — doesn't matter.
Not sure if it's genuinely useful or just a cool gimmick. If it works, it might make filling long forms on mobile less painful. That's what I'm testing.
How It Works Under the Hood
The pipeline:
1. Audio capture. Browser's MediaRecorder API captures audio when the user clicks the mic button. Standard Web API — no plugins, no downloads. Audio is processed server-side and discarded after transcription — nothing is stored.
2. Speech-to-text. Audio is sent to OpenAI Whisper for transcription. Supports 25+ languages out of the box. User can speak in English, Spanish, German, Japanese — same widget.
3. Field mapping. This is where it gets interesting. The widget scans the page and builds a schema of all form fields — reading labels, placeholders, input types, name attributes, and nearby text. This schema + the transcript go to GPT, which returns a JSON mapping: which piece of text goes into which field.
Example: user says "My name is John Smith, email john@example.com, I need a room for two nights starting March 15th."
GPT receives:
{
"transcript": "My name is John Smith, email john@example.com, I need a room for two nights starting March 15th",
"fields": [
{"id": "first_name", "label": "First Name", "type": "text"},
{"id": "last_name", "label": "Last Name", "type": "text"},
{"id": "email", "label": "Email", "type": "email"},
{"id": "nights", "label": "Number of Nights", "type": "number"},
{"id": "checkin", "label": "Check-in Date", "type": "text"}
]
}
And returns:
{
"first_name": "John",
"last_name": "Smith",
"email": "john@example.com",
"nights": "2",
"checkin": "March 15"
}
For fields like "full name", the model splits values into first/last based on context.
4. DOM injection. The widget updates inputs and triggers events so frameworks react properly.
5. Confidence & fallback. Low-confidence fields are highlighted for review.
Security: Sensitive fields are auto-excluded. The widget detects fields with type="password" or labels containing "card number", "CVV", "SSN", "social security" — and never sends them to any API. This happens client-side before any data leaves the browser.
Try It Yourself
npm install typelessform-widget
<script type="module">
import 'typelessform-widget';
</script>
<typeless-form api-key="YOUR_KEY"></typeless-form>
That’s it — the widget automatically detects all fields.
This is one of the easiest ways to add voice input to an HTML form without building custom parsing logic.
This is one of the fastest ways to fill forms using voice input in a real production setup.
When to Use Which Approach
- Use Web Speech API if you want full control and don’t mind building parsing and mapping logic
- Use TypelessForm if you want a ready-to-use solution that works out of the box and supports speech-to-form autofill
Live Demo
Try it: https://typelessform.com
Honest Limitations
- Text fields only
- Web only (no native apps)
- Browser inconsistencies
- ~3–5s latency
- Still validating real-world usefulness
Final Thoughts
If voice is a better input method than typing on mobile, then the rest is just engineering.
TypelessForm (npm: typelessform-widget) is one attempt at solving this — turning natural speech into structured form input.
⸻
TypelessForm is built by Webappski.
npm: typelessform-widget
Demo: https://typelessform.com
What's Next
Looking for 5 websites with long forms to test this in production. Free pilot — I'll help integrate and measure completion rates before/after. Only 5 — I want to work closely with each one.
If interested — demo at typelessform.com or npm install typelessform-widget.
I'm also running a public challenge: $0 to first paying customers in 60 days, no ad budget. Every Tuesday I publish real numbers on LinkedIn — traffic, signups, revenue (or lack of it). No filters.
Would love feedback — especially around browser compatibility and the field-mapping approach. What breaks? What's annoying? What would you do differently? That's the useful stuff.
TypelessForm is built by Webappski. The npm package is typelessform-widget. Demo: typelessform.com.
Keywords: voice input for forms, speech to form, form autofill with voice
Top comments (1)
Happy to answer any technical questions — especially around field mapping and browser quirks. Curious what you'd break first.