Cómo incrustar tu typeform en un sitio web creado con Webflow

Webflow pone a tu disposición una plataforma para crear sitios web con un alto grado de personalización y sin necesidad de escribir una sola línea de código, lo que significa que todo el mundo puede utilizarla y responde perfectamente a las necesidades de cualquier negocio en expansión.

Sigue leyendo si quieres saber cómo incrustar un typeform en tu sitio web de Webflow. Es una forma muy sencilla de captar leads, recomendar productos, llevar un registro de las suscripciones que recibas o responder a las preguntas más habituales de tus clientes.

Existen dos maneras de incrustar un typeform en un sitio web creado con Webflow:

- A través de la aplicación de Typeform en Webflow.

- Mediante el código de incrustación de Typeform.

Necesitarás lo siguiente para empezar:

- Un typeform que quieras incrustar.

- Una cuenta de Webflow gratuita, si vas a optar por utilizar la aplicación de Typeform en Webflow.

- Un cuenta de Webflow de pago, si, en cambio, prefieres utilizar el código de incrustación de Typeform. En caso de que tengas una cuenta gratuita, no podrás utilizar el código de incrustación de Typeform para integrar el formulario dentro de tu sitio web de Webflow, pero sí podrás redirigir a los usuarios a tu formulario mediante elementos como un botón o un bloque de enlace, por ejemplo.

Desplázate hasta el final de la página para seguir leyendo o pulsa en uno de los siguientes enlaces para ir directamente a ese apartado:

- Cómo incrustar tu typeform en Webflow mediante la aplicación de Typeform

- Cómo crear tu typeform y generar el código de incrustación

- Cómo incrustar tu typeform en una página de Webflow

- Cómo incrustar tu typeform en todas las páginas de tu sitio web de Webflow

¿Te ha quedado alguna duda sobre la incrustación de formularios en Webflow después de leer este artículo? Pues, aquí puedes consultar una guía de Webflow en la que se explica cómo utilizar el elemento "Embed (Incrustación)" para añadir código personalizado a tu sitio web.

Cómo incrustar tu typeform en Webflow mediante la aplicación de Typeform

Si ya tienes algunos typeforms creados, puedes empezar a incrustarlos cuando quieras a través de la aplicación de Typeform que ofrece Webflow. Así no tendrás que pasar constantemente de tu sitio web de Webflow a tu área de trabajo en Typeform y viceversa para configurar la incrustación. De hecho, ni siquiera tendrás que abrir el typeform en cuestión para obtener el código de incrustación.

Esto es lo que tienes que hacer para incrustar un typeform en Webflow a través de la aplicación de Typeform:

1. Pulsa en este enlace para ir directamente a la aplicación de Typeform en la tienda de aplicaciones (Marketplace) de Webflow:

2. Haz clic en el botón "+ Sign in to add (+ Inicia sesión para añadirla)", que encontrarás en la esquina superior derecha, en caso de que no hayas iniciado sesión todavía en Webflow:

3. Introduce tus datos de acceso a Webflow y pulsa el botón "Log in (Iniciar sesión)":

4. Pulsa el botón "+ Add to site (+ Añadir al sitio web)" para añadir la aplicación de Typeform a tu sitio web de Webflow:

5. Para dar permiso a la aplicación de Typeform para vincularse a tu sitio web, busca las áreas de trabajo de Webflow que correspondan en la barra de búsqueda o bien utiliza las casillas de verificación para seleccionarlas directamente:

6. Cuando hayas seleccionado a qué áreas de trabajo vas a dar acceso a la aplicación de Typeform, puedes pulsar el botón "Authorize App (Dar permiso a la aplicación)":

Se te redirigirá a tu área de trabajo de Webflow, donde podrás abrir un sitio web que ya hayas desarrollado o bien crear uno nuevo desde cero para empezar a incrustar allí tu typeform:

7. Para abrir un sitio web que ya tengas creado, basta con que pases el cursor por encima de la miniatura y pulses el botón "Open Designer (Abrir editor)" que aparecerá en pantalla:

Ahora podrás ver tu sitio web de Webflow en el editor:

8. Vete al apartado "Apps (Aplicaciones)", que encontrarás en el panel lateral izquierdo, y pulsa sobre él (es el icono en forma de pieza de puzle):

9. Pasa el cursor por encima del campo "Typeform" y pulsa el botón "Launch (Abrir)" que aparecerá en pantalla.

10. Llegados a este punto, puedes incrustar tu typeform en Webflow de dos formas distintas:

Es cierto que antes te dijimos que no tendrías que estar todo el rato de aquí para allá pasando de una plataforma a otra, pero, si quieres, puedes copiar la dirección URL de tu typeform desde el panel "Crear" o "Compartir" de Typeform (para ello, solo tienes que darle al botón "Copiar enlace")…

… y luego copiarla en Webflow en el campo correspondiente a la URL. Después, basta con que pulses el botón "Embed (Incrustar)".

Pero, si prefieres hacerlo todo del tirón y evitarte mareos, otra opción es que pulses el botón "Select form (Seleccionar formulario)" dentro de Webflow. De esta forma, se te redirigirá directamente a tus áreas de trabajo en Typeform, donde podrás buscar el typeform que quieres incrustar en tu sitio web de Webflow con total tranquilidad. ¡Nosotros vamos a optar por esta opción!

11. Accede a tu cuenta de Typeform, si no lo has hecho ya:

12. Ahora, podrás ver tus áreas de trabajo en Typeform. Y, si te fijas, aparece un botón con el texto "Incrustar formulario" en cada uno de tus typeforms:

13. Puedes utilizar la barra de búsqueda o los filtros para encontrar el typeform que quieras incrustar en Webflow. Cuando lo hayas encontrado, haz clic en el botón "Incrustar formulario" correspondiente:

14. Y, ¡listo! El typeform que hayas seleccionado se añadirá a tu página de Webflow:

15. Puedes activar o desactivar los interruptores de esta ventana para modificar la configuración del typeform que acabas de incrustar:

¡Buen trabajo! Acabas de incrustar tu typeform en Webflow sin haber tenido que tocar para nada el código de incrustación de tu formulario ni estar constantemente teniendo que pasar de Typeform a Webflow y viceversa para copiar y pegar fragmentos de código. Puedes prescindir de tu segundo monitor por un rato. Para esto, no lo vas a necesitar. ¡De nada! :)

Cómo crear tu typeform y generar el código de incrustación

1. ¿Listo/a para crear el formulario perfecto? Lo único que tienes que hacer es iniciar sesión en Typeform para acceder a tu área de trabajo y crear un formulario nuevo. Para ello, puedes crear uno desde cero o bien elegir una de nuestras plantillas:

2. Ahora, modifica el diseño a tu gusto y añade todas las preguntas que quieras hacer a los usuarios. ¿No tienes mucha experiencia con Typeform? Aquí encontrarás una guía en la que te explicamos cómo crear tu primer typeform.

Si estás creando un formulario para que cumpla una función concreta (como, por ejemplo, concertar reuniones o procesar pedidos), también puedes echar un vistazo a nuestra sección "Producto" para coger ideas o bien consultar alguna de estas guías:

• Utiliza Typeform para recabar los datos de clientes potenciales a través de formularios de contacto
• Use Typeform to collect event planning and registration signups (Utiliza Typeform para planificar eventos y gestionar inscripciones)
• Concierta reuniones en Calendly a través de Typeform

3. Cuando termines de crear tu typeform, haz clic en el botón "Publicar", que encontrarás en la esquina superior derecha de la pantalla. (También puedes acceder a una vista previa de tu formulario antes de publicarlo, para asegurarte de que todo está perfecto.)

4. Ahora que tu typeform ya es público, ¡ha llegado el momento de compartirlo con tu audiencia! Para ello, haz clic en el panel "Compartir", que encontrarás en la parte superior de la pantalla.

En la página "Compartir" encontrarás varias opciones para incrustar tu typeform. 

Puedes encontrar más información sobre las distintas opciones de incrustación que ofrece Typeform aquí. Ahora, selecciona la opción "Incrustar en una web" y elige el tipo de incrustación que prefieras. Aparecerá en la pantalla central una vista previa de tu formulario incrustado:

Puedes utilizar cualquiera de los formatos disponibles para incrustar tu typeform en Webflow.

Nota: si optas por utilizar el tipo de incrustación a "página entera", es posible que tengas que modificar la CSS de tu página de Webflow para que el formulario se muestre correctamente. Lamentablemente, nuestro equipo no puede facilitar asistencia técnica cuando se utilizan soluciones que conllevan la personalización del código, pero puede que esta conversación entre varios miembros de nuestra Comunidad te resulte útil.

5. Guarda cualquier cambio que hayas hecho en los ajustes de incrustación y pulsa el botón "Comienza a incrustar":

6. Selecciona la opción "Webflow" en el menú desplegable y haz clic en "Copiar":

Este código está pensado para que lo utilices tal cual. Lo único que tienes que hacer es pegarlo en tu página de Webflow.

Cómo incrustar tu typeform en una página de Webflow

1. Vete al panel de control (Dashboard) y abre tu sitio web de Webflow en el editor:

2. Una vez abierto el editor, vete a la página concreta en la que quieras añadir tu typeform incrustado.

3. Haz clic en "Add Elements (Añadir elementos)", que encontrarás en la esquina superior izquierda del editor:

4. Desplázate hacia abajo por el menú hasta que localices el elemento "Embed (Incrustación)", dentro del apartado "Advanced (Opciones avanzadas)".

Arrastra el elemento "Embed (Incrustación)" hasta el lugar exacto dentro de la página en el que quieras que aparezca tu typeform y suéltalo allí:

5. Aparecerá en pantalla un cuadro de diálogo. Pega ahí el código de incrustación facilitado por Typeform. (¿No tienes claro dónde puedes obtener tu código de incrustación? En el apartado anterior, te lo contamos todo.)

Ahora, haz clic en el botón "Save & Close (Guardar y cerrar)", que encontrarás en la parte inferior del editor.

Nota: aquí también puedes añadir a tu código de incrustación más opciones de diseño para personalizarlo, pero a lo mejor te conviene tener a algún/a amigo/a o colega desarrollador/a cerca para que te eche una mano, porque el equipo de Typeform no puede facilitar asistencia técnica en aquellos casos en los que se personaliza el código.

6. Tu formulario incrustado será visible una vez hayas publicado tu sitio web de Webflow. Para ello, haz clic en el botón "Publish (Publicar)" que encontrarás en la barra de herramientas superior. Selecciona los dominios específicos en los que quieras publicarlo y, después, haz clic en "Publish to Selected Domains (Publicar en los dominios seleccionados)":

Abre tu página o páginas una vez las hayas publicado para comprobar que todo funciona correctamente.

También puedes acceder a una vista previa de tu formulario en Typeform para asegurarte de que todo funciona como debe.

Cómo incrustar tu typeform en todas las páginas de tu sitio web de Webflow

Es posible que lo que quieras es que tu typeform aparezca en todas las páginas de tu sitio web de Webflow, sobre todo si lo que pretendes incrustar es un formulario de contacto o una sección de preguntas frecuentes para resolver posibles dudas de tus clientes.

Pues, es muy fácil configurarlo desde los ajustes de tu sitio web de Webflow. Esta opción funciona especialmente bien cuando se utilizan los tipos de incrustación "panel lateral" o "desplegable".

1. Para ello, accede al panel de control (Dashboard) de Webflow y haz clic en el icono de los tres puntos que encontrarás en la miniatura correspondiente al sitio web en el que quieres incrustar tu typeform:

2. Selecciona la opción "Settings (Ajustes)" en el menú.

3. Haz clic en la pestaña "Custom Code (Código personalizado)" y pega el código de incrustación de tu typeform en el cuadro de texto "Head Code (Código de la cabecera)". (¿No tienes claro dónde puedes obtener tu código de incrustación? En el apartado anterior, te lo contamos todo.)

Después, pulsa el botón de color verde "Save Changes (Guardar cambios)".

4. Para que el formulario incrustado sea visible en tu sitio web, tendrás que publicar los cambios. Para ello, haz clic en el botón de color azul "Publish (Publicar)", que encontrarás en la parte superior derecha de la página. Selecciona los dominios específicos en los que quieras publicarlo y, después, haz clic en "Publish to Selected Domains (Publicar en los dominios seleccionados)":

5. Abre tu página o páginas una vez las hayas publicado para comprobar que tu typeform se ha incrustado correctamente.

Y, ¡ya lo tienes! ¿Quieres que te demos más ideas para poder sacar el máximo partido a tu cuenta de Typeform? En nuestra sección "Producto" encontrarás varias guías que te ayudarán a dar los primeros pasos.

Y si lo que buscas son consejos para hacer que tu sitio web de Webflow sea aún mejor de lo que ya es, echa un vistazo a Webflow University.