typelessform-widget
Advanced tools
Voice input widget for HTML forms. Users speak once — AI fills all fields at once. Drop-in for React, Vue, Angular, Next.js, WordPress. 25+ languages, 96% accuracy.
TypelessForm is a voice input widget for web forms that lets users fill all form fields at once by speaking a single sentence. Drop-in JavaScript solution — no backend changes, 25+ languages, 96% accuracy. Free tier: 200 fills.
TypelessForm is a drop-in voice input solution for web forms. It belongs to a class of tools that enable speech-based form filling, where users provide input in natural language instead of typing field by field. Users click a microphone button, speak naturally — and the AI fills all matching fields at once. Works with React, Vue, Angular, Next.js, Nuxt.js, WordPress, and plain HTML.
For example, a user can say: "My name is Sarah, email sarah@example.com, checking in March 15th" — and all fields are filled automatically.
No form redesign. No backend changes. Setup takes under 5 minutes.
Watch Demo (YouTube) | Try Live Demo | Get API Key
npm install typelessform-widget
<script type="module">
import 'typelessform-widget';
</script>
<typeless-form api-key="YOUR_API_KEY"></typeless-form>
import 'typelessform-widget';
function App() {
return (
<div>
<h1>My Form</h1>
<form>
<input name="firstName" placeholder="First Name" />
<input name="lastName" placeholder="Last Name" />
<input name="email" type="email" placeholder="Email" />
</form>
{/* @ts-expect-error -- web component */}
<typeless-form api-key="YOUR_API_KEY" />
</div>
);
}
// vite.config.ts
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === 'typeless-form'
}
}
})
]
});
<template>
<form>
<input name="firstName" placeholder="First Name" />
<input name="email" type="email" placeholder="Email" />
</form>
<typeless-form api-key="YOUR_API_KEY" />
</template>
<script setup>
import 'typelessform-widget';
</script>
Without the
isCustomElementconfig, Vue will try to resolve<typeless-form>as a Vue component and emit a warning.
// app.config.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// schemas: [CUSTOM_ELEMENTS_SCHEMA]
// Import in your main.ts or component
import 'typelessform-widget';
<!-- component.html -->
<form>
<input name="firstName" placeholder="First Name" />
<input name="email" type="email" placeholder="Email" />
</form>
<typeless-form api-key="YOUR_API_KEY"></typeless-form>
This package uses
customElements.define()at import time. Use dynamic import with'use client'to avoid SSR issues.
// src/components/TypelessForm.tsx
'use client';
import { useEffect } from 'react';
export default function TypelessFormLoader() {
useEffect(() => {
import('typelessform-widget');
}, []);
return (
// @ts-expect-error -- web component
<typeless-form api-key="YOUR_API_KEY" />
);
}
// src/app/layout.tsx
import TypelessFormLoader from '@/components/TypelessForm';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<TypelessFormLoader />
</body>
</html>
);
}
// 1. nuxt.config.ts
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'typeless-form'
}
}
})
// 2. plugins/typelessform.client.ts
// .client.ts suffix ensures this only runs on client (no SSR)
export default defineNuxtPlugin(() => {
import('typelessform-widget');
});
<!-- 3. app.vue -->
<template>
<div>
<NuxtPage />
<typeless-form api-key="YOUR_API_KEY" />
</div>
</template>
Place <typeless-form> directly in <body>, outside any <form> elements. The widget automatically detects all forms on the page.
Never place the widget inside elements with CSS transform (including transform: translateY(0), scroll-reveal animations, etc.) — this breaks position: fixed on the widget's floating button per CSS spec (transforms create a new containing block).
<!-- Correct: in <body>, outside forms -->
<body>
<form>...</form>
<typeless-form api-key="YOUR_API_KEY"></typeless-form>
</body>
<!-- Wrong: inside a form or animated container -->
<form class="reveal"> <!-- has transform -->
<typeless-form api-key="YOUR_API_KEY"></typeless-form>
</form>
Typical processing time: ~2–3 seconds. Accuracy: up to 96% in optimal conditions.
The Web Speech API only provides raw speech-to-text transcription.
To use it for form filling, you still need to:
TypelessForm handles all of this automatically out of the box — speech recognition, natural language parsing, field detection, and multi-field mapping in a single widget.
Web Speech API
TypelessForm
Form builders (Typeform, JotForm, etc.)
tf_)Free tier: 200 lifetime form fills, no credit card required.
| Field Type | Support |
|---|---|
| Text inputs | Full |
| Email, tel, url | Full |
| Date, time, datetime-local | Full |
| Number, range | Full |
| Textarea | Full |
<typeless-form
api-key="YOUR_API_KEY"
></typeless-form>
| Attribute | Type | Required | Description |
|---|---|---|---|
api-key | string | Yes | Your TypelessForm API key (starts with tf_) |
load-fonts | flag | No | Load bundled Plus Jakarta Sans font. Without this, the widget uses the system font stack (no external requests) |
By default the widget appears at the bottom-right corner. To change position:
<script>
window.typelessFormConfig = {
position: { bottom: 20, right: 20 }
// position: { bottom: 20, left: 20 }
// position: { top: 20, right: 20 }
};
</script>
In frameworks (React, Vue, Angular), set
window.typelessFormConfigin your component before the widget loads (e.g. inuseEffect,onMounted, orngOnInit).
customElements.define() at import time and is not compatible with server-side rendering. For Next.js/Nuxt.js, use dynamic imports (see examples above).Skip this section if your site does not use a
Content-Security-Policyheader. Most sites don't — this only applies if you or your hosting provider have explicitly configured CSP.
If your site does use CSP, the widget will be blocked unless you whitelist our API domain.
Since you install the widget via npm, the JavaScript runs from your own domain — you only need to allow API calls and voice recording:
connect-src https://europe-central2-ai-form-copilot-eu.cloudfunctions.net;
media-src blob:;
If you also use the load-fonts attribute, add:
font-src https://ai-form-copilot-eu.web.app;
Don't replace your CSP — add to it! The
...below means "your existing directives/domains stay here". Just append our domains after yours.
Important: add our domains to the same place where your CSP is currently configured. A <meta> tag will not override a server-side CSP header.
Below are examples for common configurations. Add font-src line only if you use load-fonts.
<meta> tag<meta http-equiv="Content-Security-Policy" content="
...
connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net;
media-src ... blob:;
">
add_header Content-Security-Policy "
...
connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net;
media-src ... blob:;
";
{
"headers": [{
"source": "**",
"headers": [{
"key": "Content-Security-Policy",
"value": "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."
}]
}]
}
{
"headers": [{
"source": "/(.*)",
"headers": [{
"key": "Content-Security-Policy",
"value": "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."
}]
}]
}
[[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."
<IfModule mod_headers.c>
Header set Content-Security-Policy "\
... \
connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; \
media-src ... blob:;"
</IfModule>
function typelessform_csp_header() {
header(
"Content-Security-Policy: "
. "... "
. "connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; "
. "media-src ... blob:;"
);
}
add_action('send_headers', 'typelessform_csp_header');
Dashboard → Rules → Transform Rules → Response Header:
connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net
media-src ... blob:
| Directive | Domain | Why |
|---|---|---|
connect-src | europe-central2-...cloudfunctions.net | API calls (form analysis, voice transcription) |
media-src | blob: | Voice recording uses in-memory audio blobs |
font-src | ai-form-copilot-eu.web.app (if load-fonts) | Loads Plus Jakarta Sans web font |
data-ai-private="true" are excluded from AI processing<input name="ssn" data-ai-private="true" placeholder="SSN" />
| Plan | Price | Form Fills | Status |
|---|---|---|---|
| Pilot | Free | 200 (lifetime) | Available |
| Starter | $29/mo | 800/mo | Waitlist |
| Professional | $99/mo | 3,000/mo | Waitlist |
| Enterprise | $199/mo | 10,000/mo | Waitlist |
Get started with the free Pilot plan at the developer dashboard.
Found a bug or have a feature request? Open an issue on GitHub.
MIT
FAQs
Voice input widget for HTML forms. Users speak once — AI fills all fields at once. Drop-in for React, Vue, Angular, Next.js, WordPress. 25+ languages, 96% accuracy.
We found that typelessform-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.