Las herramientas sin código permiten a las empresas construir cosas increíbles sin escribir una sola línea de código. Vlad Lokshin, fundador de Turtle, utiliza una combinación de Webflow y Typeform para crear un sitio web que potencia a desarrolladores y equipos de todo el mundo. En este artículo, desvelaremos exactamente cómo Turtle logra esto.
«Voy a crear nuevas funciones para mi sitio web sin escribir nada de código».
Hace una década, la gente habría arqueado una ceja al oírte decir eso.
Pero los tiempos cambian. Vivimos en una época en la que las herramientas sin código están en auge y las soluciones que ofrecen ya están siendo adoptadas por startups y grandes corporaciones que, aun sabiendo programar, prefieren no hacerlo.
Hoy en día, realmente puedes construir una aplicación web, y todo un negocio, solo con una visión, ganas de aprender, un ordenador y una conexión a internet estable.
La barrera de entrada se ha reducido diez veces, y eso es emocionante. Significa que más creadores tienen el poder de construir aquello con lo que siempre han soñado.
Por eso empresas como Turtle me entusiasman. Es un recordatorio de que no hay mejor momento que hoy para ser un innovador.
¿Qué es Turtle?
Turtle es donde la gestión de proyectos se encuentra con el desarrollo freelance.
Creada por Vlad Lokshin, la visión de Turtle es potenciar a los desarrolladores freelance y a las empresas que buscan contratarlos para proyectos. Por un lado, es una herramienta de gestión de proyectos, similar a Asana o Trello, con un sistema de chat integrado como Slack, lo que permite a los equipos mantenerse organizados y colaborar. Por otro lado, es un mercado para desarrolladores freelance, similar a Upwork o Toptal.
Todo el sitio web de marketing de Turtle está construido en Webflow, y utilizan Typeform para impulsar sus esfuerzos de generación de leads y el proceso de incorporación de desarrolladores freelance.
En este artículo, te mostraremos cómo Turtle construyó su proceso de solicitud utilizando herramientas sin código. Mientras tanto, puedes leer más sobre cómo Vlad llevó a Turtle del concepto a los clientes.
Identificar el objetivo de Turtle
Antes de entrar en los detalles de cómo Turtle integró Typeform en su sitio web, es importante entender sus objetivos. Turtle es un mercado para desarrolladores freelance. Esto significa que necesitan tanto que se registren desarrolladores como que haya equipos buscando contratarlos. Piensa en términos de oferta y demanda.
Turtle necesita crear un proceso de solicitud para desarrolladores y un proceso de solicitud para los equipos que buscan contratar a esos desarrolladores. Esto significa que, en esencia, Turtle tiene 2 flujos diferentes con 2 typeforms distintos. Turtle también ha lanzado recientemente otros 2 typeforms para sus programas de Turtle para Startups y Crédito para empresas durante estos tiempos difíciles, lo que suma un total de 4 flujos de typeform.
¿Por qué Webflow y Typeform?
Si estás leyendo esto, es probable que ya sepas qué es Webflow y lo que puede hacer por ti. Pero puede que no sepas cómo añadir Typeform a tu sitio web de Webflow puede permitirte construir un proceso de solicitud potente.
Typeform permite a los usuarios crear formularios y encuestas atractivos. Piénsalo como una forma más personal para que las personas y las empresas intercambien información a gran escala. Gran parte del objetivo de Typeform es convertir la recopilación de datos en una experiencia, y hacen un gran trabajo lográndolo. Con una gran cantidad de plantillas para elegir, los typeforms pueden adaptarse a cualquier marca.
Del mismo modo, Webflow permite a las empresas crear sitios web potentes sin escribir código. En un mundo donde la experiencia del cliente es cada vez más importante, usar tanto Typeform como Webflow es la manera perfecta de crear una fusión entre tu marca y la experiencia del usuario.
A lo largo de este artículo, te mostraremos cómo integrar fácilmente Typeform y Webflow para crear un proceso de solicitud sólido y profesional. Sin embargo, las posibilidades son infinitas cuando combinas ambas herramientas.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Integración de Typeform y Webflow para solicitudes
Existen 4 formas distintas de insertar un typeform en Webflow, y vamos a repasarlas todas. Las 4 opciones son las siguientes:
- Un enlace de Typeform que redirige fuera de tu sitio web de Webflow
- Un typeform insertado a página completa en tu sitio web de Webflow
- Un formulario emergente (pop-up)
- Un formulario insertado dentro de un bloque div
En el caso de Turtle, ellos utilizan la opción 2: un typeform insertado a página completa. No obstante, hemos decidido incluir otras formas de integrar Typeform y Webflow por si quieres darle un toque diferente.
¿Prefieres verlo en video?
Tenemos todo cubierto.
Para los que prefieren leer, vamos directo al grano.
1. Un enlace de typeform
Esto es bastante sencillo. Primero, tendrás que registrarte en Webflow y crear un proyecto. No entraremos en demasiados detalles sobre cómo hacerlo en este artículo, pero puedes echar un vistazo a Webflow University para ver unos tutoriales fantásticos sobre el tema.
A continuación, tendrás que registrarte en Typeform y crear tu primer typeform.
Una vez creado tu typeform, vuelve a tu proyecto de Webflow. En nuestro caso, añadiremos un enlace al botón "Empezar" de nuestra página.
Antes de hacerlo, asegúrate de que tu typeform esté publicado. Cuando lo esté, ve a la pestaña de compartir y copia la URL de tu typeform.
De vuelta en Webflow, simplemente pega el enlace de tu typeform como lo harías con cualquier otro enlace.
Eso es todo. Ahora, al hacer clic en el botón, deberías ser redirigido directamente a tu typeform.
Bien, veamos cómo insertar tu typeform completamente en una página de tu sitio web, de forma similar a como lo hace Turtle para su proceso de solicitud.
2. Un typeform insertado a página completa
En esta parte, deberás crear una nueva página en blanco en tu proyecto de Webflow. La idea es utilizar un elemento de código personalizado en una página vacía e insertar tu typeform en él. Para añadir un código personalizado a tu página de Webflow, simplemente arrastra el elemento Embed a tu proyecto.
Ahora vuelve a la pestaña de compartir en tu Typeform y, esta vez, haz clic en “Embed into a web page” (Insertar en una página web).
Haz clic en la pestaña “Full page” (Página completa) y copia el código personalizado.
Una vez que hayas copiado el código al portapapeles, regresa a Webflow y simplemente pégalo dentro de tu elemento de inserción personalizada (embed).
Cuando hayas pegado el código, haz clic en “Save & Close” (Guardar y cerrar). Es posible que notes que no puedes ver tu Typeform en el diseñador de Webflow. Esto se debe a que el Typeform solo aparecerá en tu sitio de Webflow una vez publicado o exportado. Cuando publiques la página, la versión en vivo debería verse más o menos así:
¿Fácil, verdad? Pero espera, solo tenemos una página en nuestro sitio web que lleva a un Typeform incrustado. Necesitamos añadir esta página a un botón de nuestro sitio. Queremos una configuración similar a la que tiene Turtle cuando haces clic en “Apply to hire” (Postularse para contratar).
Para hacer esto, ve a tu proyecto de Webflow y, en lugar de añadir un enlace a un botón como mostramos en la opción 1, haz clic en la opción de añadir página y selecciona la página de inserción de Typeform que creaste.
Ahora, cuando hagamos clic en el botón “Contact us” (Contáctanos) en nuestro sitio de Webflow, deberíamos ser redirigidos a nuestra inserción de Typeform a página completa. ¡Genial!
3. Crear un formulario emergente (popup)
Para crear un popup de Typeform en nuestro sitio de Webflow, sigue unos pasos similares a los anteriores. Ve a la pestaña de compartir de tu proyecto de Typeform, haz clic en “Embed into a web page” y, esta vez, selecciona “Popup”.
Desde aquí podemos editar la configuración del botón. Podemos experimentar con el texto del botón, el tamaño de la fuente, el radio del borde y el color.
En nuestro caso, queremos un botón blanco. El único problema es que no podemos cambiar el color del texto del botón dentro de Typeform, pero sí podemos hacerlo en nuestro proyecto de Webflow.
Una vez que hayas creado tu botón, simplemente haz clic en “Get the code” (Obtener el código) y copia el código de Typeform al portapapeles.
De vuelta en nuestro proyecto de Webflow, eliminaremos nuestro botón y lo reemplazaremos con un elemento de inserción (Embed).
Ahora, pegaremos nuestro código de popup de Typeform en el elemento.
Como puedes ver, el color de nuestro texto es igual al del botón, pero queremos que sea rojo. Para lograrlo, localiza donde dice “color” dentro de tu código de Typeform y cambia manualmente el código hexadecimal.
Del mismo modo, podemos cambiar la fuente del texto para que se ajuste mejor a nuestra marca.
Una vez hecho esto, haz clic en “Save & Close”. Recuerda que solo verás el resultado final después de publicar tu sitio web de Webflow.
¡Listo!
4. Incrustar un Typeform en un bloque div
La última opción que vamos a cubrir para integrar Typeform con Webflow es incrustar un formulario dentro de un bloque div en tu sitio web de Webflow.
Nos adelantamos y creamos este diseño. El iPad que se muestra en este diseño es una imagen sencilla añadida a un bloque div al que llamamos "iPad wrapper".
Como queremos que nuestro Typeform sea adaptable dentro de la pantalla del iPad, arrastraremos un elemento Embed al "iPad wrapper". El elemento incrustado debe ser un elemento hermano de la imagen del iPad y un elemento hijo del "iPad wrapper".
Por defecto, la posición de un elemento HTML incrustado es estática, pero queremos establecer su posición como absoluta en nuestros ajustes.
Pero antes de hacer esto, primero debemos volver a nuestro "iPad wrapper" y establecer su posición como relativa. En pocas palabras, el elemento padre ("iPad wrapper") se establece como relativo, mientras que el elemento hijo (elemento HTML) se establece como absoluto.
Ahora, para asegurarnos de que nuestro elemento HTML incrustado esté alineado dentro de los bordes de nuestro iPad, ajustaremos el posicionamiento absoluto al 5%, como se muestra a continuación.
Ahora tenemos un diseño totalmente adaptable para nuestro Typeform incrustado. Todo lo que tenemos que hacer ahora es obtener nuestro código de Typeform desde la propia plataforma.
De forma similar a como lo hemos hecho antes, vamos a ir a la pestaña de compartir y, esta vez, seleccionaremos la pestaña "Standard".
Haz clic en "Get the code" y cópialo en tu portapapeles. Ahora, vamos a volver a nuestro proyecto de Webflow e incrustar el código en nuestro elemento HTML Embed.
Después de publicar nuestro sitio web, deberíamos ver nuestro Typeform incrustado en nuestro bloque div personalizado.
¡Eso es todo! Acabamos de repasar 4 formas diferentes de incrustar un Typeform en un sitio de Webflow.
Recopilación de datos
Ahora que entiendes mejor cómo integrar Typeform y Webflow, puedes enviar y analizar fácilmente todos los datos que recibas a través de tu formulario.
Crea informes fácilmente o conecta Google Sheets para enviar los datos directamente a una hoja de cálculo. Incluso puedes usar otra herramienta sin código como Zapier para crear varios disparadores entre Typeform y Webflow. Por ejemplo, si alguien envía algo a través de un formulario en tu sitio web, puedes completar un pedido a través de Webflow Ecommerce — y ese es solo uno de los muchos ejemplos.
Typeform no es solo una gran herramienta de generación de leads. Te permite entender quiénes son realmente tus clientes para que puedas atenderlos mejor.
Potenciando a los desarrolladores de todo el mundo
Tanto Typeform como Webflow permiten el surgimiento de una nueva generación de creadores. Digo esto porque no necesitas tener mucha experiencia en programación para crear un sitio web o un flujo de aplicación completo para recopilar leads. Antiguamente, tenías que programar todo esto desde cero. Hoy en día, el poder del "no code" permite a personas con menos conocimientos técnicos crear productos increíbles, mientras que los desarrolladores experimentados pueden acelerar su trabajo de desarrollo front-end.
Podemos verlo con Vlad Lokshin y su equipo en Turtle. Al utilizar las potentes herramientas sin código actuales, Turtle ha empoderado a decenas de desarrolladores freelance y equipos en todo el mundo.
No te pierdas la historia de Vlad en el blog de Typeform.
