A principios de esta semana, presentamos algunos diseños de formularios muy atractivos y recibimos muchas peticiones para mostrar cómo hacer un formulario de lenguaje natural. Así que decidí preparar una guía rápida para que puedas crear uno para tu propio sitio en Webflow en un abrir y cerrar de ojos.
Sigue los pasos a continuación y echa un vistazo al diseño final en Webflow aquí.
Paso 1: Añade el elemento de formulario a la página
Primero, añade el elemento de formulario a tu lienzo. Simplemente arrastra el bloque de formulario (Form Block) desde el panel de añadir elementos hasta el lugar donde quieras que aparezca en el sitio.
Paso 2: Añade clases y estilos
Ahora tenemos que añadir clases a los elementos individuales del formulario para poder darles estilo.
Voy a añadir una clase a la etiqueta del campo (field label) y le daré estos estilos:
Nombre de la clase: Field Label
Visualización (Display): En línea (Inline)
Familia de fuente: Lato
Grosor de fuente: 300 - Light
Tamaño de fuente: 40px
Altura de línea: 40px
Ten en cuenta que puedes ajustar los estilos visuales tanto como quieras, pero el ajuste de visualización es clave para que esto funcione.
También añadiré una clase al campo de texto y le daré este estilo:
Nombre de la clase: Text Field
Visualización (Display): En línea (Inline)
Ancho: 240px
Altura: 50px
Familia de fuente: Lato
Grosor de fuente: 300 - Light
Tamaño de fuente: 40px
Altura de línea: 40px
Borde inferior: 2px #adadad
Opacidad: 50%
Paso 3: Añade más etiquetas y campos de texto
Ahora tenemos una etiqueta y un campo de formulario (borré los extras para limpiar un poco). Ahora simplemente copiaré y pegaré más campos usando Comando/Control+C y Comando/Control+V. Para este ejemplo, necesito cinco campos de formulario.
Paso 4: Ajusta el ancho de los campos del formulario
Como cada campo del formulario pide un dato distinto, podemos ajustar el ancho para que se adapte mejor al contenido. Por ejemplo, no tiene sentido que el campo de edad (que probablemente solo tenga dos caracteres) sea tan largo como el campo de nombre (que tendrá muchos más).
Para solucionar esto, añadiré otra clase a cada campo para poder ajustar los anchos según corresponda.
Paso 5: Diseña el mensaje de éxito
¡El formulario está listo! Pero queremos que nuestros usuarios vean un mensaje de éxito agradable al terminar. Para diseñarlo, solo haz clic en el formulario para seleccionarlo y abre el panel de ajustes.
Haz clic en el botón de éxito para ver el formulario en su estado de éxito.
Cualquier estilo o clase que añadamos aquí solo aparecerá cuando el usuario envíe el formulario. Estos son los estilos que utilicé:
Nombre de la clase: Mensaje de éxito
Color de fondo: #1ab07a
Relleno superior e inferior: 50px
Nombre de la clase: Texto de éxito
Color: #ffffff
Tamaño de fuente: 34px
Altura de línea: 50px
Ahora ve y crea tu propio formulario de lenguaje natural
Por supuesto, esta es solo una forma de crear un formulario de lenguaje natural en Webflow. Si tuviste problemas siguiendo los pasos anteriores, puedes inspeccionar el formulario de lenguaje natural en Webflow.
¿Tienes un formulario único que hayas creado en Webflow? Compártelo con nosotros (¡y con el resto de la comunidad)!
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
