Formgong

Voice field for your forms

Last updated

A record button inside your own form. The visitor records a short message, the recording is sent with the form as a file, and Formgong writes the text out on its server. A text box next to the button lets the visitor type instead.

Before you add it

  • File uploads must be on for the form, and your account email must be verified.
  • Every post that carries a file needs a Cloudflare Turnstile token, so the page also needs the Turnstile widget.
  • It works on every plan.

Add it to a form

Put one div with data-formgong-voice inside the form and load voice.js once on the page:

<form action="https://formgong.com/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input name="email" type="email" required>
  <div data-formgong-voice data-name="voice"></div>
  <div class="cf-turnstile" data-sitekey="your_turnstile_site_key"></div>
  <button>Send</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script src="https://formgong.com/voice.js" defer></script>
  • data-name: the field name of the audio file (default voice). The text box is <name>_transcript.
  • data-lang: the language of the button texts. It defaults to the page's lang; languages Formgong does not have get English. It does not change the transcript: the model detects the spoken language.
  • data-max-seconds: a shorter limit for the recording. It can never go above 120 seconds.

The visitor presses Record a voice message, then Stop, hears a preview and can press Record again. The script adds a file input and a text box inside your form and nothing else. A form without method, or with method="get", is switched to POST with multipart/form-data, because a file only travels in a multipart POST. A form you send with fetch(new FormData(form)) picks the file up too.

Transcription

The form is saved and the visitor gets the answer at once. Formgong then sends the recording to Workers AI (@cf/openai/whisper-large-v3-turbo) and stores the text as <name>_transcript. The dashboard marks that field Automatic transcript. If the visitor typed text in the box, the typed text is kept and the model is not called.

Your notifications wait for the text. Email, Telegram, webhooks, Google Sheets and Notion go out after the transcript is written, or after 60 seconds, whichever comes first. The 60 seconds are shared by all recordings of one submission. In tests a 2-minute clip took 20 to 33 seconds.

If the model fails, times out or returns nothing, the notifications go out without a transcript. Nothing is retried. Spam is never sent to the model.

Limits and formats

  • Up to 120 seconds per recording. The browser stops the recording there.
  • Up to 4 MiB per voice file on the server. Two minutes of Opus audio is about 0.5 MB.
  • The usual upload limits still apply: 3 files per submission and your account's storage quota.
  • Formats: audio/webm, audio/mp4, audio/ogg, audio/wav. Chrome, Firefox and Android record WebM/Opus; Safari on iPhone and Mac records MP4/AAC (.m4a). The file header, the extension and the declared type must agree, or the upload is refused with file_type.
  • Recordings are kept and deleted with their submission, so the form's retention period applies (30 days unless you change it).

Voice reviews

On a form that collects reviews, a submission with a rating and a recording becomes a review as usual. The differences:

  • A review with a recording always waits for you as pending, whatever the site's moderation setting. In Automatic (AI) moderation it is held with the reason “has a voice message (you listen to those)” and is not sent to the AI check.
  • When the visitor wrote no review text, the typed transcript becomes the text, or else the server's transcript once it is ready. Rude-word masking applies to it like any review text.
  • The player is on the review card under Reviews → your site. It plays through a signed-in dashboard route, so you and the people with access to that form can hear it. Your site never plays it: the widget, the public JSON and the Google feed carry the text only.

Content-Security-Policy

If your site sends a CSP, allow:

  • script-src https://formgong.com, plus Turnstile's own entries;
  • media-src blob: for the preview player;
  • form-action https://formgong.com if your policy sets form-action.

The browser asks for the microphone, and it only allows that on HTTPS pages. On a plain HTTP page, or where a Permissions-Policy header or an iframe blocks the microphone, the button is disabled or says the microphone was refused. Visitors can still type.

The article Add voice recording to a website form shows the field on a live form.

Questions: support@formgong.com.