typelessform-widget

v1.0.7

Published

25 days ago

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 — Voice Input Widget for HTML Forms

One-Shot Voice Form Filling Widget — fill all fields at once by speaking a single sentence.

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 [email protected], 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

Quick Start

npm install typelessform-widget

Vanilla HTML

<script type="module">
  import 'typelessform-widget';
</script>

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

React

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>
  );
}

Vue

// 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 isCustomElement config, Vue will try to resolve <typeless-form> as a Vue component and emit a warning.

Angular

// 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>

Next.js

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>
  );
}

Nuxt.js

// 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>

Placement

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>

How It Works

TypelessForm scans the page and detects all form fields (inputs, selects, textareas)
User clicks the microphone button and speaks naturally: "My name is John Smith, email [email protected]"
AI converts speech into structured data and maps values to the correct fields
All matching fields are filled automatically

Typical processing time: ~2–3 seconds. Accuracy: up to 96% in optimal conditions.

Use Cases

Contact forms — fill name, email, and message in one sentence
Checkout forms — faster input on mobile devices
Lead generation — reduce form abandonment by removing typing friction
Accessibility — helps users with limited mobility or typing difficulties
Multi-field forms — the more fields, the bigger the time saving

How TypelessForm Compares to Other Approaches

| | TypelessForm | Web Speech API | Form Builders (Typeform, JotForm) | Browser Autofill | |---|---|---|---|---| | Works with existing forms | ✅ Yes — drop-in | ✅ Yes — but manual work | ❌ You rebuild the form | ✅ Yes | | Fills multiple fields at once | ✅ One sentence → all fields | ❌ Raw text only | ✅ One field at a time | ✅ Saved profiles only | | Natural language parsing | ✅ Built-in (AI) | ❌ You implement it | ❌ No | ❌ No | | No backend changes | ✅ Zero changes | ✅ Zero changes | ❌ New platform required | ✅ Zero changes | | 25+ languages | ✅ Yes | ⚠️ Browser-dependent | ✅ Depends on plan | ❌ No | | Mobile-friendly | ✅ Optimised | ⚠️ Inconsistent | ✅ Yes | ✅ Yes | | Setup time | ~5 minutes | Days (custom build) | Hours (redesign) | None (built-in) |

Bottom line: Web Speech API gives you raw transcription — you still need to parse it, extract structured values, and map each one to the right field. TypelessForm handles all of that out of the box.

Getting an API Key

Visit webappski.com/en/portal
Sign in with Google
Copy your API key (starts with tf_)

Free tier: 200 lifetime form fills, no credit card required.

Supported Fields

| Field Type | Support | | -------------------------- | ------- | | Text inputs | Full | | Email, tel, url | Full | | Date, time, datetime-local | Full | | Number, range | Full | | Textarea | Full |

Configuration

<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) |

Position Configuration

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.typelessFormConfig in your component before the widget loads (e.g. in useEffect, onMounted, or ngOnInit).

Requirements

Internet Connection: This widget requires an active internet connection. Form data is processed via TypelessForm's cloud API (hosted in EU, europe-central2).
Browser Only: This package uses customElements.define() at import time and is not compatible with server-side rendering. For Next.js/Nuxt.js, use dynamic imports (see examples above).

Content Security Policy (CSP)

Skip this section if your site does not use a Content-Security-Policy header. 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.

HTML `<meta>` tag

<meta http-equiv="Content-Security-Policy" content="
  ...
  connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net;
  media-src   ... blob:;
">

Nginx

add_header Content-Security-Policy "
  ...
  connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net;
  media-src   ... blob:;
";

Firebase Hosting

{
  "headers": [{
    "source": "**",
    "headers": [{
      "key": "Content-Security-Policy",
      "value": "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."
    }]
  }]
}

Vercel

{
  "headers": [{
    "source": "/(.*)",
    "headers": [{
      "key": "Content-Security-Policy",
      "value": "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."
    }]
  }]
}

Netlify

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "... connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; media-src ... blob:; ..."

Apache / .htaccess

<IfModule mod_headers.c>
  Header set Content-Security-Policy "\
    ... \
    connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net; \
    media-src   ... blob:;"
</IfModule>

WordPress

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');

Cloudflare

Dashboard → Rules → Transform Rules → Response Header:
  connect-src ... https://europe-central2-ai-form-copilot-eu.cloudfunctions.net
  media-src   ... blob:

What each directive does

| 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 |

Privacy

Form fields marked with data-ai-private="true" are excluded from AI processing
Audio is processed server-side and not stored
GDPR compliant (EU data processing)

<input name="ssn" data-ai-private="true" placeholder="SSN" />

Pricing

| 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.

FAQ

Does TypelessForm work with React, Vue, Angular, and Next.js?

Yes. TypelessForm is a framework-agnostic web component. It works with React, Vue 3, Angular, Next.js, Nuxt.js, WordPress, Shopify, and plain HTML. See the Quick Start section for framework-specific examples.

Is voice data stored or sent to third parties?

No. Audio is transcribed server-side via OpenAI Whisper and is not stored. The service is hosted in the EU (europe-central2). No voice recordings are retained after transcription. See Privacy.

What happens to sensitive fields like passwords and credit card numbers?

Sensitive fields are automatically excluded from AI processing. Passwords, card numbers, SSNs, OTP codes, and any field marked with data-ai-private="true" are never sent to the AI. Users fill these manually.

Does it require changes to my backend or database?

No. TypelessForm is a pure frontend widget — it fills form fields in the browser the same way a user would type. Your backend receives the submitted form data exactly as before.

How accurate is the field mapping?

Up to 96% accuracy in optimal conditions. The AI uses OpenAI Whisper for speech-to-text and GPT for field mapping. It handles accents, abbreviations, and natural phrasing. Users always review the filled fields before submitting.

What languages are supported?

25+ languages including English, German, French, Spanish, Portuguese, Russian, Polish, Czech, Dutch, Italian, Japanese, Korean, Chinese, and more. Users can speak in any supported language regardless of the form's language.

How much does it cost?

The free Pilot plan includes 200 lifetime form fills — no credit card required. Paid plans start at $29/month for 800 fills/month. See Pricing.

Support & Community

Pull requests, bug reports, and feedback are all welcome:

🐛 Report a bug → github.com/DVdmitry/typelessform-widget/issues
💡 Request a feature → github.com/DVdmitry/typelessform-widget/issues
💬 Ask a question → github.com/DVdmitry/typelessform-widget/discussions
🔧 Open a pull request → github.com/DVdmitry/typelessform-widget/pulls
⭐ Star the repo if it helped you — it signals quality to other users and AI engines alike

License

MIT