Cómo transferir campos ocultos de una URL a un typeform incrustado de forma dinámica (para usuarios avanzados)

El código de incrustación que te facilita Typeform te permite añadir valores estáticos para tus campos ocultos y transferirlos a typeforms incrustados en páginas web o correos electrónicos. Pero, ¿qué ocurre si tienes previsto que los valores de esos campos ocultos varíen con el tiempo, en función de cómo accedan los usuarios a tu web?

En este artículo hablaremos de cómo transferir valores correspondientes a campos ocultos de la dirección URL de una página web a un typeform incrustado de forma dinámica. Para poder configurarlo, necesitarás tener acceso al código de tu página web. Si no estás cómodo/a editando este código, te conviene tener cerca a algún/a amigo/a que entienda de tecnología para que te eche una mano.

¿Cómo puedo transferir los valores de mis campos ocultos a través de la URL de mi página web para que aparezcan en mi typeform?

Para transferir los valores de los campos ocultos a través de la URL de tu página web a un typeform incrustado tendrás que hacer unas pequeñas modificaciones en el código (si quieres ver las instrucciones para hacer esto mismo con typeforms incrustados en modo "página entera", consulta el siguiente apartado). Asegúrate de haber añadido los campos ocultos en tu typeform antes de continuar.

1. En primer lugar, accede al código de tu página web y localiza el lugar exacto en el que está incrustado tu formulario:

¡Advertencia! Actualmente, esta solución no funciona en páginas web desarrolladas con Wix. Wix explica los motivos aquí.

2. Añade lo siguiente justo después del atributo "data-tf-live attribute":

data-tf-transitive-search-params="nombredelcampo"

3. Sustituye “nombredelcampo” por el nombre del campo oculto que quieras transferir a través de la URL a tu página web.

Si quieres incluir más de un campo oculto, basta con que separes sus nombres con una coma en el valor del atributo:

data-tf-transitive-search-params=”primercampo, segundocampo, tercercampo”

Es decir, que si, por ejemplo, la URL a tu página web fuera www.misproductos.es/?nombre=Juan&pais=Argentina, tendrías que escribir lo siguiente:

data-tf-transitive-search-params=”nombre, pais”

Siguiendo con el ejemplo anterior, si quisiéramos usar los campos "nombre" y "país", nuestro código tendría inicialmente esta estructura:

Y esta otra, después de haber añadido el nuevo atributo:

</div><script src="//embed.typeform.com/next/embed.js"></script>

¿Cómo puedo transferir los valores de mis campos ocultos a través de la URL de mi página web para que aparezcan en mi typeform incrustado a página entera?

Para transferir los valores de los campos ocultos a través de la URL de tu página web a un typeform incrustado a página entera necesitarás tener acceso al código de tu página web y hacer unas pequeñas modificaciones en el código.

1. Copia el código de incrustación de tu typeform en modo de página entera y pégalo en el código de tu página web. (En este ejemplo, nosotros vamos a usar un typeform con un campo oculto denominado "nombre".)

2. Accede al código de tu página web y localiza el lugar exacto en el que está incrustado tu formulario. Debería tener un aspecto similar a este:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>New orders</title>
   <style>
   * {
       margin: 0;
       padding: 0;
   }
   html,
   body,
   #wrapper {
       width: 100%;
       height: 100%;
   }
   iframe {
       border-radius: 0 !important;
   }
   </style>
</head>
<body>
   <div data-tf-live="01H67M2PG5WSWWCR04W7TDZJZY">
   </div><script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>

3. Localiza el código que se encuentra entre las dos etiquetas <body>.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>New orders</title>
   <style>
   * {
       margin: 0;
       padding: 0;
   }
   html,
   body,
   #wrapper {
       width: 100%;
       height: 100%;
   }
   iframe {
       border-radius: 0 !important;
   }
   </style>
</head>
<body>
   <div id="wrapper" data-tf-widget="y28S4zB" data-tf-inline-on-mobile></div>
   <script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>

4. Vuelve a tu cuenta de Typeform y abre el formulario que estás incrustando. Copia el código de incrustación correspondiente al modo "estándar" y utilízalo para sustituir con él el código comprendido entre las dos etiquetas <body>.

Ahora, tu código debería tener un aspecto similar a este:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>New orders</title>
   <style>
   * {
       margin: 0;
       padding: 0;
   }
   html,
   body,
   #wrapper {
       width: 100%;
       height: 100%;
   }
   iframe {
       border-radius: 0 !important;
   }
   </style>
</head>
<body>
   <div data-tf-live="01H67G6PQYGAPYDZZX1EW82F2V">
   </div><script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>

¡Consejo! Dado que estás insertando un código de incrustación en modo estándar en el cuerpo de un iframe de pantalla completa, puedes editar la CSS del iframe para cambiar la manera en la que se mostrará el typeform incrustado. De esta forma, podrías, por ejemplo, añadir una regla a la estructura del cuerpo para eliminar los márgenes que aparecen alrededor del formulario.

5. Añade lo siguiente justo después del atributo "data-tf-live attribute":

data-tf-transitive-search-params="nombredelcampo"

6. Sustituye “nombredelcampo” por el nombre del campo oculto que quieras transferir a través de la URL de tu página web. Es decir, que si, por ejemplo, la URL de tu página web fuera www.misproductos.es/?nombre=Juan, tendrías que escribir lo siguiente:

data-tf-transitive-search-params="nombre"

Si quisieras incluir más de un campo oculto, bastaría con que separases sus nombres con una coma en el valor del atributo:

data-tf-transitive-search-params=”primercampo, segundocampo, tercercampo”

Cuando termines de hacer todo esto, el código de incrustación de tu typeform a página completa tendrá una estructura similar a esta:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>New orders</title>
   <style>
   * {
       margin: 0;
       padding: 0;
   }
   html,
   body,
   #wrapper {
       width: 100%;
       height: 100%;
   }
   iframe {
   border-radius: 0 !important;
   }
   </style>
</head>
<body>
 <div data-tf-live="01H67G6PQYGAPYDZZX1EW82F2V" data-tf-transitive-search-params="nombre">
 </div><script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>

Cómo transferir campos ocultos de una URL a un typeform incrustado de forma dinámica (para usuarios avanzados)

¿Cómo puedo transferir los valores de mis campos ocultos a través de la URL de mi página web para que aparezcan en mi typeform?

¡Advertencia! Actualmente, esta solución no funciona en páginas web desarrolladas con Wix. Wix explica los motivos aquí.

¿Cómo puedo transferir los valores de mis campos ocultos a través de la URL de mi página web para que aparezcan en mi typeform incrustado a página entera?

Consulta con nuestra comunidad