Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup

La pantalla de bienvenida

Empieza tu formulario con buen pie con una pantalla de bienvenida, que es algo así como la portada de un libro. Puedes utilizarla para llamar la atención de tu audiencia con una imagen atractiva o bien explicar el objetivo de tu formulario, quién eres y mucho más.

1. Para añadir una pantalla de bienvenida, abre un formulario en tu área de trabajo y haz clic en el botón "+ Añadir contenido". 

Screenshot 2024-06-03 at 17.45.01.png

2. Selecciona la opción "pantalla de bienvenida" en el menú.

Pantalla_de_bienvenida.png

3. A continuación puedes ver el aspecto que tiene. Ten en cuenta que solo puedes añadir una pantalla de bienvenida en cada formulario

Screenshot 2024-06-03 at 17.45.59.png

4. Ya puedes añadir el texto a tu pantalla de bienvenida. Para ello, escribe directamente en la pantalla del editor (donde pone: "¡Di hola!"). También puedes añadir una descripción debajo (si no escribes nada ahí, sencillamente se quedará en blanco).

Screenshot 2024-06-03 at 17.45.59.png

También puedes editar el botón "Comenzar" en el apartado "Opciones" de la pestaña "Pregunta" (en el menú de la derecha).

Puedes cambiar el texto que aparece en el botón, siempre y cuando el texto nuevo no tenga más de 24 caracteres.

Recordar información

Si tienes campos ocultos configurados en tu formulario, puedes utilizar la función "recordar información" para incorporar a tu texto los datos que hayas asociado a ellos. De esta forma, si ya sabes cómo se llama el usuario, puedes añadir su nombre aquí, por ejemplo. Solo tienes que escribir el símbolo de la arroba (@) para que aparezca en pantalla una lista con todos los campos ocultos que puedes seleccionar e insertar en el texto.

Cómo añadir contenidos multimedia

1. Haz clic en el botón "+" que aparece al lado de "Imagen o vídeo" (en el apartado "Opciones" de la pestaña "Pregunta").

Imagen_o_video.png

2. Aparecerá en pantalla un nuevo menú con nuestra herramienta de gestión de imágenes y vídeos:

Screenshot 2024-06-03 at 18.04.43.png

Aquí puedes buscar imágenes gratuitas en el banco de imágenes de Unsplash, recurrir a nuestra galería de iconos o bien hacer clic en el apartado "Sube" para utilizar una imagen propia.

Puedes subir archivos en formato JPEG, PNG o GIF (tanto estáticos como animados). El tamaño máximo aceptado es de 4 MB y el ancho máximo que pueden tener tus archivos es de 800 píxeles (si la imagen tiene un ancho mayor, se reajustará su tamaño automáticamente de forma proporcional en función de ese valor).

3. Selecciona la imagen o el vídeo que más te guste o bien sube un archivo propio desde tu equipo.

Screenshot 2024-06-03 at 18.05.48.png

4. Ahora, puedes personalizar cómo quieres que se muestre tu imagen en pantalla en el apartado "Disposición" de la pestaña "Pregunta".

Screenshot 2024-06-03 at 18.06.56.png

Cómo añadir una imagen de fondo

1. Haz clic en la pestaña "Diseño" (que encontrarás en el menú lateral de la derecha) para abrir la herramienta de diseño.

Screenshot 2024-06-03 at 18.07.49.png

2. Ahora, pulsa el botón "Añadir" que encontrarás al lado de la opción "Imagen de fondo".

Imagen_de_fondo.png

3. Aparecerá de nuevo en pantalla nuestra herramienta de gestión de imágenes, donde podrás hacer búsquedas en nuestras galerías o bien subir tu propia imagen:

Screenshot 2024-06-03 at 18.04.43.png

En este artículo te contamos todo lo que necesitas saber para añadir una imagen de fondo.

Cómo omitir la pantalla de bienvenida en dispositivos móviles

Por defecto, todos los formularios incrustados a los que se accede desde un dispositivo móvil se muestran 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 formulario 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. Deberás 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:

<div data-tf-widget="ABCDEF" data-tf-inline-on-mobile></div>

De esta forma, cuando alguien acceda a tu formulario 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 formulario (en caso de que la haya).  

Consulta con nuestra comunidad