¿Buscas inspiración para el diseño de formularios de contacto para tu sitio web? Con unos sencillos ajustes, puede crear formularios en línea como desee.
En este artículo, te mostraré algunos ejemplos de diseño de formularios de contacto y te daré consejos útiles para crear uno en tu sitio web.
7 diseños de formularios de contacto que puedes copiar
Examinemos ahora algunos ejemplos geniales y las tácticas clave que utilizan para inspirarse y recrearlos en su sitio web.
1. WPForms
Quería empezar con la página de contacto de WPForms, ya que creo que es un ejemplo excelente 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 los clientes actuales con preguntas técnicas y otra para las consultas previas a la venta.
Por qué creo que destaca este formulario de contacto
El formulario de contacto no es visible inmediatamente, y sólo aparece cuando alguien pulsa 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 garantiza que los nuevos clientes potenciales utilicen el formulario principalmente, ya que sólo 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 adecuada, agilizando el proceso tanto para la empresa como para las personas que se ponen en contacto.
Además, en la parte inferior de la página, hay un enlace de llamada a la acción (CTA) que invita a los visitantes a unirse al Círculo VIP de WPForms.
Cómo crear una página de contacto como ésta
Formulario de contacto emergente: Diseñe una página de contacto en la que el formulario aparezca sólo 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 conocimientos para atención al cliente: Implemente una wiki o base de conocimientos en su sitio de WordPress. Esto sirve como un área de autoayuda para los clientes existentes, abordando preguntas y problemas comunes.
Uso de plantillas: Elija entre más de 2.000 plantillas de formularios de WordPress para diversos fines, como comentarios, marketing y operaciones comerciales. Estas plantillas ayudan a configurar rápidamente formularios funcionales y de aspecto profesional. (Prueba también estas plantillas ocultas de WPForms para situaciones especiales).
Traducción de formularios: Para los sitios web que atienden a personas que no hablan inglés o a audiencias multilingües, WPForms permite traducir fácilmente los formularios de contacto para satisfacer diversas necesidades lingüísticas.
Decidí centrarme en la página de contacto de ventas de Stripe porque es un buen ejemplo de página de contacto especializada que gestiona eficazmente las consultas comerciales.
Para que el formulario de contacto parezca corto, Stripes utiliza un formulario de varios pasos en su página de contacto, lo que sin duda ayuda a reducir la tasa de abandono del formulario.
Por qué creo que destaca esta página de contacto
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 formulario de varios pasos en el que primero se le pide su dirección de correo electrónico del trabajo y su país/región para recopilar su información.
Una vez que haga clic en el botón Continuar, el formulario de contacto de Stripe tiene como objetivo conocer bien su empresa y cómo Stripe puede ayudarle.
Al preguntar por el tamaño de su empresa, sus ingresos y sus necesidades de integración, les permite dirigir su consulta a la persona más adecuada.
Céntrese en la información relevante: Piense qué información sobre los clientes potenciales sería más útil para su equipo de ventas.
Que sea sencillo: No abrume a los usuarios con demasiados campos de formulario. Limítate a pedir la información esencial que necesitas para cualificar a los clientes potenciales.
Etiquetas e instrucciones claras: Utilice etiquetas claras y concisas para cada campo y facilite las instrucciones necesarias para evitar confusiones.
El formulario de contacto de la página "Contacte con nosotros" de Legalia Corp es una interfaz bien pensada y diseñada para facilitar una comunicación fluida entre el bufete y sus clientes.
Lo que más destaca de esta página es su diseño en varias columnas, con un mapa a la izquierda para facilitar la localización y un formulario de contacto estructurado a la derecha.
Por qué creo que destaca este formulario de contacto
El uso de un diseño de varias columnas es especialmente eficaz, ya que divide el formulario claramente en dos secciones diferentes.
Esto permite a los usuarios separar visualmente la información geográfica de los campos de contacto, lo que constituye un enfoque interesante.
También creo que incluir un mapa no sólo ayuda a localizar fácilmente la empresa, sino que también aumenta la legitimidad y accesibilidad del negocio.
El formulario en sí también es bastante sencillo, ya que pide la información esencial sin abrumar al usuario.
Cómo crear una página de contacto como ésta
Planifique su diseño: Empiece por elegir un diseño que equilibre la interfaz de usuario y la estética. Un diseño dividido puede ser muy eficaz para separar visualmente distintos tipos de información y mantenerlos en la misma página.
Incorpore mapas: Si tu empresa 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 búsqueda de la ubicación. Utiliza herramientas como Google Maps para facilitar la integración.
Simplifique el formulario: Reduzca al mínimo los campos del formulario para no disuadir a los posibles contactos. Solicite solo la información más importante, como el nombre, el correo electrónico y un breve cuadro de mensaje, que considero suficiente.
El formulario de contacto de la página "Contacte con nosotros" de Search Engine Journal destaca por sus completas funciones adaptadas a diversas necesidades de los usuarios.
Este formulario incorpora funcionalidades avanzadas como captcha por seguridad, opción de carga de archivos y categorización de consultas.
Por qué creo que destaca este formulario de contacto
Me encanta cómo Search Engine Journal ha introducido varias opciones de categorización basadas en el tipo de consulta del usuario.
Ya sea para publicidad, para informar de un problema técnico o para otras cuestiones, hay una opción para cada necesidad.
Incluir un CAPTCHA también ayuda a evitar el envío de spam, garantizando que sólo las consultas auténticas lleguen al equipo de SEJ.
Por último, los usuarios pueden adjuntar archivos a sus consultas, lo que resulta especialmente beneficioso para enviar documentos que respalden sus mensajes o solicitudes.
Cómo crear una página de contacto como ésta
Implemente funciones de seguridad: Incluya medidas de seguridad como un CAPTCHA con la ayuda de WPForms para proteger su sitio de spam y abuso, lo que ayudará a mantener la integridad de sus comunicaciones.
Concéntrese en la experiencia del usuario: Diseñe su formulario pensando en el usuario. Asegúrese de que es fácil de navegar, los campos están claramente etiquetados y las instrucciones son sencillas para evitar confusiones. Utiliza un campo desplegable para categorizar las consultas de los usuarios.
Añada un campo de carga de archivos: Si quieres dar a la gente que contacta contigo la oportunidad de adjuntar campos a sus consultas, puedes usar WPForms para añadir un campo de Carga de Archivos a tu formulario, que es bastante fácil de usar.
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, lo que garantiza que los usuarios puedan encontrar la información que necesitan sin complicaciones.
Por qué creo que destaca este formulario de contacto
El diseño de varias columnas es lo que realmente distingue a este formulario de contacto, y le da esa sensación de despeje y respiración.
Permite a los usuarios escanear rápidamente la página y encontrar exactamente lo que necesitan sin tener que rebuscar entre un montón de texto.
La imagen de la derecha del formulario no sólo es visualmente atractiva, sino también relevante para el negocio de Marvel, mostrando su compromiso con el diseño.
Cómo crear una página de contacto como ésta
Disposición en varias columnas: Empiece por decidirse por una disposición 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 distintos tipos de información y mantenerlos en la misma página.
Uso estratégico de imágenes: Elija imágenes que reflejen su marca y estén relacionadas con el propósito de la página. Añadir una imagen al formulario de contacto puede hacer que resulte más atractivo e interactivo.
La página de contacto de un centro de ayuda como el de Medium es crucial para ofrecer ayuda y orientación directas a los usuarios.
Contiene enlaces directos a temas de ayuda y respuestas populares. Los usuarios pueden enviar fácilmente una solicitud si no encuentran respuesta a sus preguntas.
Por qué creo que destaca esta página de contacto
La página de contacto del medio 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 las preguntas más frecuentes o a artículos relacionados antes de permitir el envío del formulario.
Sin embargo, el principal inconveniente de su página es que Medium no utiliza un formulario de contacto. Esto puede resultar frustrante para los usuarios que necesiten contactar urgentemente con sus equipos de soporte.
Cómo crear una página de contacto como ésta
Incorpore opciones de autoayuda: Integre su página de contacto con su base de conocimientos. Proporcione artículos o enlaces a preguntas frecuentes relacionadas con las selecciones o entradas del usuario, resolviendo potencialmente la consulta.
7. Frontera blanca
¿Quieres colocar un formulario sobre una imagen de fondo? ¿Buscas un diseño de formulario de contacto que utilice CSS? ¡Lo tengo cubierto!
White Frontier utiliza un formulario transparente en su página de contacto, por lo que su formulario de contacto se funde perfectamente con el diseño de fondo.
Cuando pruebes este diseño en tu sitio, asegúrate de colocar una imagen en el fondo. De lo contrario, no podrá ver el formulario.
Personalizar los formularios de todo el sitio es bastante fácil una vez que tienes los fragmentos de CSS que deseas utilizar.
Lo único que tienes que hacer es copiar los fragmentos de CSS que quieras utilizar y pegarlos en tu sitio mediante el personalizador de temas de WordPress o el editor de temas.
Un método aún más sencillo es utilizar un plugin como WPCode, que te permite pegar diferentes tipos de fragmentos de código en tu sitio.
También puede tener varios formularios en su sitio web y desea cambiar el estilo a sólo uno de ellos. Le mostraremos cómo hacerlo a continuación.
Cómo personalizar los diseños de los formularios de contacto
Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio WordPress y que ha verificado su licencia.
A continuación, cree un nuevo formulario y añádalo a una página o entrada. En el editor de bloques, haz clic en el formulario para abrir opciones de estilo adicionales para el bloque WPForms.
Puede cambiar el tema del 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.
Puede elegir un tema de color predefinido en la configuración Temas para cambiar el estilo de los campos, etiquetas, botones, contenedores y fondos de su formulario.
En la sección Estilos de campo encontrará las opciones para ajustar el tamaño, el borde, el radio del borde y los colores de los campos de formulario.
Es posible cambiar el tamaño y el color de las etiquetas de los formularios en la sección Estilos de etiquetas. Las opciones de tamaño disponibles son Pequeño, Mediano y Grande.
En Estilos de botones, puede cambiar el tamaño, el color, el borde, el tamaño del borde, el radio del borde y el estilo del borde de los botones.
Los ajustes de Estilos de Contenedor le permiten cambiar el color, la sombra, el relleno, el estilo, el tamaño y el radio del borde alrededor del contenedor de su formulario.
La configuración de Estilos de fondo le permite controlar la imagen y el color de fondo de su formulario para darle un aspecto 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 cree un nuevo formulario, simplemente pegue el fragmento de código, y el diseño del formulario utilizará los estilos del formulario anterior.
Sólo tienes que asegurarte de añadir un logotipo bien proporcionado a tu correo electrónico (y a tu sitio web) para garantizar una claridad y una capacidad de respuesta perfectas en todos los dispositivos.
Preguntas frecuentes sobre los diseños de formularios de contacto
El diseño de formularios de contacto es un tema de interés popular entre nuestros lectores. He aquí las respuestas a algunas preguntas frecuentes al respecto:
¿Se puede personalizar WPForms?
Sí, puede personalizar WPForms ampliamente. WPForms le permite crear plantillas personalizadas y modificar estilos directamente dentro del editor de bloques de WordPress.
Para personalizar tu formulario de contacto en WordPress usando WPForms, empieza por seleccionar una plantilla o crear un formulario desde cero.
Puede añadir, eliminar y reorganizar los campos según sea necesario. Utilice el constructor de formularios WPForms para ajustar la configuración como etiquetas, marcadores de posición y tamaños de campo para una mayor personalización.
¿Cómo se estiliza un formulario de contacto en WordPress?
Para diseñar un formulario de contacto en WordPress, utilice WPForms y el editor de bloques de WordPress. Con WPForms, puedes elegir entre plantillas de formularios prediseñadas y personalizables.
En el Editor de bloques, puedes añadir CSS personalizado directamente a los bloques de formularios para cambiar las fuentes, los colores, el relleno y mucho más para adaptarlos al estilo de tu sitio.
¿Cómo cambiar el diseño de un formulario en WordPress?
Cambia el diseño de tu formulario en WordPress usando WPForms. Seleccione el formulario que desea editar y, a continuación, personalice su diseño dentro del constructor de formularios.
Para un estilo detallado, utilice el Editor de bloques de WordPress, donde puede cambiar el tema del formulario, los estilos de los campos, los estilos de las etiquetas, los estilos de los botones, los estilos de fondo y mucho más.
A continuación, aprenda a crear una plantilla de formulario de marca
Los formularios personalizados que reflejan los colores, el logotipo y el estilo de tu marca hacen que tus formularios parezcan más personales y profesionales, lo que aumenta la participación y la confianza de los usuarios. Consulta esta guía para obtener instrucciones sobre cómo crear una plantilla de formulario de marca.
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.
Hamza es un escritor del equipo de WPForms, que también se especializa en temas relacionados con el marketing digital, la ciberseguridad, los plugins de WordPress y los sistemas ERP.Más información
El mejor plugin de WordPress para crear formularios arrastrando y soltando
Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.
¿Quieres mejorar tus resultados en las redes sociales? Conectar tu sitio de WordPress a tus cuentas de redes sociales puede ayudarte a agilizar tus tareas de marketing en redes sociales y a crear una marca online más integrada. En este artículo, te presentamos los mejores plugins de redes sociales para WordPress, que te ayudarán a mantener tu sitio web y tus redes sociales sincronizados.
¿No recibe notificaciones por correo electrónico de sus formularios de contacto de WordPress? Lamentablemente, el problema de que los formularios de contacto de WordPress no envíen correos electrónicos es muy común.
Sin embargo, puede solucionar rápidamente este problema y empezar a recibir esos correos electrónicos configurando el Protocolo simple de transferencia de correo (SMTP) en su sitio web. Este tutorial le muestra exactamente cómo solucionar el problema de envío de correos electrónicos del formulario de contacto de WordPress.
Gestione sus preferencias de cookies a continuación:
Las cookies esenciales permiten funciones básicas y son necesarias para el correcto funcionamiento del sitio web.
Nombre
Descripción
Duración
Preferencias de cookies
Esta cookie se utiliza para almacenar las preferencias de consentimiento de cookies del usuario.
30 días
Preferencias de cookies
Esta cookie se utiliza para almacenar las preferencias de consentimiento de cookies del usuario.
30 días
Easy Digital Downloads es un complemento de WordPress para vender productos digitales sin esfuerzo y administrar transacciones.
Nombre
Descripción
Duración
edd_session_
Almacena información sobre la sesión de usuario actual.
Sesión
edd_items_in_cart
Almacena información sobre el contenido del carrito.
Sesión
Estas cookies se utilizan para administrar la funcionalidad de inicio de sesión en este sitio web.
Nombre
Descripción
Duración
wordpress_logged_in
Se utiliza para almacenar los usuarios registrados.
Persistente
wordpress_sec
Se utiliza para realizar un seguimiento del usuario a lo largo de varias sesiones.
15 días
wordpress_test_cookie
Se utiliza para determinar si las cookies están habilitadas.
Sesión
WPForms es un complemento de WordPress fácil de usar para crear formularios personalizados con funcionalidad de arrastrar y soltar.
Nombre
Descripción
Duración
wpfuuid
Se utiliza para rastrear las interacciones de los usuarios con los formularios.
11 años
Las cookies estadísticas recopilan información de forma anónima. Esta información nos ayuda a comprender cómo utilizan los visitantes nuestro sitio web.
Google Analytics es una herramienta poderosa que rastrea y analiza el tráfico del sitio web para tomar decisiones de marketing informadas.
Se utiliza para almacenar datos de variables personalizadas a nivel de visitante.
2 años
__utmz
Almacena la fuente de tráfico o la campaña que explica cómo el usuario llegó a su sitio.
6 meses
_ga
Se utiliza para distinguir a los usuarios.
2 años
_gat
Se utiliza para limitar la velocidad de solicitud.
1 minuto
_gid
Se utiliza para distinguir a los usuarios.
24 horas
__utma
Se utiliza para distinguir a los usuarios.
Persistente
__utmb
Se utiliza para determinar nuevas sesiones/visitas.
30 minutos
__utmc
Se utiliza para determinar si el usuario está en una nueva sesión/visita.
Sesión
__utmt
Se utiliza para limitar la velocidad de solicitud.
10 minutos
Las cookies de marketing se utilizan para seguir a los visitantes de los sitios web. La intención es mostrar anuncios que sean relevantes y atractivos para el usuario individual.
OptinMonster es una poderosa herramienta de generación de leads que ayuda a las empresas a convertir visitantes en suscriptores y clientes.
se utiliza para determinar si un visitante ha interactuado con un ID de campaña de {id} en su sitio.
30 días
om-interaction-cookie / omGlobalInteractionCookie
Se utiliza para determinar si un visitante ha interactuado con alguna campaña de su sitio.
Sesión
om-global-cookie / omGlobalSuccessCookie
Se utiliza para evitar que futuras campañas de OptinMonster se muestren en su sitio.
Sesión
_omappvs
Cookie utilizada para identificar a los visitantes recurrentes
1 día
_omappvp
Cookie utilizada para identificar a los visitantes recurrentes
1 día
_omra
Se utiliza para almacenar los datos de interacción y conversión de las campañas junto con Revenue Attribution.
1 año
omCountdown-{id}-{elementId}
Se utiliza para elementos de cuenta atrás {elementId} en campañas {id} para determinar cuándo debe completarse
Sesión
om-{id}-cerrado / omSlideClosed-{id}
Se utiliza específicamente con las campañas deslizantes {id} para determinar si ha sido cerrada o no por un visitante.
30 días
om-success-cookie / omSuccessCookie
se utiliza para determinar si un visitante se ha registrado correctamente en alguna campaña de su sitio para desbloquear contenidos cuando se utiliza la función de bloqueo de contenidos.
365 días
om-success-{id} / omSuccess-{id}
Se utiliza para determinar si un visitante se ha suscrito correctamente a una campaña con el ID {id} en su sitio web.
365 días
omSeen-{id}
Se utiliza para determinar si a un visitante se le ha mostrado una campaña por el slug. Sin fecha de caducidad
30 días
X Pixel permite a las empresas rastrear las interacciones de los usuarios y optimizar el rendimiento de los anuncios en la plataforma X de manera efectiva.
Esta cookie es instalada por X para identificar y rastrear al visitante del sitio web. Registra si un usuario ha iniciado sesión en la plataforma X y recopila información sobre preferencias publicitarias.
2 años
personalización_id
Valor único con el que los usuarios pueden ser identificados por X. La información recopilada se utiliza para personalizar los servicios de X, incluidas las tendencias, historias, anuncios y sugerencias de X.
2 años
referenciador_externo
Nuestro sitio web utiliza botones X para permitir a nuestros visitantes seguir nuestros feeds X promocionales y, en ocasiones, incrustar feeds en nuestro sitio web.