Cómo añadir respuestas de voz a tus formularios de FormAssembly

Por qué poner voz en una pregunta abierta de FormAssembly

La pregunta abierta es donde un formulario de FormAssembly se gana el sueldo, y también es donde la gente se rinde primero. Escribir un párrafo pensado en el teclado del móvil es trabajo, así que la mayoría escribe lo más corto que le permita continuar.

En siete estudios de cliente que medimos, las respuestas escritas promediaron 10 palabras y las habladas a las mismas preguntas promediaron 23 — alrededor del doble, con el cuestionario sin tocar (cómo lo medimos). El diseño del formulario no cambia en nada. El entrevistado ve un botón de micrófono junto a la caja de texto, y quien prefiera escribir sigue escribiendo.

Voice Capture se ocupa de la grabación y la transcripción. FormAssembly sigue siendo tu plataforma, tu lógica, tus conectores y tus datos.

FormAssembly no es Formstack

Los dos nombres se confunden constantemente, incluso entre quienes tienen cuenta en uno de ellos. FormAssembly sirve los formularios desde tfaforms.com o tfaforms.net y nombra sus campos tfa_1, tfa_2 y así. Si la URL de tu formulario y los nombres de tus campos no se parecen a eso, probablemente estés en Formstack, que tiene su propia instalación.

Qué hace falta

Una sola cosa: un lugar donde ejecutar JavaScript en la página que muestra la pregunta abierta. En FormAssembly eso suele ser el área de código personalizado del formulario, y en algunos planes un elemento HTML al final del formulario hace el mismo trabajo. Comprueba cuál de los dos te ofrece tu plan antes de empezar — todo lo de abajo da por hecho que el código llega a ejecutarse.

El bloque

Reemplaza proj_XXXXXXXX por la clave de tu proyecto y ajusta data-lang al idioma de tu trabajo de campo.

<script>
window.__VC_PRELOADED = true;
try {
  // FormAssembly nombra cada campo tfa_N. Se prefiere eso; si no,
  // cualquier textarea del formulario.
  var ta = document.querySelector('textarea[id^="tfa_"]')
        || document.querySelector('.wFormContainer textarea')
        || document.querySelector('form textarea');

  if (!ta || !ta.id) {
    console.warn('[VoiceCapture] No hay un campo de texto abierto con id en esta pagina. No se instalo el microfono.');
  } else if (!document.getElementById('gv-container')) {
    var wrap = document.createElement('div');
    wrap.id = 'gv-container';
    wrap.setAttribute('data-project','proj_XXXXXXXX');
    wrap.setAttribute('data-target','textarea[id="'+ta.id+'"]');
    wrap.setAttribute('data-lang','es');
    ta.parentNode.insertBefore(wrap, ta);

    if (!document.querySelector(wrap.getAttribute('data-target'))) {
      console.warn('[VoiceCapture] data-target no resuelve. La transcripcion NO llegara a tu formulario.');
    }

    if (!document.getElementById('gv-script')) {
      var s = document.createElement('script');
      s.id = 'gv-script';
      s.src = 'https://api.voicecapture.ai/voice.js';
      s.onload = function(){ try { if (window.GeniusVoice && GeniusVoice.init) GeniusVoice.init(wrap); } catch(e){} };
      document.body.appendChild(s);
    }
  }
} catch(e) {}
</script>

Qué está haciendo ese bloque

El widget escribe la transcripción en el campo de respuesta de tu formulario, y encuentra ese campo a través del atributo data-target. El bloque de arriba te lo configura solo: localiza el textarea de la pregunta abierta, lee su id y apunta data-target ahí.

Esta es la parte que conviene entender, porque saltársela falla en silencio. Sin data-target, el widget cae a un selector que solo existe en Alchemer. En una página de FormAssembly ese respaldo no coincide con nada — y el fallo tiene toda la pinta de un éxito: el micrófono aparece, la grabación se sube, la transcripción se ve en pantalla y llega a tu panel de Voice Capture. Lo único que no ocurre es lo que importa. El campo del formulario se envía vacío, y te enteras al exportar.

Compruébalo antes de salir a campo

No nos creas a nosotros, y no tomes por prueba que aparezca el micrófono. Dos comprobaciones, en este orden.

Una. Graba diez segundos en el formulario real, abre la consola del navegador y ejecuta:

document.querySelector('textarea[id^="tfa_"]').value

Si devuelve tu texto transcrito, el write-back funciona. Si devuelve una cadena vacía, la transcripción se quedó en Voice Capture y nunca llegó al campo.

Dos. Envía esa respuesta de prueba y ábrela dentro de FormAssembly. El verbatim tiene que estar ahí, en su campo, en la fila. Esta es la comprobación que de verdad cierra el asunto, y lleva un minuto.

Dos restricciones con las que hay que diseñar

Una pregunta abierta por página, visible al cargar. El bloque se engancha al primer textarea que encuentra. Dos abiertas en la misma página es ambiguo, y una abierta escondida tras lógica condicional todavía no existe en el momento en que corre el código.

Los iframes lo rompen. El widget y el campo tienen que vivir en el mismo documento. Si empotras tu formulario de FormAssembly en un iframe dentro de otro sitio, document.querySelector no puede cruzar ese límite y data-target no resolverá nunca. Usa la URL del formulario alojado, o mete el bloque dentro del documento del iframe.

Cómo se unen las transcripciones con tus datos

Aquí FormAssembly lo pone más fácil que la mayoría, y vale la pena explicar por qué. En una plataforma que no le da al widget nada con lo que identificar la respuesta, hay que cablear un identificador en un atributo data-session o acabas cruzando transcripciones con entrevistas por hora — algo tolerable con un puñado de pruebas y francamente desagradable sobre una muestra real.

En FormAssembly no hace falta nada de eso, siempre que el write-back funcione. La transcripción se escribe en un campo normal del formulario, así que viaja en el mismo envío, en la misma fila, al mismo export y al mismo conector que ya usas. No hay nada que cruzar.

Que es exactamente por lo que la comprobación de más arriba no es un formalismo. Es la diferencia entre una integración que entrega datos y una que, calladamente, no.

Si no encuentra el campo

El bloque escribe un aviso en la consola del navegador en vez de fallar en silencio. Abre la consola en la página del formulario y busca una línea que empiece por [VoiceCapture]. Si dice que no encontró ningún campo con id, hay que ajustar el selector al marcado de tu formulario — la guía del embed genérico explica cómo fijar un selector estable, y puedes poner data-target a mano una vez lo sepas.