Resumen de IA
¿Buscas inspiración para el diseño de formularios de contacto para tu sitio web? Con algunos ajustes sencillos, puedes crear formularios en línea como quieras.
En este artículo, te mostraré algunos ejemplos geniales de diseño de formularios de contacto y te daré consejos útiles para crear uno en tu sitio web.
También te mostraré un método sin código muy útil para cambiar el diseño de tus formularios. ¿Listo? ¡Vamos allá!
¡Estiliza tu Formulario de Contacto Ahora! 😀
8 Diseños de Formularios de Contacto que Puedes Robar
Ahora, examinemos algunos ejemplos geniales y las tácticas clave que utilizan para inspirarte y recrearlos en tu sitio.
1. WPForms
Quería empezar con la página de contacto de WPForms, ya que creo que es un excelente ejemplo para productos SaaS, sitios web de plugins y otras pequeñas empresas.
La sección superior de esta página está dividida en dos partes: una para clientes existentes con preguntas técnicas y otra para consultas de preventa.
Lee también: Cómo Permitir a los Visitantes Duplicar Campos del Formulario
Por qué Creo que Este Formulario de Contacto Destaca
El formulario de contacto no es visible de inmediato y solo aparece cuando alguien hace clic en el botón 'Completar un formulario' en la sección 'Tengo una pregunta básica'.
Esta elección de diseño minimiza el tamaño de la página y asegura que los nuevos prospectos utilicen el formulario principalmente, ya que solo es accesible a través de la sección de preventa.
Esta estrategia ayuda a dirigir rápidamente a los usuarios a la sección apropiada, agilizando el proceso tanto para la empresa como para las personas que se ponen en contacto.
En la parte inferior de la página, también hay una invitación discreta para que los visitantes se unan al Círculo VIP de WPForms, lo cual es una forma agradable y sin presión de animar a la gente a unirse a una comunidad sin abarrotar el flujo de contacto.
Cómo Crear una Página de Contacto Como Esta
- Formulario de Contacto Emergente: Diseña una página de contacto donde el formulario aparezca solo cuando se haga clic en un botón específico. Esto mantiene la página ordenada y enfatiza otros elementos hasta que se requiere interacción.
- Base de Conocimiento para Soporte al Cliente: Implementa una wiki o base de conocimiento en tu sitio de WordPress. Esto sirve como un área de autoayuda para los clientes existentes, abordando preguntas y problemas comunes.
- Uso de Plantillas: Elige entre más de 2100 plantillas de formularios de WordPress para diversos propósitos como comentarios, marketing y operaciones comerciales. Estas plantillas ayudan a configurar rápidamente formularios de aspecto profesional y funcional. (también prueba estas plantillas ocultas de WPForms para situaciones especiales).
- Traducción de formularios: Para sitios web que atienden a hablantes no nativos o audiencias multilingües, WPForms permite la traducción sencilla de formularios de contacto para satisfacer diversas necesidades lingüísticas.
¡Crea tu formulario de WordPress ahora! :)
2. Stripe
Decidí centrarme en la página de contacto de ventas de Stripe porque es un ejemplo principal de una página de contacto especializada que maneja consultas comerciales de manera eficiente.
Para que el formulario de contacto parezca corto, Stripe utiliza un Formulario de Múltiples Pasos en su página de contacto, lo que sin duda ayuda a reducir su tasa de abandono de formularios.
Por qué creo que esta página de Contacto Destaca
Lo que hace único a este formulario de contacto es que se centra en recopilar información relevante para el equipo de ventas de Stripe. Utiliza un enfoque de Formulario de Múltiples Pasos que primero solicita tu correo electrónico de trabajo y país/región para capturar tu información.
Una vez que haces clic en el botón de continuar, el formulario de contacto de Stripe tiene como objetivo comprender bien tu empresa y cómo Stripe puede ayudarte.
Al preguntar sobre el tamaño de tu empresa, los ingresos y las necesidades de integración, les permite dirigir tu consulta a la persona más adecuada.
Cómo Crear una Página de Contacto Como Esta
- Complemento de Formularios de Clientes Potenciales de WPForms: Utiliza el campo Salto de Página o el complemento de Formularios de Clientes Potenciales para dividir tu formulario en secciones separadas.
- Enfócate en la información relevante: Considera qué información sobre clientes potenciales sería más útil para tu equipo de ventas.
- Mantenlo simple: No abrumes a los usuarios con demasiados campos en el formulario. Solo pide la información esencial que necesitas para calificar clientes potenciales.
- Etiquetas e instrucciones claras: Usa etiquetas claras y concisas para cada campo y proporciona las instrucciones necesarias para evitar confusiones.
¡Crea tu formulario de múltiples pasos ahora! :)
3. Legalia
El formulario de contacto en la página "Contáctanos" de Legalia Corp es una interfaz bien pensada diseñada para facilitar la comunicación fluida entre el bufete y sus clientes.
Lo que destaca de esta página es su diseño de varias columnas, con un mapa a la izquierda para proporcionar claridad de ubicación y un formulario de contacto estructurado a la derecha.
Por qué Creo que Este Formulario de Contacto Destaca
El uso de un diseño de varias columnas es particularmente efectivo, ya que divide el formulario de manera ordenada en dos secciones diferentes.
Esto permite a los usuarios separar visualmente la información geográfica de los campos de contacto, lo cual es un enfoque interesante.
También creo que incluir un mapa no solo ayuda a localizar fácilmente el bufete, sino que también aumenta la legitimidad y accesibilidad del negocio.
El formulario en sí también es bastante sencillo, solicitando información esencial sin abrumar al usuario.
Cómo Crear una Página de Contacto Como Esta
- Planifica tu diseño: Comienza decidiendo un diseño que equilibre la interfaz de usuario y la estética del diseño. Un diseño dividido puede ser muy efectivo para separar visualmente diferentes tipos de información mientras se mantienen en la misma página.
- Incorporar Mapas: Si su negocio tiene una ubicación física, incrustar un mapa en la página de contacto puede aumentar significativamente la confianza del usuario y simplificar el proceso de localización. Utilice herramientas como Google Maps para una fácil integración.
- Simplificar el Formulario: Mantenga los campos de su formulario al mínimo para evitar disuadir a posibles contactos. Solicite solo la información más crítica, como el nombre, el correo electrónico y un cuadro de mensaje breve, lo que creo que es bastante suficiente.
¡Añade un Mapa a tu Formulario de Contacto! 🙂
4. Search Engine Journal
El formulario de contacto en la página "Contáctenos" de Search Engine Journal destaca por sus completas funciones adaptadas a una variedad de necesidades de los usuarios.
Este formulario incorpora funcionalidades avanzadas como captcha para seguridad, una opción de carga de archivos y categorización de consultas.
Por qué Creo que Este Formulario de Contacto Destaca
La categorización es la parte que quiero destacar. SEJ pregunta de antemano si está escribiendo sobre publicidad, un problema técnico o algo más.
Ese único menú desplegable probablemente ahorra a su equipo una gran cantidad de tiempo de clasificación porque el enrutamiento ocurre antes de que el mensaje llegue a cualquier bandeja de entrada.
El CAPTCHA está haciendo el trabajo aburrido pero necesario de reducir el volumen de spam. De lo contrario, un sitio con el tráfico de SEJ es bombardeado por bots.
Y el campo de carga de archivos es genuinamente útil para el tipo de envíos que recibe un editor, capturas de pantalla, presentaciones de proyectos, a veces borradores de artículos.
Cómo Crear una Página de Contacto Como Esta
- Implementar Funciones de Seguridad: Incluya medidas de seguridad como un CAPTCHA con la ayuda de WPForms para proteger su sitio del spam y el abuso, lo que ayudará a mantener la integridad de sus comunicaciones.
- Enfocarse en la Experiencia del Usuario: Diseñe su formulario pensando en el usuario. Asegúrese de que sea fácil de navegar, los campos estén claramente etiquetados y las instrucciones sean sencillas para evitar confusiones. Utilice un campo desplegable para la categorización de las consultas de los usuarios.
- Añadir un Campo de Carga de Archivos: Si desea dar a las personas que se ponen en contacto con usted la oportunidad de adjuntar campos a sus consultas, puede utilizar WPForms para añadir un campo de Carga de Archivos a su formulario, que es bastante fácil de usar.
¡Configura CAPTCHA en tu Formulario de WordPress! 🙂
5. Marvel
Marvel es una empresa de diseño de software que utiliza un diseño de varias columnas en su formulario de contacto con una imagen a la derecha. El diseño es limpio y moderno, asegurando que los usuarios puedan encontrar la información que necesitan sin problemas.
Por qué Creo que Este Formulario de Contacto Destaca
El diseño de varias columnas es lo que realmente distingue a este formulario de contacto y le da esa sensación despejada y espaciosa.
Permite a los usuarios escanear rápidamente la página y encontrar exactamente lo que necesitan sin tener que revisar mucho texto.
La imagen en el lado derecho del formulario no solo es visualmente atractiva, sino que también es relevante para el negocio de Marvel, mostrando su compromiso con el diseño.
Cómo Crear una Página de Contacto Como Esta
- Diseño de Varias Columnas: Comience por decidir un diseño que equilibre la interfaz de usuario y la estética del diseño. Un diseño de varias columnas puede ser muy eficaz para separar visualmente diferentes tipos de información mientras se mantienen en la misma página.
- Uso estratégico de imágenes: Elija imágenes que reflejen su marca y se relacionen con el propósito de la página. Añadir una imagen a su formulario de contacto puede hacer que parezca más atractivo e interactivo en general.
¡Añada imágenes a su formulario de contacto! :)
6. Medium
La experiencia de contacto de Medium es interesante porque en realidad no es un formulario de contacto. Es un centro de ayuda primero, y solo si no encuentra lo que necesita, tiene la opción de enviar una solicitud.
La página dirige con enlaces directos a temas de ayuda populares, búsqueda y preguntas frecuentes. Puede categorizar qué tipo de ayuda necesita antes que nada.
Por qué creo que esta página de Contacto Destaca
La página de contacto de Medium suele incluir menús desplegables o casillas de verificación que permiten a los usuarios categorizar sus consultas. Muchos centros de ayuda proporcionan enlaces a preguntas frecuentes o artículos relacionados antes de permitir el envío del formulario.
Sin embargo, la principal desventaja de su página es que Medium no utiliza un formulario de contacto. Esto puede ser frustrante para los usuarios que necesitan ponerse en contacto urgentemente con sus equipos de soporte.
Cómo Crear una Página de Contacto Como Esta
- Incorpore opciones de autoayuda: Integre su página de contacto con su base de conocimientos. Proporcione artículos o enlaces a preguntas frecuentes relacionados con las selecciones o la entrada del usuario, resolviendo potencialmente la consulta.
- Muestre el formulario de todos modos: No oculte el formulario tan profundamente que los casos de soporte reales se rindan. Un enlace visible de "Todavía necesito ayuda" en la parte inferior es la válvula de seguridad.
7. White Frontier
White Frontier es una cervecería artesanal suiza, y su página de contacto utiliza un formulario transparente superpuesto a una imagen de fondo. Si desea un formulario de contacto que no esté en un simple cuadro blanco, este es el patrón a seguir.
Por qué creo que esta página de Contacto Destaca
Un formulario transparente mantiene la personalidad visual de la marca en la página. No se pierde la fotografía de fondo en un contenedor de formulario gris gigante. Para estilo de vida, hostelería, alimentos y bebidas, o cualquier lugar donde la imagen de marca tenga mucho peso, eso importa.
La imagen de fondo debe permitir la lectura del texto, o el formulario se volverá ilegible. White Frontier utiliza una fotografía de cerveza oscurecida, lo que da a las etiquetas blancas del formulario suficiente contraste para que sigan siendo legibles. Si copia este patrón sobre una fotografía concurrida, necesitará una superposición para mantener las cosas legibles.
Cómo Crear una Página de Contacto Como Esta
- Estilo con CSS: WPForms le permite ajustar los estilos del contenedor, el fondo y los campos directamente desde el editor de bloques, sin necesidad de CSS. Para estilos completamente personalizados, consulte nuestra guía para principiantes sobre cómo estilizar sus formularios con CSS.
- Elija un fondo que admita texto: una foto de bajo contraste o una con una superposición oscura aplicada. Pruebe en el móvil, donde el fondo suele recortarse de forma diferente que en el escritorio.
- Guarde sus estilos para reutilizarlos: Una vez que haya ajustado la configuración de estilo, copie el CSS que genera el editor de bloques y reutilícelo en cada formulario del sitio para que el diseño se mantenga coherente.
8. HubSpot
La página de contacto de HubSpot ofrece varias formas de ponerse en contacto en la misma página: un formulario de ventas, un chat de ventas, un número de teléfono y enlaces a la base de conocimientos de soporte.
Este es el patrón correcto cuando tienes compradores y clientes existentes con necesidades muy diferentes, y no quieres que ningún grupo sienta que se le ha dejado de lado.
Por qué creo que esta página de Contacto Destaca
HubSpot trata el contacto como un problema de enrutamiento primero. La página está organizada por lo que quieres hacer (hablar con ventas, hablar con soporte, obtener una demostración, encontrar un recurso), y cada opción tiene su propia llamada a la acción clara. No hay un único megaformulario que pretenda servir a todo el mundo.
El chat de ventas se encuentra junto al formulario de ventas, lo que es un reconocimiento tácito de que algunos compradores quieren escribir una consulta detallada y otros quieren hacer una pregunta rápida antes de comprometerse. Ofrecer ambas opciones no es redundante, es cubrir el espectro.
Para las empresas más pequeñas, esto puede ser excesivo. Pero el principio se puede adaptar. Incluso en un sitio pequeño, distinguir entre "quiero comprar" y "necesito ayuda con lo que ya compré" antes de que se cargue el formulario de contacto mejora ambos flujos.
Cómo recrearlo en WordPress
- Canales con pestañas o agrupados: Usa un bloque de pestañas o una simple cuadrícula de tarjetas de CTA para que los visitantes elijan su camino. Cada tarjeta va a su propio formulario o página.
- Formularios diferentes para intenciones diferentes: Ten un formulario de "Hablar con Ventas" con campos para cualificar ventas y un formulario de "Solicitud de Soporte" con números de pedido y nombres de productos. No los combines.
- Muestra alternativas cerca del formulario: Un número de teléfono, una dirección de correo electrónico, un enlace de chat. Algunos visitantes siempre preferirán saltarse el formulario, y ofrecer la alternativa reduce la frustración sin perjudicar las envíos del formulario.
Cómo Personalizar los Diseños de tu Formulario de Contacto
Antes de empezar, asegúrate de que WPForms está instalado y activado en tu sitio de WordPress y de que has verificado tu licencia.
Luego, crea un nuevo formulario y añádelo a una página o publicación. En el editor de bloques, haz clic en el formulario para abrir opciones de estilo adicionales para el bloque WPForms.
Puedes cambiar el tema de color, los campos del formulario, las etiquetas, los botones y los estilos del contenedor y del fondo sin escribir ningún CSS en la configuración del bloque WPForms.
- Puedes elegir un tema de color predefinido en la configuración de Temas para cambiar el estilo de los campos, etiquetas, botones, contenedores y fondos de tu formulario.
- En la sección Estilos de Campo, encontrarás las opciones para ajustar el tamaño, borde, tamaño del borde, radio del borde y colores de los campos de tu formulario.
- Cambiar el tamaño y el color de las etiquetas de tu formulario es posible en la sección Estilos de Etiqueta. Las opciones de tamaño disponibles incluyen Pequeño, Mediano y Grande.
- En Estilos de Botón, puedes cambiar el tamaño, color, borde, tamaño del borde, radio del borde y estilo del borde de tus botones.
- La configuración de Estilos de Contenedor te permite cambiar el color, sombra, relleno, estilo, tamaño y radio del borde alrededor del contenedor de tu formulario.
- La configuración de Estilos de Fondo te da control sobre la imagen y el color de fondo de tu formulario para darle un toque de marca.
Una vez que hayas estilizado tu formulario de contacto, haz clic en la pestaña Avanzado. Aquí, puedes copiar el código CSS que contiene todos los estilos que has añadido.
Cada vez que crees un nuevo formulario, simplemente pega el fragmento de código y el diseño del formulario utilizará los estilos del formulario anterior.
Del mismo modo, puedes diseñar tus notificaciones por correo electrónico con plantillas listas para usar, lo cual es una excelente manera de mejorar tu marca en todos los canales de comunicación.
Solo asegúrate de añadir un logotipo bien proporcionado a tu correo electrónico (y sitio web) para garantizar una claridad y capacidad de respuesta perfectas en todos los dispositivos.
Preguntas frecuentes sobre el diseño de formularios de contacto
El diseño de formularios de contacto es uno de los temas sobre los que más me preguntan. Aquí tienes las respuestas a las preguntas que surgen una y otra vez.
¿Qué hace que un diseño de formulario de contacto sea bueno?
Un buen diseño de formulario de contacto mantiene los campos al mínimo que un visitante puede soportar, etiqueta cada entrada claramente, encaja con el resto de tu sitio y coloca el botón de envío en un lugar obvio. El estilo visual importa menos que las elecciones estructurales que lo rodean.
¿Cuántos campos debe tener un formulario de contacto?
De tres a cinco campos es el punto óptimo para la mayoría de los formularios de contacto de pequeñas empresas. Nombre, correo electrónico, mensaje es lo básico. Añade un asunto o un menú desplegable de tipo de consulta si gestionas diferentes tipos de solicitudes, y añade un campo de teléfono solo si realmente devuelves llamadas.
¿Se puede personalizar WPForms?
Sí, WPForms está diseñado para ser personalizado sin código. Puedes ajustar los estilos de los campos, los estilos de las etiquetas, los estilos de los botones, los estilos de los contenedores y el fondo directamente en el editor de bloques de WordPress. Para cambios más profundos, también puedes pegar CSS personalizado o crear tus propias plantillas de formularios.
¿Cómo personalizo mi formulario de contacto?
Empieza eligiendo una plantilla o creando un formulario desde cero en el constructor de formularios de WPForms. Añade, elimina y reorganiza los campos según sea necesario. Luego ajusta las etiquetas, los marcadores de posición y los tamaños de los campos desde el constructor de formularios, y utiliza los controles de estilo del editor de bloques para establecer los colores y las formas que coincidan con tu marca.
¿Cómo diseño un formulario de contacto en WordPress?
WPForms y el editor de bloques de WordPress se encargan de la mayor parte del diseño de formularios sin necesidad de código. Elige un tema de color predefinido para empezar, luego ajusta los campos, las etiquetas, los botones y los fondos desde el editor de bloques. Para diseños únicos, pega CSS personalizado en tu bloque de formulario.
¿Cómo cambio el diseño de un formulario en WordPress?
Abre el formulario que deseas editar en WPForms, luego personaliza el diseño desde el constructor de formularios para la disposición y organización de los campos, y el editor de bloques para los estilos visuales. Para un diseño detallado, utiliza los controles de tema, campo, etiqueta, botón y fondo del editor de bloques.
A continuación, crea una página de contacto destacada alrededor de tu formulario
Si estás listo para reunir todo lo que hemos cubierto aquí, mi guía para crear una página de Contacto destacada te guía a través de los elementos de apoyo (titulares, señales de confianza, canales alternativos) que rodean el formulario en sí.
Si aún no has creado tu formulario, el lugar más rápido para empezar es la plantilla de formulario de contacto simple de WPForms. Puedes crear un formulario de contacto simple en WordPress en unos cinco minutos.
Crea tu formulario de contacto ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
