Resolución de problemas relacionados con typeforms incrustados

Incrustar un typeform en tu página web te permite llegar a más gente y recibir más respuestas (y, además, ¡queda muy guay!). Por eso, a continuación, encontrarás algunos consejos para que puedas estar seguro/a de que la incrustación que has configurado funciona correctamente.

Ten en cuenta que algunas de estas recomendaciones están dirigidas a usuarios que se sienten cómodos editando el código de su página web. Si no es tu caso, a lo mejor te conviene tener a mano a algún/a amigo/a que sepa de programación, solo por si acaso. Y, si buscas más información, también puedes consultar el apartado de preguntas frecuentes para desarrolladores que tenemos sobre el tema.

- El typeform que he incrustado en mi página web no se ve

- Aparece un error de conexión ("form.typeform.com refused to connect") en mi formulario incrustado

- Mi typeform incrustado no se muestra correctamente o se solapa con otros elementos de mi página web

- En vez de mi typeform incrustado, solo se ve un cuadro en blanco

- No veo el botón de lanzamiento de mi typeform

- Quiero ocultar la barra de desplazamiento en mi typeform incrustado

- Quiero eliminar el espacio de relleno superior que aparece en mi typeform incrustado

- Mi typeform incrustado se muestra en forma de ventana emergente a pantalla completa en dispositivos móviles

- Quiero activar el enfoque automático (autofocus) en mi typeform incrustado

- Estoy usando un marco integrado (iframe) y no quiero que mi formulario se enfoque automáticamente

- ¿Cómo puedo mostrar un vídeo a pantalla completa en un typeform incrustado?

- Mi typeform incrustado en modo "panel lateral" o "desplegable" aparece debajo del contenido de la página

El typeform que he incrustado en mi página web no se ve

En primer lugar, comprueba que el código de incrustación que has usado sea idéntico al código facilitado por Typeform. Es importante si quieres asegurarte de que la incrustación se muestra correctamente en pantalla.

Si has incrustado el código a través de un plugin o complemento, prueba a pegar el código directamente en tu página web y comprueba si es posible que haya algún otro complemento en ella que pueda estar impidiendo que el formulario se visualice correctamente.

También conviene que compruebes que el tamaño del marco de visualización es lo suficientemente grande como para que el formulario se vea correctamente. Te recomendamos que establezcas una altura para la incrustación de, al menos, 500 px.

No te recomendamos que hagas cambios en el código CSS o HTML de la incrustación, porque esto podría causar problemas de visualización inesperados. Por ejemplo, suele haber complicaciones cuando se modifica la CSS de una incrustación para que esta ocupe el 100 % de la altura del contenedor principal (en lugar de configurar una altura establecida de 500 px o más). Si el contenedor principal es pequeño o no tiene un tamaño concreto, el formulario se verá demasiado pequeño en tu página web o puede que incluso ni aparezca en pantalla (al fin y al cabo, el 100 % de 0 es 0). Además, lamentablemente, nuestro equipo no podrá ayudarte a resolver este tipo de problemas técnicos si personalizas el código.

En el siguiente gráfico puedes ver el lío que se puede montar cuando se utiliza una altura relativa en la CSS de un formulario incrustado en lugar de establecer una altura concreta en píxeles.

¿Tienes otro tipo de problemas relacionados con la visualización de tu formulario? ¡A lo mejor esta página de consejos para la resolución de problemas técnicos te sirve de ayuda!

Y si, aun así, no acabas de resolverlo, ponte en contacto con nosotros y te ayudaremos a la mayor brevedad posible.

Aparece un error de conexión ("form.typeform.com refused to connect") en mi formulario incrustado

Es posible que sea porque tu dominio utiliza HTTP. Nuestros typeforms solo pueden cargarse en dominios seguros que cuenten con el protocolo HTTPS, por lo que necesitarás un certificado SSL para poder cargar correctamente el formulario.

Mi typeform incrustado no se muestra correctamente o se solapa con otros elementos de mi página web

Antes de nada, comprueba los valores asignados a la propiedad "z-index" en toda la página. Por defecto, para los modos modales (popup, drawer_left y drawer_right), así como en dispositivos móviles (en los que siempre se muestran los typeforms en forma de modales), nosotros usamos un valor para la propiedad "z-index" de 1000, así que deberás configurar los valores de "z-index" del resto de elementos de tu página web según corresponda en función de si quieres que estos aparezcan por encima o por debajo del modal de tu typeform.

Por otro lado, debes asegurarte de que el posicionamiento en CSS de los elementos sea el correcto. No podemos hacer recomendaciones más concretas en lo que respecta al posicionamiento porque este puede variar considerablemente de una web a otra en función de cómo haya sido diseñada o de cómo se haya configurado la CSS, pero siempre es buena idea recordar los elementos que tienen un posicionamiento absoluto (absolute), relativo (relative) o fijo (fixed) en tu página y asegurarte de que tu formulario sigue las reglas de posicionamiento del resto de la web.

Si sospechas que el origen del problema puede ser el posicionamiento, te recomendamos que eches un vistazo a este tutorial de MDN, donde se explica este tema de forma muy concisa.

En vez de mi typeform incrustado, solo se ve un cuadro en blanco

Esto les pasa mucho a los usuarios que incrustan sus formularios a través de sistemas de gestión de contenidos (o CMS) como Wix, WordPress o Squarespace, pero también puede ocurrir en páginas web programadas manualmente. En esta imagen puedes ver de forma muy gráfica el aspecto que tiene este tipo de error:

Comprueba que la parte en JavaScript del código de incrustación facilitado por Typeform está activada en tu sistema CMS y que funciona correctamente. Si tu typeform incrustado ya ocupa un espacio de tu página web, pero lo único que se ve es un fondo blanco, significa que el elemento HTML se ha cargado, pero que el script (que es lo que hace que nuestros formularios tengan un aspecto tan chulo y elegante) no funciona. Lo más probable es que veas un error similar a este en tu consola:

Si no consigues que se cargue el script, siempre puedes utilizar un marco integrado (o iframe) simple. Aunque has de tener en cuenta que esta alternativa limitará bastante tus posibilidades respecto a las opciones de incrustación disponibles en el panel "Compartir" de Typeform. De hecho, solo podrás utilizar una incrustación de tipo estándar y no podrás hacer uso de ningún otro formato de incrustación, opciones de lanzamiento personalizadas ni demás características que requieran el código de Javascript facilitado por Typeform.

No veo el botón de lanzamiento de mi typeform

Quizá tenga algo que ver con la altura del marco de incrustación. Es posible que incrementar la altura a más de 500 px solucione el problema. Si no es así, puedes ponerte en contacto con nosotros aquí.

Quiero ocultar la barra de desplazamiento en mi typeform incrustado

Dado que tu typeform incrustado es, básicamente, una página web incrustada dentro de otra, no es posible eliminar la barra de desplazamiento. Lo que sí puedes hacer es utilizar un envoltorio (o wrapper) en CSS para ocultar la barra y que no sea visible, pero ten en cuenta que, en ese caso (y en cualquier otro que implique una personalización del código), nuestro equipo no podrá ofrecerte asistencia técnica.

Quiero eliminar el espacio de relleno superior que aparece en mi typeform incrustado

Typeform centra verticalmente las preguntas de sus formularios, por lo que no es posible eliminar el espacio de relleno que aparece entre la pregunta y la parte superior del marco de incrustación.

Pero hay dos cosas que puedes hacer para resolver este problema: una es reducir la altura del marco de incrustación para que la altura del espacio de relleno también se reduzca; y la segunda es optar por centrar la atención sobre tu typeform incrustado añadiendo una imagen de fondo en la que aparezca el logo de tu empresa (o cualquier otra imagen) cerca del marco superior. En definitiva, algo que llene ese espacio vacío...

Mi typeform incrustado se muestra en forma de ventana emergente a pantalla completa en dispositivos móviles

Por defecto, Typeform muestra todos los typeforms incrustados a los que se accede desde un dispositivo móvil en forma de ventana emergente a pantalla completa con el fin de mejorar la experiencia de usuario. Estas ventanas emergentes muestran una pantalla inicial estándar en la que aparece el nombre del typeform y un botón de lanzamiento.

Si quieres evitar que el formulario se abra en forma de ventana emergente tendrás que modificar manualmente el código de tu página web para hacer un pequeño cambio. Lo que tienes que hacer es localizar la incrustación dentro del código y añadir el fragmento "data-tf-inline-on-mobile" justo después del atributo "data-tf-widget", de forma que el código tenga un aspecto similar a este:

De esta forma, cuando alguien acceda a tu typeform desde un dispositivo móvil, este se mostrará en línea con el texto. Ya no se verá la pantalla inicial estándar y, en su lugar, los usuarios accederán a la pantalla de bienvenida de tu typeform (en caso de que la haya).

Quiero activar el enfoque automático (autofocus) en mi typeform incrustado

Por defecto, los typeforms incrustados no reciben automáticamente el foco de atención en los sitios web de los que forman parte. Esto significa que los usuarios que visiten tu página podrán ver todo el contenido que tengas en ella libremente y empezar a interactuar con tu typeform incrustado cuando ellos decidan. (La excepción a esta regla son los formularios incrustados en formato "emergente", "deslizante", "desplegable" o "panel lateral". En estos casos, los typeforms sí recibirán el foco de atención automáticamente nada más abrirse, incluso en aquellos casos en los que su lanzamiento esté configurado al cargarse la página.)

Para activar el enfoque automático en tus typeforms, tienes que localizar el código de la incrustación dentro del código de tu página web y añadir el fragmento "data-tf-auto-focus" justo después del atributo "data-tf-live", de forma que el código tenga un aspecto similar a este:

Esta función está disponible desde septiembre de 2022, pero puede utilizarse con todos los typeforms incrustados. Si el código del typeform que tienes incrustado se generó antes de dicha fecha e incluye un fragmento de código específico que desactiva el enfoque automático, no tienes que eliminarlo de tu formulario para que este se cargue correctamente. Pero si, aun así, decides hacerlo, no tienes de qué preocuparte. Tus formularios no recibirán el foco de atención automáticamente cuando los usuarios entren en tu página web.

Estoy usando un marco integrado (iframe) y no quiero que mi formulario se enfoque automáticamente

Los typeforms incrustados que utilicen un marco integrado (iframe) personalizado (en lugar del código de incrustación facilitado por Typeform) recibirán el foco de atención automáticamente cuando se cargue la página en la que estén incrustados. Para desactivar el enfoque automático, tendrás que añadir el siguiente parámetro a tu iframe:

?disable-auto-focus=true

¿Cómo puedo mostrar un vídeo a pantalla completa en un typeform incrustado?

Esta es una opción demandada por los usuarios. Pero, por el momento, lo que puedes hacer es utilizar un marco integrado (iframe), en lugar del código de incrustación facilitado por Typeform, que siga la siguiente sintaxis:

Ahora, sustituye el valor indicado en el atributo src por la dirección URL de tu typeform.

Ten en cuenta que, actualmente, esta opción solo funciona con incrustaciones de tipo "estándar" que estén en línea con el texto. No podrás hacer uso de ningún otro formato de incrustación, opciones de lanzamiento personalizadas ni demás características que requieran el código de Javascript facilitado por Typeform.

Mi typeform incrustado en modo "panel lateral" o "desplegable" aparece debajo del contenido de la página

Como se aprecia en la siguiente imagen, las incompatibilidades en términos de CSS entre el código de incrustación de Typeform y la CSS de tu página web podrían hacer que tu formulario incrustado en modo "panel lateral" o "desplegable" apareciera por debajo del contenido de tu página web.

Para resolver este problema, puedes probar a hacer lo siguiente:

- Inserta el código de incrustación en tu página web al final del todo.

- Añade una propiedad "z-index" al formato del elemento: data-qa="side_panel" <div>.

- Asegúrate de que el valor de la propiedad "z-index" que hayas asignado a la incrustación sea superior al de los demás elementos que tengas en tu página (como, por ejemplo, el encabezado).

Si, aun así, sigue sin resolverse el problema, haz clic en el botón "Contáctanos" (que encontrarás en la parte inferior de esta página) para hablar con nosotros.