¿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.
Estiliza ya tu formulario de contacto 🙂 .
También te mostraré un método muy práctico sin código para cambiar el diseño de tus formularios. ¿Preparado? ¡A trabajar!
En este artículo
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.
Lea también: Cómo permitir a los visitantes duplicar campos de formulario
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.
Cree su formulario WordPress ahora
2. Raya
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ómo crear una página de contacto como ésta
- Complemento WPForms Lead Forms: Utilice el campo Salto de Página o el addon Lead Forms para dividir su formulario en secciones separadas.
- 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.
Cree su formulario multipaso ahora
3. Legalia
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.
Añada un mapa a su formulario de contacto
4. Diario de los motores de búsqueda
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.
Lea también: cómo forzar el espaciado entre campos.
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.
Configurar CAPTCHA en su 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, 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.
Añada imágenes a su formulario de contacto
6. Medio
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.
Cómo crear una página de contacto como ésta
Para este ejemplo, puedes simplemente copiar el CSS de diseño del formulario de contacto de abajo. Puedes consultar nuestra guía para principiantes sobre cómo dar estilo a tus formularios con CSS para más detalles.
Diseño de formularios de contacto CSS
/* Fields */ div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea { background-color: transparent; /* Remove background fill */ text-transform: uppercase; /* Make text all uppercase */ border-radius: 0; /* Remove corner curve */ border: 2px solid #fff; /* 2px white border */ color: #fff; /* White text */ height: 45px; /* Increase input height */ } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } /* Button */ div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button { text-transform: uppercase; padding: 10px 60px; color: white; background: #444; font-weight: normal; }Personalización del sitio web
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.
Del mismo modo, puede diseñar sus notificaciones por correo electrónico con plantillas ya preparadas, lo que constituye una excelente forma de mejorar su imagen de marca en todos los canales de comunicación.
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.
Modele ahora su formulario de contacto
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.
Esta flexibilidad le permite adaptar sus formularios al diseño de su sitio web y a sus necesidades específicas. Consulte esta guía para obtener más información.
¿Cómo personalizo mi formulario de contacto?
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.
Cree su formulario WordPress ahora
¿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.
