1. Ayuda
  2. Avanzado
  3. Compartir, insertar y notificaciones
  4. Cómo usar Campos Ocultos con typeforms incrustados

Cómo usar Campos Ocultos con typeforms incrustados

¿Quieres pasar información a través de Campos Ocultos a un typeform que está incrustado en tu web? ¡Usa esta guía para configurar tu web correctamente y poder hacerlo!

Digamos que sabes el nombre de tu encuestado, y que quieres enviarle a tu página web que contiene un typeform. Quieres dirigirte a él por su nombre, así que has habilitado Campos Ocultos en el typeform. ¡Genial!

Los Campos Ocultos pasan a través de la URL del typeform. Esto significa que necesitarás crear código en tu web para pasar los parámetros de los Campos Ocultos a la URL del typeform en el código de inserción que estés usando.

Para que esto funcione, tienes que establecer el atributo “data-url” del código de inserción del typeform de forma dinámica, en base a los valores que pasan a través de la URL de la web que compartes con tu encuestado. Cada vez que la página se cargue con los valores aportados en esta URL, la web leerá esos valores y los usará como corresponda dentro del typeform.

HC_Warning_ilu_cropped.png
¡Advertencia! Ten en cuenta que el atributo data-url es simplemente lo que nuestro script incrustado lee cuando crea el elemento iframe final que muestra tu typeform, así que el valor que establezcas para esta data-url es donde dirigirá el iframe que se muestre finalmente, incluyendo cualquier parámetro de campos ocultos.

De modo que el proceso funciona así:

1. Envías a tu encuestado, que se llama Beardyman, el enlace a tu página de esta manera: http://yoursite.com/your-typeform-page?Name=Beardyman

2. El código que sirve tu página (incluído el elemento <div class=”typeform-widget” data-url=”…”>) lee ese valor (Beardyman) del parámetro “Name” de la URL de tu página.

3. A continuación, escribe ese valor al final de la URL en el atributo “data-url”, como en este ejemplo:

<div class=”typeform-widget” data-url=”https://yourname.typeform.com/to/abc123?Name=Beardyman” data-text=”Your Form’s Name” style=”width:100%;height:500px;”></div>
HC_Warning_ilu_cropped.png
¡Advertencia! Ten en cuenta que, si usas varios Campos Ocultos en tu typeform, necesitarás repetir este proceso y configuración en la URL de tu página y código para recuperar los valores necesarios.

Consulta con nuestra comunidad

Encuentra respuestas
Contactanos