Los formularios de sitios web son un componente esencial en cualquier sitio web, pĆ”gina de destino o tienda de comercio electrĆ³nico. Ya sea que el objetivo del formulario sea contactar al propietario del sitio web, completar un cuestionario, iniciar sesiĆ³n en una cuenta, comprar un artĆ­culo, registrarse para una nueva cuenta, reservar una reservaciĆ³n o inscribirse para una prueba gratuita, cada detalle minucioso del diseƱo y la disposiciĆ³n del formulario web es crucial.

Es posible que se haya planteado estas preguntas en el pasado: ĀæQuĆ© diseƱo funcionarĆ” mejor para mi formulario? ĀæQuĆ© atraerĆ” mĆ”s a los usuarios? ĀæCĆ³mo puedo implementar mis motivos de diseƱo e identidad de marca? ĀæDeberĆ­a colocar el formulario dentro de una ventana emergente del sitio web, o funcionarĆ­a mejor un formulario en el pie de pĆ”gina?

Entre la larga lista de tipos de formularios de sitios web y sus casos de uso, identificar quĆ© considerar en el diseƱo de su formulario puede ser intimidante, por decir lo menos. Tenga la seguridad de que crear un formulario de sitio web de alto rendimiento pronto serĆ” una experiencia de creaciĆ³n web libre de estrĆ©s, desafiante pero gratificante.

Para potenciar nuestra estrategia y flujos de trabajo de diseƱo web, hemos compilado una lista de 15 ejemplos que le mostrarƔn de quƩ estƔn hechos los mejores formularios.

Domine el diseƱo de formularios de sitios web con nuestra guƭa para formularios web

Tabla de Contenidos

15 ejemplos inolvidables de diseƱo de formularios

Estamos a punto de embarcarnos en un viaje repleto de formularios de sitios web de todas las formas, colores, diseƱos y tamaƱos. PrepĆ”rese para asombrarse con esta lista de 15 formularios de sitios web cuyo diseƱo y estructura revolucionarĆ”n sus habilidades de creaciĆ³n web.

Formularios de contacto

Cuando estĆ” decidido a ver que cada usuario haga clic en Ā«EnviarĀ» antes de salir de su sitio, su formulario de contacto puede ser decisivo para este objetivo. Decisiones bĆ”sicas como si aƱadir animaciones o indicadores de progreso y cuĆ”ndo hacerlo, cuĆ”n grandes o negritas deben ser sus encabezados, cuĆ”n anchos hacer los campos de su formulario ā€” todos estos factores contribuyen a la tasa de finalizaciĆ³n de cada formulario e impactan la experiencia del usuario en su sitio web.

#1 Brandingo

interactive website form example

Brandingo es una agencia y escuela de diseƱo armenia que elegimos en enero de 2021 para nuestra exhibiciĆ³n de los 10 mejores sitios de Elementor del mes. El sitio web de Brandingo fue construido para Ā«mostrar el talento y conocimiento de la agencia en diseƱo, ilustraciĆ³n, UI/UX y branding a potenciales clientes y estudiantes.Ā»

Lo que siempre nos ha llamado la atenciĆ³n del sitio de Brandingo es su utilizaciĆ³n de numerosos efectos de movimiento e interactivos que se ajustan a la perfecciĆ³n. Es evidente que han dominado el arte de encontrar un equilibrio entre caracterĆ­sticas interactivas atractivas que no resultan excesivas para el ojo humano.

Nuestros aspectos favoritos:

  • Los mĆŗltiples usos de animaciones Lottie que aparecen al desplazarse por la pĆ”gina.
  • El trayecto de texto que rodea el fondo circular del formulario una vez que se llega al final.

#2 The Space Cube

contact form example elementor

The Space Cube es un producto de organizaciĆ³n de escritorio creado por Carol Havener de SĆ­dney, Australia. DiseƱado pensando tanto en propietarios de viviendas como en oficinas, el producto aborda el problema de organizar espacios limitados (como un escritorio de oficina, un estudio, una sala de estar familiar, etc.)

Carol construyĆ³ el sitio web de su producto con Elementor, utilizando el constructor de WooCommerce para satisfacer las necesidades de su sitio de comercio electrĆ³nico. Dado su amplio pĆŗblico objetivo, el sitio del producto utiliza sabiamente un esquema de colores blanco y negro. Los motivos tienen en cuenta el diseƱo moderno, elegante y minimalista del producto, y la pĆ”gina de contacto y su formulario logran el mismo objetivo.

Nuestros aspectos favoritos:

  • La elegante combinaciĆ³n de fuentes que une la caligrafĆ­a, el estilo manuscrito con la fuente sans-serif Ā«BodoniĀ».

La sofisticada imagen de fondo colocada detrĆ”s del fondo blanco sĆ³lido y cuadrado del formulario. Esto realmente da vida al caso de uso del producto, recordando sutilmente al usuario lo agradable que se siente sentarse en un escritorio limpio, sin desorden y que invita a la tranquilidad.

#3 Metropolis Moving

elementor progress indicator form example

Metropolis Moving es una empresa de mudanzas de la ciudad de Nueva York con sede en Brooklyn, NY. Su esquema de colores del sitio web y diseƱo utilizan colores temĆ”ticos de NYC como el amarillo taxi, el azul marino y el gris para visualizar la esencia de su servicio personalizado para mudanzas dentro de la bulliciosa Ā«Gran ManzanaĀ». El formulario de ContĆ”ctenos del sitio es un breve formulario de varios pasos para que el cliente potencial lo complete y reciba una cotizaciĆ³n de precio.

Nuestros aspectos favoritos:

  • La ruta del mapa demarcada y los puntos de ubicaciĆ³n capturan la experiencia impredecible (camino) entre mudarse de una direcciĆ³n a otra.
  • Los campos del formulario estĆ”n diseƱados con todas las reglas generales de los formularios web:

Formularios de Cuestionario

Hacer preguntas a su audiencia sobre sus intereses, preferencias, objetivos, etc. es una excelente manera de establecer un diĆ”logo. Pero, ĀæcuĆ”les son las mejores formas de presentar sus preguntas? ĀæDeberĆ­a crear una atmĆ³sfera informal? ĀæQuĆ© formato funcionarĆ” mejor para su audiencia? Todas estas consideraciones son de igual importancia, sin embargo, las opciones para abordar cada una son increĆ­blemente variadas.

#4 Spotify Pets

spotify questionnaire form

Spotify Pets es una funciĆ³n de lista de reproducciĆ³n dentro del servicio de mĆŗsica digital, podcasts y videos de Spotify. Esta adiciĆ³n singularmente peculiar a Spotify utiliza el algoritmo de la plataforma para crear listas de reproducciĆ³n para que la mascota y el dueƱo de la mascota escuchen, basĆ”ndose en los hĆ”bitos de escucha del usuario y los atributos de la mascota.

Nuestros aspectos favoritos:

  • La animaciĆ³n de la barra de arrastre ajustable que el usuario ajusta para describir las caracterĆ­sticas de su mascota, es un mĆ©todo de entrada atractivo que tambiĆ©n elimina la actividad de escritura.
  • El indicador de progreso se funde con el alegre fondo ilustrado.
  • El formulario de cuestionario de mĆŗltiples pantallas tiene una pregunta por pantalla, siendo cada una super compatible con dispositivos mĆ³viles.

#5 RedBull

red bull questionnaire form

Red Bull es una bebida energĆ©tica disponible internacionalmente cuyo eslogan es Ā«Red Bull te da alasĀ». En la pĆ”gina de producto de su sitio web, Red Bull involucra al visitante en la narraciĆ³n de la marca, con un cuestionario interactivo sobre sostenibilidad y seguridad ambiental, dos de los valores fundamentales de la marca.

Nuestros aspectos favoritos:

  • El temporizador de cuenta regresiva para cada pregunta crea suspenso y urgencia para responder.
  • Los grandes botones de selecciĆ³n hacen que las opciones de respuesta sean super accesibles y fĆ”ciles de hacer clic.
  • El video de fondo animado del cuestionario de la pĆ”gina de inicio.

Formularios de Inicio de SesiĆ³n

Los formularios de inicio de sesiĆ³n son un componente de suma importancia en la interfaz de su producto o servicio. Es probable que los usuarios visualicen este formulario en reiteradas ocasiones, siendo la familiaridad y la simplicidad aspectos fundamentales. Su formulario debe ser acogedor, intuitivo y directo, aunque procurando entusiasmar al usuario en la mayor medida posible. En mĆŗltiples ocasiones, los detalles e ilustraciones mĆ”s minĆŗsculos pueden tener un impacto significativo.

#6 gidimo

login form example elementor

gidimo es una empresa nigeriana de tecnologĆ­a educativa cuya plataforma de aprendizaje en lĆ­nea atiende a estudiantes de todos los orĆ­genes y etapas de la vida. La tecnologĆ­a de la plataforma emplea tĆ©cnicas de gamificaciĆ³n y trayectorias de usuario personalizadas que Ā«hacen divertido y sencillo aprender cualquier cosa en movimientoĀ».

La pĆ”gina de inicio de sesiĆ³n del sitio web de gidimo, construido con Elementor (ganador de nuestro escaparate de marzo de 2021), exhibe un diseƱo minimalista con una galerĆ­a de diapositivas junto al formulario de inicio de sesiĆ³n. Esto confiere a la pĆ”gina un nivel adicional de interacciĆ³n y atractivo: los usuarios pueden navegar a travĆ©s de ilustraciones alternantes que refuerzan las sensaciones positivas de la plataforma.

Nuestros aspectos favoritos:

  • El color de fondo del deslizador alterna entre verde y blanco a medida que el usuario navega.
  • Cada fila del formulario posee la misma anchura, permitiendo un diseƱo uniforme y organizado que fomenta la claridad y la consistencia.

#7 Snappet

log in form illustration example

Snappet es una plataforma educativa en lƭnea para dispositivos tipo tableta, utilizada por profesores de matemƔticas que buscan personalizar las trayectorias de aprendizaje individual de los estudiantes y, simultƔneamente, monitorear su desempeƱo. La herramienta de aprendizaje estƔ destinada a estudiantes de escuela primaria, lo cual se deduce fƔcilmente del esquema de colores amigable y colorido del sitio, asƭ como de sus ilustraciones vectoriales.

Nuestros aspectos favoritos

  • El caso de uso ilustrado en la pĆ”gina de inicio de sesiĆ³n para estudiantes transmite un mensaje emocional: recuerda a los estudiantes el alentador (aunque virtual) gesto de aprobaciĆ³n y la positividad que experimentarĆ”n al utilizar la plataforma.
  • El esquema tipogrĆ”fico de fuente Ćŗnica emplea variaciones de una sola fuente (diferentes colores y tamaƱos). Para evitar la monotonĆ­a, el uso de dos colores y tamaƱos diferentes indica la jerarquĆ­a de informaciĆ³n entre los elementos textuales.

Formularios de pƔginas de destino de productos

Las pĆ”ginas de destino de productos son de crucial importancia en el diseƱo de formularios de sitios web, ya que gran parte del comportamiento de compra de los visitantes es resultado directo del diseƱo de la pĆ”gina del producto. Dada toda la informaciĆ³n que los consumidores desean conocer sobre cada producto individual, la decisiĆ³n sobre quĆ© incluir y cĆ³mo hacerlo en cada pĆ”gina de producto debe manejarse con sumo cuidado.

#8 Bram

product landing page example elementor

Ganador de nuestro escaparate de sitios WooCommerce, Bram es un fabricante de carteras de cuero artesanales con sede en Barcelona. El diseƱo de la pĆ”gina de producto (esencialmente un formulario de envĆ­o) nos resultĆ³ particularmente inspirador.

Nuestros aspectos favoritos:

  • La amplia variedad de opciones de color se muestra en una sola lĆ­nea para su visualizaciĆ³n simultĆ”nea, sin necesidad de hacer clic en un menĆŗ desplegable para ver cada opciĆ³n de color.
  • El botĆ³n Ā«AƱadir al carritoĀ» es fĆ”cil de localizar, ubicado en la parte superior del contenido en lugar de ser el Ćŗltimo componente de la pĆ”gina (despuĆ©s de los detalles del producto y las pestaƱas desplegables).
  • El abundante espacio en blanco en la pĆ”gina hace que los detalles del producto sean claros y legibles, y el detalle del cuero del producto sea fĆ”cilmente visible.

#9 ABATTOIR VƉGƉTAL

product landing page form elementor

ABATTOIR VƉGƉTAL es un bistrĆ³ vegano y tienda de comestibles ubicado en ParĆ­s, Francia. El sitio de comercio electrĆ³nico (construido con Elementor y WooCommerce, y ganador del escaparate de agosto de 2020) presenta tanto el menĆŗ para llevar del bistrĆ³ como los menĆŗs de la tienda de comestibles, donde el usuario puede elegir ingredientes y platos para pedir en lĆ­nea.

Nuestros aspectos favoritos:

  • El uso de campos personalizados de WordPress; La pĆ”gina del producto y su formulario de pedido contienen toda la informaciĆ³n bĆ”sica de la comida en un formato eficiente y atractivo.
  • Los formatos atractivos utilizados en el carrito de WooCommerce de la pĆ”gina: el indicador de artĆ­culos, asĆ­ como el botĆ³n Ā«AƱadir al carritoĀ», tienen un color de fondo brillante, lo que aƱade diversiĆ³n y estilo al flujo de usuario de pago y a la experiencia general de compra en lĆ­nea.
  • Las fuentes de colores brillantes y las fotografĆ­as detalladas comunican la informaciĆ³n verbal y visual de manera clara, lo que supone una forma emocionante de iniciar una experiencia de compra culinaria.

Ejemplos de formularios de registro

Un proceso de registro exitoso cumple los deseos de cualquier creador web que construya un formulario de sitio web. Entonces, Āæes realmente posible convertir este sueƱo en una realidad? Cualquier cosa es factible, no obstante, las medidas que se adopten para satisfacer a los visitantes pueden tener implicaciones significativas. Cada detalle, desde la visibilidad de los botones hasta el contraste entre los elementos, indicarĆ” los resultados de la presentaciĆ³n del formulario.

#10 Duolingo

duolingo sign up form

Duolingo es un sitio web y aplicaciĆ³n mĆ³vil para el aprendizaje de idiomas. Como marca, la misiĆ³n de la compaƱƭa es Ā«hacer que la educaciĆ³n sea gratuita, divertida y accesible para todosĀ». La pantalla mostrada anteriormente aparece dentro del proceso de incorporaciĆ³n de la plataforma, donde el usuario establece su objetivo de aprendizaje de idiomas y elige una ruta de aprendizaje.

Nuestros Aspectos Favoritos:

#11 Stripe

stripe sign up form example

Stripe es un software de procesamiento de pagos utilizado por sitios web de comercio electrĆ³nico y aplicaciones mĆ³viles. El uso de Stripe permite a las empresas aceptar pagos, enviar desembolsos y gestionar sus negocios en lĆ­nea. El registro de la cuenta es sencillo y fĆ”cil, facilitado a travĆ©s de un formulario de inscripciĆ³n simple pero atractivo.

Nuestros Aspectos Favoritos:

  • La sombra proyectada alrededor del fondo del formulario de envĆ­o distingue entre el formulario de registro y los puntos enumerados en el lado izquierdo de la pĆ”gina.
  • Los puntos organizados y concisos que enuncian tres beneficios clave del producto, reforzando el valor aƱadido de crear una cuenta en Stripe.

Formularios de Reserva

Los formularios de reserva en lĆ­nea exitosos prosperan en atmĆ³sferas positivas y alentadoras. Cuando sus visitantes llegan al punto de investigar cĆ³mo reservar su servicio, debe hacer todo lo posible para mantenerlos atentos, interesados y satisfechos con lo que pronto experimentarĆ”n.

#12 Be A Roshan

booking form example

Be A Roshan es un centro de terapia energĆ©tica y meditaciĆ³n en la isla de Mauricio. El sitio de Be A Roshan, construido con Elementor, proporciona reservas de citas y eventos en lĆ­nea para los clientes. Los motivos de diseƱo (como el fondo de la pĆ”gina de inicio que muestra un dĆ­a soleado) elegidos para el sitio reflejan la atmĆ³sfera de las experiencias relajantes de Reiki y meditaciĆ³n.

Nuestros Aspectos Favoritos:

  • La interfaz visual del calendario que muestra los tratamientos de Reiki disponibles durante todo el mes.
  • Los elementos de texto informativos sobre el calendario informan al usuario de detalles importantes que influirĆ”n en su decisiĆ³n de cĆ³mo completar el formulario.
  • El formulario de registro de eventos estĆ” diseƱado para recopilar los datos rĆ”pidamente y crear una experiencia fluida para los registrantes sin confundirlos ni distraerlos.

#13 Presidio

booking form example elementor

Presidio Speech and Learning es un centro de terapia infantil en San Francisco que atiende a niƱos que necesitan apoyo en habla, lenguaje, lectura y escritura. El sitio de Presidio, construido con Elementor, fue presentado en nuestro showcase de noviembre de 2020, elogiado por sus motivos de diseƱo en acuarela pastel, amigables para los niƱos. Estos detalles se adaptan al pĆŗblico objetivo del centro: padres que buscan consultar y recibir aportes atentos y sensibles sobre las necesidades individuales de sus hijos.

Nuestros Aspectos Favoritos:

  • La paleta de colores azul y verde utilizada en el formulario de reserva extiende las vibraciones edificantes del sitio web a lo largo del flujo de usuario para la reserva de citas.
  • El color de fondo de los campos del formulario permite un diseƱo atractivo e invitador para un proceso de envĆ­o agradable.

Formularios de Prueba Gratuita

Las pruebas gratuitas son siempre apreciadas por los clientes y usuarios potenciales. Sobre todo, enfatizar las ventajas y el valor aƱadido de probar su servicio o producto ayuda a los visitantes a tomar su decisiĆ³n final. Cuanto mĆ”s incentivo les proporcione para avanzar, mĆ”s probable serĆ” que lo hagan.

#14 Hone

free trial form elementor

Otro ganador del showcase de noviembre de 2020, Hone es una plataforma de aprendizaje en lĆ­nea que ofrece clases en vivo sobre temas como liderazgo de equipos, gestiĆ³n y habilidades de comunicaciĆ³n interpersonal. La plataforma facilita un enfoque empoderador y proactivo hacia el liderazgo de equipos y la comunicaciĆ³n interna. Estos ideales se transmiten exitosamente a travĆ©s del esquema de colores rosa y pĆŗrpura animado y energizante del sitio web, y por el tono y la voz del contenido escrito de su sitio.

Nuestros Aspectos Favoritos:

  • El efecto de subrayado rosa crea una seƱal visual para enfatizar las palabras clave del formulario, haciendo hincapiĆ© al usuario potencial en que la prueba de 30 dĆ­as de Hone es completamente gratuita.
  • Los puntos enumerados situados junto al formulario identifican el valor aƱadido y los beneficios principales del producto.
  • Los iconos utilizados para cada punto enumerado se asemejan a la experiencia de usuario y la interfaz del producto.

Formularios de SuscripciĆ³n

Una vez que ha convencido a su usuario de que su contenido merece una suscripciĆ³n, Ć©l confĆ­a en que usted entregarĆ” contenido que desee seguir leyendo. Ser transparente sobre lo que planea enviarle siempre puede ser de gran ayuda para que sepa quĆ© esperar y lo anticipe con entusiasmo.

#15 Codepuffin

elementor subscription form example

Codepuffin es el sitio web empresarial y portafolio de Amy Nortje, una desarrolladora web radicada en Nueva Zelanda. Amy construyĆ³ su sitio web con Elementor, donde enumera sus servicios y presenta su portafolio y blog personal. Las entradas del blog de Amy se centran en sus ‘lecciones aprendidas’ de diferentes proyectos y relaciones con clientes, y sirven como un recurso personal e informal de conocimientos y apoyo para sus lectores.

Nuestros Aspectos Favoritos:

  • El contenido y el lenguaje del formulario de suscripciĆ³n se alinean con el mensaje del blog en sĆ­: anĆ©cdotas humorĆ­sticas entrelazadas con valiosas perspectivas profesionales.
  • El encabezado del formulario, ‘ĀæDesea algo interesante?’, va directamente al grano. Esta pregunta enmarca el beneficio del usuario al suscribirse al boletĆ­n en un tono conversacional, creando una conexiĆ³n con el visitante que despierta interĆ©s en las perspectivas y variadas experiencias de Amy.

Formar una Obra Maestra

No hay duda al respecto: nada es mĆ”s gratificante que un panel de control que muestra resultados exitosos de envĆ­o de formularios. Ahora que hemos aprendido de los mejores, es seguro decir que lo mejor estĆ” por venir. EstĆ” destinado a crear numerosos formularios de sitios web a lo largo de su carrera de creaciĆ³n web, y ahora que ha visto 15 obras de arte de formularios web, es momento de comenzar a imaginar, diseƱar y construir el formulario web de sus sueƱos.