¿Cómo crear un Formulario personalizado en Framer?

Captar el email de tus potenciales clientes es indispensable para un negocio digital, ya que te permite poder llegar a ellos sin depender de los algoritmos cambiantes de las redes sociales, etc. e impactarles pudiendo conseguir nuevas ventas.

Pero para ello antes deberemos crear un formulario veamos el paso a paso de cómo hacerlo en Framer:

Añadir un input en Framer

Comienza añadiendo un input en Framer. Esto es útil si solo deseas captar el correo electrónico de tus visitantes. Si necesitas más información, como nombre, apellidos, u otros datos, considera otras soluciones que mencionaremos más adelante.

Crea el Input

Solo deberás ir a la barra lateral izquierda, a la sección “Forms”, seleccionar “Input” y arrastrarlo a tu página web tal que así:

Personaliza tu formulario Input en Framer

Una vez añadido el formulario, puedes personalizarlo en la barra lateral izquierda.

Podrás modificar el ancho y largo del formulario, así como los colores y texto del mismo.

Incluso podrás decidir qué ocurre una vez la persona rellena el formulario:

1. Mostrar un Overlay: en “Success” deberás seleccionar “Show Overlay”, ahí podrás crear cuadro de texto en el que decirle por ejemplo “gracias por dejar tu email”.
2. Redirigir a Thank You Page: en “Success” deberás seleccionar “Open Link”, donde podrás en “Redirect” especificar la página específica de tu sitio web al que quieres redirigirle. Se utiliza mucho cuando quieres dar información adicional sobre siguientes pasos a la persona.

Conectar formulario Framer con servicios de terceros

Framer permite conectar con servicios como Formspark y Mailchimp para gestionar los datos capturados. Aquí te mostraré cómo conectarlos:

2.1. Conexión formulario Framer con Formspark

Formspark es un servicio de backend para recibir formularios.

Puede almacenar 250 emails gratuitamente y luego subir la capacidad a 50.000 con un pago único de 25€.

1. Inicia sesión en Formspark: Crea una cuenta o inicia sesión en Formspark.
2. Obtén el form ID: Después de crear un formulario en Formspark, copia el Form ID.
3. Conexión en Framer: Pega el Form ID en el input en Framer y ya estará listo, a partir de ahora, todo nuevo email que dejen en el formulario se almacenará en Formspark y de ahí, si quisieras, podrías hacer una automatización utilizando Zapier (por ejemplo) con la que enviar los datos a la herramienta de Email Marketing que prefieras para poder contactarles a posteriori.
   Por ejemplo nosotros conectamos Formspark con Mailerlite (la herramienta de Email Marketing que utilizamos en Nocodehackers) a través de Zapier en un par de minutos:

2.2. Conexión formulario Framer con Mailchimp

Mailchimp es una herramienta popular para gestionar listas de correos y enviar campañas.

1. Inicia sesión en Mailchimp: Accede a tu cuenta de Mailchimp.
2. Obtén el código de embed: Desde Mailchimp, genera el código de embed para un formulario.
3. Conexión en Framer: Pega el código de embed en el input en Framer y configura la lista a la que se enviarán los correos.

Aquí tienes el paso a paso más detallado por el propio Framer.

‍

Y con esto ya tendríamos un formulario funcional creado en nuestra página web para poder captar emails y poder impactar a nuestros potenciales clientes posteriormente.

Pero si quieres ir un paso más allá y darles una mayor capa de personalización a tus formularios, el siguiente paso te interesa:

Crear formularios personalizados a medida en Framer

En el momento en el que quieres añadir Checkbox de privacidad, textos, desplegables, etc. a tus formularios, te es imposible hacerlo de manera nativa en el propio Framer.

Es por ello que se ha creado Framer Forms, para que puedas, utilizando la herramienta, crear formularios realmente personalizados y hechos a medida en Framer, sin límites.

El único punto en contra de esta herramienta es que no tiene plan gratuito, pero puedes hacerte con ella con un pago único de por vida.

‍

Y ahora sí, hasta aquí el post en el que esperamos haberte resuelto la duda sobre cómo crear un formulario personalizado en Framer.

Si quieres aprender todo lo que necesitas saber para crear páginas web funcionales y responsive en Framer en cuestión de horas, hemos creado este curso gratuito de Framer para que lo consigas.