The fastest way to add voice input to any HTML form is with a drop-in widget like TypelessForm. Add one script tag to your page. The widget auto-detects all form fields. Users click a microphone button, speak naturally in 25+ languages, and AI fills every field at once. Setup takes under 5 minutes. No backend changes needed. Free tier with 200 fills.

The Problem

Users hate typing into forms. 68% abandon complex forms before finishing. You want to add voice input, but building speech-to-text plus intelligent field mapping from scratch takes months of development.

There's a faster way. One script tag, 5 minutes, and your forms accept voice input in 25+ languages.

Step 1: Get a Free API Key

Sign up at webappski.com/portal and get your API key. The Pilot tier is free — 200 lifetime form fills, no credit card required.

Step 2: Add the Script Tag

Add one line to your HTML page, before the closing </body> tag:

<script type="module"
  src="https://cdn.jsdelivr.net/npm/typelessform-widget@latest/dist/typelessform.js">
</script>

Step 3: Add the Custom Element

Place the TypelessForm element anywhere on the page:

<typeless-form api-key="YOUR_API_KEY"></typeless-form>

Step 4: Done

That's it. The widget automatically detects all form fields on the page — inputs, selects, textareas, date pickers. A microphone button appears. Users click it, speak naturally, and AI fills every field at once.

Complete Working Example

Copy this into an HTML file and open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Voice Form Demo</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form id="contact">
    <input name="name" placeholder="Full Name" />
    <input name="email" type="email" placeholder="Email" />
    <input name="phone" type="tel" placeholder="Phone" />
    <textarea name="message" placeholder="Your message"></textarea>
    <button type="submit">Send</button>
  </form>

  <script type="module"
    src="https://cdn.jsdelivr.net/npm/typelessform-widget@latest/dist/typelessform.js">
  </script>
  <typeless-form api-key="YOUR_API_KEY"></typeless-form>
</body>
</html>

User says: "Hi, I'm Sarah Chen, email sarah@chen.com, phone 555-0199, I need help integrating voice into my React app"

Result:

{
  "name": "Sarah Chen",
  "email": "sarah@chen.com",
  "phone": "555-0199",
  "message": "I need help integrating voice into my React app"
}

All 4 fields fill at once from one spoken sentence.

Alternative: Install via npm

If you use a JavaScript framework:

npm install typelessform-widget

Then import it in your component:

import 'typelessform-widget';

And use the custom element in your template:

<typeless-form api-key="YOUR_API_KEY"></typeless-form>

What Happens Under the Hood

  1. DOM scan. The widget detects all form fields on the page — names, types, labels, placeholders.
  2. User speaks. They click the mic button and say their information in any order, any language.
  3. Transcription. OpenAI Whisper converts speech to text with 96% accuracy across 25+ languages.
  4. Field mapping. GPT analyzes the transcript and maps each piece of data to the correct form field.
  5. Review and fill. All fields fill simultaneously. The user reviews, edits if needed, and submits.

Works with Any Framework

React: Use the custom element directly in JSX. No wrapper needed — web components work natively in React 19+.

Vue: Add <typeless-form> to any Vue template. Register as a custom element in your Vue config if needed.

Angular: Add CUSTOM_ELEMENTS_SCHEMA to your module, then use the element in any template.

WordPress: Paste the script tag in your theme's footer or use a plugin like "Insert Headers and Footers."

Plain HTML: Just add the two lines shown above. No build step, no framework, no configuration.

Common Questions

See the FAQ section below for quick answers to the most common questions about adding voice input to forms.