Los formularios de contacto constituyen la primera etapa de una relación entre los visitantes de un sitio web y la organización que está detrás de él. Por eso es tan importante tenerlos en cuenta en el diseño web. En este artículo, podrás descubrir diez ejemplos de formularios de contacto con sus respectivos puntos fuertes.
En esta selección se incluyen diferentes tipos de formularios, cada uno con sus particularidades, pero el denominador común es una experiencia de usuario ágil y acogedora al mismo tiempo. Si se integran dentro de una estrategia de marketing digital adecuada, los formularios de contacto son una herramienta con gran potencial para favorecer la conversión de clientes potenciales.
Crea tus formularios de contacto fácilmente
Crea formularios de registro en pocos clics y con un editor intuitivo en la Plataforma de Ventas de Brevo.
Tabla de contenidos
Brevo
Los contactos con una empresa deben segmentarse lo máximo posible, ya que se pueden estar motivados por razones muy variadas: soporte técnico, prensa, denuncias, etc. La página de Contacto de Brevo (ex Sendinblue) lo hace con un menú desplegable de tan solo cinco opciones, para favorecer la rapidez entre los usuarios.
Cada opción anterior tiene su propio formulario de contacto. Por ejemplo, el contacto con Ventas redirige a una landing page de fondo negro, para crear una experiencia más inmersiva. El formulario se limita a pedir los datos de contacto imprescindibles, como el número de teléfono y la dirección de correo electrónico. Posteriormente, se elige una hora para reservar una cita.
En la página se incluyen proposiciones de valor de Brevo —reseñas y logos de clientes conocidos—, pero sin distraer la atención del formulario de contacto. Esta página de destino por el momento está solo en inglés, pero el formulario ofrece la opción de elegir el idioma preferido para el contacto.
Los puntos fuertes de este formulario
- Clasifica solicitudes de contacto muy variadas con un menú simple
- Incluye proposiciones de valor como reseñas de clientes
- Hay un campo para seleccionar el idioma de comunicación
Disney+
Los formularios en varias etapas suelen ser eficaces para favorecer la conversión de clientes potenciales. En este ejemplo de formulario de registro, Disney+ divide el proceso de creación de cuenta en cuatro pasos sencillos. De esta forma, la llamada a la acción de cada pantalla es clara: el usuario centra su atención en un único paso del proceso de cada vez.
Este diseño es un ejemplo de formulario minimalista. No obstante, Disney+ no deja de referenciar su política de protección de datos personales de forma clara en la primera pantalla, con una casilla de verificación para inscribirse a la lista de correo con pleno consentimiento. Los datos de pago, necesarios para completar el proceso de registro, no se solicitan hasta la etapa final, cuando el usuario ya ha verificado su dirección de correo electrónico. Este es un elemento que genera confianza.
Los puntos fuertes de este formulario
- Formulario en varias etapas que se centra en un único paso de cada vez
- Indica el progreso por etapas en la parte superior
- El diseño minimalista no escatima en menciones a la protección de datos personales
UNIR
La Universidad en Internet (UNIR) emplea un formulario completo y eficaz para solicitar información de contacto a su público objetivo. El formulario goza de una gran visibilidad en su sitio web: se muestra en una barra vertical a la derecha de la página cuando un visitante consulta información sobre sus estudios, pero sin llegar a dificultar la navegación en ningún momento.
Las etiquetas de este formulario de contacto (Nombre, Área de estudio, Email, etc.) se muestran directamente sobre los campos correspondientes, lo que favorece la experiencia de usuario. El movimiento ocular es menor que al seguir una secuencia de formulario en horizontal.
Los puntos fuertes de este formulario
- Formulario visible en la web, pero sin interferir con la navegación del usuario
- Secuencia de lectura óptima
- Ofrece al usuario la posibilidad de contactar por WhatsApp
Patadegayo
El comercio electrónico de moda sostenible Patadegayo ofrece un ejemplo de formulario emergente de captación de leads con un incentivo que se abre al visitar su sitio web.
Con solo tres campos, la rapidez se vuelve un requisito particularmente importante en este tipo de formularios, con una llamada a la acción (CTA) más emocional que racional.
El visitante que lo cubre acepta registrarse en la base de datos de Patadegayo a cambio de un descuento. Como refuerzos adicionales para inspirar confianza, emplean frases como «No hacemos spam» e inciden en su propuesta de valor de fabricación de proximidad. Estos textos son visibles en la parte superior, pero no distraen del formulario.
Los puntos fuertes de este formulario
- Mensaje emergente con abundantes elementos para generar confianza
- Formulario muy breve
- Llamada a la acción original con exclamación y emojis
Shopify
Shopify explota el minimalismo en este ejemplo de formulario. En una primera etapa, tan solo hay que introducir la dirección de correo electrónico. El incentivo es claro —una prueba gratuita de la plataforma de ecommerce— y la llamada a la acción contundente. De esta forma, Shopify guía paso a paso a sus clientes potenciales para que tomen una decisión fundamentada sobre la plataforma.
Después, el proceso continúa con un formulario en varias etapas, con pictogramas que vuelven más intuitivo el proceso de respuesta. La barra de progreso en la parte superior también tiene un efecto motivador y, además, existe la posibilidad de omitir las etapas no imprescindibles.
Los puntos fuertes de este formulario
- Formulario en varias etapas con una barra de progreso
- Inicio minimalista con un solo campo
- Ejemplo representativo de cómo guiar a los prospectos paso a paso hasta la compra
Dialpad
Este ejemplo muestra un formulario de inscripción a un webinar de Dialpad, una empresa B2B. Al entrar en la página de destino en la que está incluido, solo aparece el primer campo: la dirección de correo electrónico. Al introducirla, se muestra el resto del formulario.
Esta estrategia puede ser un arma de doble filo. Por un lado, como ya se ha explicado, la brevedad tiene un efecto motivador indiscutible, pero la presentación de un formulario de contacto también debe ser honesta.
Dialpad encuentra un equilibrio, porque la segunda fase del formulario sigue siendo bastante breve, limitándose a pedir la información de contacto básica.
Los puntos fuertes de este formulario
- Efecto motivador con un único campo inicial
- Formulario breve centrado en la información de contacto
Fotocasa
El equipo de ventas de un portal inmobiliario como Fotocasa tiene que segmentar solicitudes de contacto variadas. El sitio web está optimizado para encauzar la navegación con landing pages específicas como la de este ejemplo, para profesionales. En la parte derecha se incluye un formulario de contacto para iniciar una posible relación comercial.
Aunque el formulario apenas ocupa una quinta parte (aprox.) del ancho de una pantalla convencional, destaca como llamada a la acción principal de la página de destino.
El nombre de los campos se indica por duplicado —encima del campo de texto y sobre él—, porque no hay que escatimar en optimización de UX. Asimismo, Fotocasa emplea la convención de usar un asterisco para marcar los campos obligatorios, sin necesidad de mencionarlo de forma explícita.
Los puntos fuertes de este formulario
- Imagen de fondo evocadora y colorida
- Texto del botón de CTA optimizado
- Se ofrece un método de contacto alternativo en la parte inferior del formulario
Acierto.com
Acierto.com es una plataforma comparadora de seguros. En este servicio virtual, el formulario cobra una especial relevancia. Es la base de la prestación del servicio de este sitio web, en lugar de tratarse de un paso intermedio en el túnel de conversión.
Para presentar una comparación precisa, este formulario de pedido debe solicitar datos abundantes al visitante, tanto información personal como elementos sobre lo que se pretende asegurar. La brevedad, sin dejar de ser importante, tiene que pasar a un segundo plano.
Para ello, Acierto.com centra sus esfuerzos en motivar al usuario que cumplimenta el formulario. La barra de progreso en la parte superior es clara e incluye una estimación del tiempo restante. Cuando hay algunos campos opcionales, se indican las ventajas de cubrirlos.
Los puntos fuertes de este formulario
- Formulario de registro amplio con una barra de progreso optimizada
- Abundantes explicaciones que justifican por qué se piden los datos personales
- Los datos personales se dejan para las etapas intermedia y final del formulario
Tus soluciones digitales
La página de contacto de una agencia web y/o digital como esta es uno de los ejemplos de formularios de contacto más representativos. Se dirige a un público objetivo con el propósito de iniciar una relación que implicará necesariamente varios intercambios futuros con el equipo de ventas, para definir el servicio prestado. La primera etapa de contacto debe ser lo más abierta posible.
La clave de este formulario está en el campo final. Con una altura intermedia y el imperativo «Cuéntanos» como llamada a la acción, busca un equilibrio entre la brevedad y la posibilidad de redactar un mensaje un poco más largo.
Por último, en la parte inferior incluye un captcha para verificar que el usuario es humano y un widget para quien prefiera contactar por WhatsApp.
Los puntos fuertes de este formulario
- Etiquetas de campos con formato de preguntas para transmitir cercanía
- Incluye una casilla de verificación para aceptar la política de privacidad
- Formulario bastante abierto que se adapta a distintos perfiles de usuario
Paradores de turismo
La cadena española Paradores de turismo ha diseñado un formulario en varias etapas para la reserva de sus hoteles. En la primera pantalla, destaca el potencial evocador de las imágenes elegidas. El formulario comienza con un solo campo de texto, en el que se pueden introducir nombres de provincias o regiones y se despliegan automáticamente las opciones disponibles en ellas.
Una vez seleccionado un Parador, se inicia el proceso de reserva, con facilidades para el visitante como un calendario de precios. La creación de una cuenta de usuario es opcional, para no entorpecer la experiencia de quien no desee hacerlo.
Por último, la etapa final del formulario de reserva limita los campos obligatorios a lo estrictamente necesario. En la parte derecha de la página, muestra todos los datos de la reserva para que el usuario los pueda confirmar antes de realizar el pago, lo que refuerza la tranquilidad del comprador.
Además, en la parte superior del sitio web, Paradores ofrece un formulario de contacto alternativo en el que el usuario tan solo debe introducir su número de teléfono para ser contactado por el equipo de ventas de Paradores.
Los puntos fuertes de este formulario
- Formulario en varias etapas sencillas
- Bastantes facilidades para el usuario: creación de cuenta opcional y posibilidad de solicitar una llamada telefónica
- Imagen con un gran potencial evocador
Las primeras impresiones no lo son todo, pero dicen bastante
Mientras que la página principal de un sitio web es el escaparate virtual, un formulario de contacto da la bienvenida al visitante que decide «entrar al local» y pedir información. Detrás de la composición de casillas y campos de texto hay una estrategia que gira en torno a la experiencia de usuario.
La norma principal es que ha de ser breve y al mismo tiempo satisfactorio para el usuario. Sin embargo, en estos ejemplos de formularios de contacto has podido comprobar que ese punto óptimo es diferente según el sector y la empresa.
Tras esta dosis de inspiración, la siguiente etapa consiste en pasar a la acción y optimizar tus propios formularios. Si ha llegado ese momento, puedes probar la herramienta para crear formularios de Brevo, disponible en el plan Gratis y en todos los de la plataforma de marketing.
Con las plantillas de formularios predeterminadas de confirmación doble opt-in, podrás ofrecer una vía de contacto segura y totalmente compatible con el RGPD. ¿Preparado/a? Es hora de abrir las puertas virtuales de tu negocio.
