The shortest path to voice input on any HTML form is a drop-in widget like TypelessForm. Add one script tag to your page. The widget auto-detects all form fields. Users click a Fill by Voice button, speak naturally in 25 interface languages, and AI fills every field at once. Setup takes three steps. No backend changes needed. Free tier with 200 fills.

The Problem

Users hate typing into forms: 17% of US online shoppers have abandoned an order because the checkout was too long or complicated (Baymard Institute, 2025). You want to add voice input, but building speech-to-text plus intelligent field mapping from scratch takes months of development.

There's a shorter way. One script tag, three steps, and your forms accept voice input in 25 interface 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 src="https://ai-form-copilot-eu.web.app/widget-build/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 Fill by Voice 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 src="https://ai-form-copilot-eu.web.app/widget-build/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 Fill by Voice button and say their information in any order, any language.
  3. Transcription. The OpenAI speech model converts speech to text at recognition quality that depends on microphone and noise and is not limited to our 25 interface 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.

Revised 4 and 5 October 2026: the voice-storage lines in this article now match our security page. We keep no voice recordings on our own infrastructure. OpenAI, our speech provider, does not keep the audio, but for its own abuse monitoring it keeps the requests and responses of its language-model calls (the transcript text, the descriptions of the form fields and the filled values) for up to 30 days, and we cannot have it deleted sooner. Earlier wording about what is held, and for how long, is replaced. The lines on sensitive fields now say that such fields are not filled by voice; digits a person says aloud still reach transcription.

Revised 5 October 2026: the lines on sensitive fields now also say what happens to a value that is already in a field. A value in a field that is not marked data-ai-private goes to our API with the request that fills the form; we do not store it and do not pass it to OpenAI.