Construyendo el formulario de contacto perfecto de WordPress: 6 reglas de sin calar

Haga todo lo posible para crear un sitio web que lleva a los visitantes a la conversión. Mientras estudia los análisis, le complace ver que el viaje del usuario que ha creado es tomado por esos visitantes una y otra vez. Sin embargo, hay algo que les impide convertir. Descubra de qué se trata en esta guía de formularios de contacto avanzados. El formulario de contacto es una parte esencial del viaje de los visitantes. Incluso si realmente los ha vendido en lo que sea que tenga para ofrecer el sitio web, un formulario de contacto podría destruir de manera realista su experiencia si no está bien ejecutada.
Botones rotos, campos confusos, demasiados pasos, una interfaz desorganizada … maldita sea, incluso colocar el formulario de contacto podría interrumpir la experiencia del usuario. Hay muchos que pueden salir mal, y en este artículo haremos todo lo posible para educarle cómo puede evitar estas cosas. Específicamente, le ofrecemos … 6 reglas para la construcción del formulario de contacto perfecto, pero quede, PSA rápidamente … Antes de continuar, debe saber que este es un aspecto avanzado en el mundo de los formularios de contacto de WordPress. Si desea una presentación simple, nuestra publicación inicial con formularios de contacto es un lugar maravilloso para comenzar.
Luego, una vez que sepa que tiene que crear más formularios de contacto para su sitio, el siguiente paso es elegir el complemento adecuado para el formulario de contacto para facilitar su vida. Después de haber hecho estas cosas, consideramos que estará preparado y preparado para la información avanzada (heh). Pasando … la autenticación del usuario. Registros de membresía. Subscripcion de correo electronico. Solicitudes de cotización. Cuestionarios. Solicitudes de soporte. Formularios de pedido y pago. Hay muchas formas diferentes de usar formularios de contacto en un sitio de WordPress. Sin embargo, lo que no cambia son las reglas que debe seguir si desea que el formulario de contacto funcione bien. Un estudio de seguimiento ocular de Google publicado en 2014 ha demostrado que el cumplimiento de las pautas más básicas para el diseño de formularios mejorará significativamente al usuario experiencia. Específicamente, cuando un formulario de contacto cumple con todas las reglas, el 78% de los usuarios pueden completar y enviar un intento. Sin embargo, cuando un formulario de contacto viola estas reglas, solo el 42% puede hacerlo a partir de un solo intento. ¿Tienes curiosidad por saber cuáles son esas reglas? Entonces continúas leyendo. Regla #1: Centrarse en la alineación, como verá en algunas de las otras reglas aquí, las personas a menudo están preocupadas por la longitud de los formularios de contacto, lo que a menudo conduce a malas opciones de diseño.
Tome el problema de la alineación, por ejemplo. Es posible que vea un formulario como este en el sitio web de Braintraffic y piense: “Hmmm … pero ¿no es demasiado largo completarlo?”
Este es solo un hermoso formulario de contacto basado en el sitio web de BrainTraffic. Una forma de pensar en remediar este “problema” es mover las etiquetas hacia la izquierda y colocar los campos de respuesta a la derecha. Sin embargo, los expertos de UX le dirán que no es importante, ya que compromete la capacidad de escaneo de la forma. Lo mismo es cierto si pensaste en colocar campos uno al lado del otro en la horizontal.

Básicamente, si se convierte en la estructura de la etiqueta Top/Field-Dandy, creará fricción en la experiencia del usuario. En 2010, se emitió un conjunto de pautas sobre el diseño de los formularios web llamadas “interfaces de usuario simples pero cruciales en la red mundial: introducir 20 pautas para el diseño de formularios web utilizables”. Google se hizo cargo de estas pautas en 2014 y las probó a través de un estudio de seguimiento ocular.
A partir de esta prueba de búsqueda visual, parece cuánto trabajo hacemos los ojos de los visitantes cuando no prestamos atención a la alineación.
Entre sus numerosos hallazgos, concluyeron que los formularios alineados con etiquetas colocadas sobre cada campo dieron como resultado una experiencia de usuario mejorada.

Si desea que sus formularios de contacto respeten esta simple regla de alineación, esto es lo que debe hacer:
Alinee todas las etiquetas, forman campos y el botón de urgencia principal a la izquierda.
Nunca alinee los campos asociados en horizontal. Puede estructurar el formulario lógicamente, pero cada pregunta o campo debe apilarse verticalmente.
Cualquier campo que tenga muchas variantes (con menos de seis opciones) debe mostrarse en una lista vertical de puntos o cuadros de selección, no en un menú desplegable. Un ejemplo muy hermoso de alineación y diseño de formularios de contacto móvil de WPMU Dev.
Este diseño no solo es excelente para la experiencia del usuario, sino que ayudará a su sitio a crear un puente entre la experiencia de escritorio y móvil (especialmente importante a medida que trabaja para actualizar su índice de Google para dispositivos móviles).
Regla #2: Incluya todos los campos relevantes cuando se trata de diseñar formularios de contacto, podría pensar que es más corto, ¿verdad? De hecho, este no siempre es el caso. Lo que más importa es que brinde a los usuarios todos los campos necesarios y relevantes. Michael Agaard, optimizador de conversión senior para Unbounce, hizo una presentación en 2015 que abordó esta pregunta. Él y su equipo querían saber qué pasaría si acorten este formulario de contacto:

Sorprendentemente, la forma más corta no funcionó tan bien como la más larga.
Como puede ver, han eliminado lo que creían que eran campos innecesarios para simplificar el proceso de completar el formulario.
Sin embargo, al final de la prueba, descubrieron una disminución del 14% en las conversiones más cortas. Posteriormente, estudiaron qué áreas tenían las interacciones más grandes y más bajas en la forma de contacto. Usando el diseño original y más largo, reorganizaron esos campos y actualizaron las etiquetas para aclarar qué tipo de información se necesitaba. Reanudaron la prueba y vieron una mejora del 19% de los clientes potenciales con la versión reorganizada y reorganizada de la forma larga: Unbounce descubrió que las claves para mejorar la forma de contacto más larga estaban en etiquetas, no en la longitud de la forma.

Sin embargo, esto no siempre funciona estas pruebas.
El envío, por ejemplo, descubrió que en el formulario de contacto para “Compañía” hay un campo que confunde a los clientes. Era opcional, pero los usuarios no necesariamente entendieron esto y, a su vez, completaron la información incorrecta, lo que finalmente condujo a la negativa de compra. Cuando se dio cuenta del envío, eliminó el campo y registró $ 12 millones adicionales en el año siguiente. Sugeriría que cuando construya su propio formulario de contacto, comience con los campos básicos, como lo hicieron QuickBooks aquí:
Solo se incluyen los campos más necesarios cuando se registra en QuickBooks.

Si descubre que las conversiones no cumplen con las expectativas, estudie los análisis y vea si puede determinar qué campos evita que los usuarios completen el formulario.
Regla #3: Simplifique la entrada si sus usuarios interactúan con su formulario de contacto utilizando un escritorio o dispositivo móvil o si necesitan o no tecnología de asistencia para ayudarlos a hacer esto, el formulario debe simplificar el proceso de introducción. Aquí hay algunas técnicas de las que debe tener en cuenta: pestañas para usuarios de escritorio y aquellos con problemas de accesibilidad, asegúrese de que su formulario de contacto tenga un orden giratorio lógico. Máscaras de entrada En lugar de obligar a los usuarios a adivinar cómo desea ciertos campos, puede codificarlas con máscaras de entrada que los formatan automáticamente a medida que el usuario presenta. Un ejemplo de cómo se ve una máscara de entrada en el sitio de la casa de diseño social.
Este tipo de formato automático también conduce a menos clics (especialmente si un campo como un número de teléfono o una tarjeta de crédito se divide en varios campos) y a la finalización más rápida de los formularios. Tipos de entrada Los tipos de introducción HTML ayudarán a los usuarios a ver las opciones de teclado correctas mientras escribo en el móvil, evitando que escriban todo desde cero (como “.com” para el correo electrónico).

Observe cómo se cambia el teclado en la parte inferior de este formulario de contacto de acuerdo con el campo seleccionado.
La finalización automática de Google en lugar de codificar cada campo para formarse automáticamente de acuerdo con los estándares que necesitan cumplir, active la finalización automática con el complemento de Google Dirección.
No solo le ayudará a evitar la necesidad de lidiar con los errores de ortografía y las direcciones formateadas incorrectamente, sino que aliviará a los visitantes que tengan que escribir la mayor parte de esta información.Lógica condicional Si le preocupa la longitud de su formulario de contacto, especialmente si se dirige a diferentes tipos de usuarios y cumple con varios propósitos, puede usar la lógica condicional para ser corta.Una vez que el usuario selecciona su “condición”, solo entonces se expusirán las partes relevantes del formulario. En la selección del campo final, los usuarios se presentan a campos adicionales que son más relevantes para su solicitud.

Muchas formas de contacto de formularios de contacto vienen con una extensión para esto.Por ejemplo, aquí hay uno para el formulario.
Cree formularios con lógica condicional usando Forminator. Las migajas de pan, una cáscara de pan o una barra de progreso para un formulario de contacto no significa necesariamente simplificar el proceso de completar un formulario. Sin embargo, ayuda a alentar a los usuarios a terminarlo, porque los pasos restantes están claramente definidos. Una vez más, aquí hay un ejemplo de una barra de progreso que usa el elemento de paginación de Forminator: agregue una barra de progreso a la formulación para ayudar a los usuarios a navegar más fácilmente a través del proceso de completar los formularios. Regla #4: Escriba todo aunque me doy cuenta de que esta regla estará en contra de los principios básicos detrás del minimalismo, es uno que debe prestar especial atención, para evitar la frustración innecesaria de los visitantes. Permíteme explicarle: tiene un formulario de contacto que parece bastante simple. Sus usuarios lo completan de acuerdo con lo que sugieren las etiquetas y presionan el botón Enviar. Luego recibo ese feo mensaje rojo: “¡No lo hiciste bien! ¡Regrese, repare el formulario y vuelva a enviar! Es posible que haya cumplido con esto como usuario y sepa lo frustrante que puede ser, especialmente si parte de la información que ha desaparecido cuando se lanza el error. Entonces, en lugar de dejar que los usuarios adivinen lo que debe remediarse y cómo, no dejes ese punto. Escriba todo en el camino: preste atención al campo (especialmente en los dispositivos móviles), para que los usuarios sepan exactamente dónde están en el proceso de completar un formulario.

Escriba cualquier requisito de formato si no usa máscaras de entrada para formatear automáticamente los campos.
Indique explícitamente cuándo un campo es “opcional” (use la palabra, no el asterisco rojo). Ofrezca a los usuarios la oportunidad de mostrar u ocultar la contraseña a medida que la ingresan.

Muestre un mensaje de error tan pronto como el usuario interactuó con un campo. No esperes hasta el final para hacerlo.

HubSpot muestra la forma correcta de administrar los mensajes de error en un formulario de contacto.
En el estudio de seguimiento del estudio mencionado anteriormente, vieron a los usuarios que apoyaban la prueba y descubrieron que la falta de formato a menudo se especificaba como una queja. Google sugiere proporcionar instrucciones claras en el formulario, así como mensajes de error muy visibles. Además, estas etiquetas no solo deben estar en una fuente roja estándar. Deben ser delineados, coloreados y engrosados. Regla #5: Manténgase alejado de las sugerencias La indicación del texto de un formulario de contacto se ve así:

Aunque Target ha remediado algunos de los problemas asociados con el uso del texto en forma de formulario, puede no ser suficiente para los usuarios con problemas de accesibilidad.
¿Ves cómo se ponen las etiquetas en el campo? En algunos formularios de contacto, esas etiquetas/consejos simplemente desaparecen cuando un usuario hace clic en un campo. Target trata esto de manera un poco diferente y, en cambio, mueva la etiqueta en la parte superior del cuadro de campo (consulte “Dirección de correo electrónico”). Independientemente de cómo se administre esto, los expertos útiles, como Nielsen Norman Group, le dirán que esta es una mala práctica de diseño porque:
Esto es problemático para los usuarios que hacen más tareas, se distraen con la atención o acceden al siguiente campo demasiado rápido.Cuando la indicación desaparece, los usuarios deben salir del campo para redescubrir lo que se necesita. La desaparición también desaparece a los usuarios a regresar a través de un formulario para verificar su trabajo o corregir un error sin eliminar por completo la respuesta para ver qué está debajo.
El texto gris más abierto utilizado para indicaciones sustituyentes no es ideal para una fácil lectura.
Los campos de texto de indicación pueden confundirse con los campos que ya han completado los datos, dejando a los usuarios omitirlos, enviar el formulario y recibir un mensaje de error.
Algunas herramientas de lectura de pantalla no pueden leer el texto indicativo del sustituto.

Según NNG, los usuarios consideran que los campos vacíos sean más atractivos que los que contienen una pista. Aunque puede hacer que los formularios se vean más largo si coloca esas etiquetas o descriptores por encima del campo, mejorará el grado de uso. Regla #6: Mire sus botones de desarrollo WPMU ya tienen una excelente guía para mejores botones, para que no lo repitiré. En cambio, quiero centrarme en algunas cosas que pueda hacer para mejorar sus botones de formulario de contacto. Para empezar, siempre alinee el CTA principal con los campos de la forma, incluso si no parece lógico. Por ejemplo, si tiene un botón “Siguiente” y “Atrás”, el “siguiente” debería aparecer en el extremo izquierdo, porque es la acción que la mayoría de los usuarios harán. Además, trate de no usar los botones “restablecer”, “limpieza” o “cancelación”. Muchos usuarios llegan a la parte inferior de un formulario y hacen clic automáticamente en el primer botón que veo, creyendo que es el botón Enviar. Si pierden todas sus respuestas al malinterpretar el botón incorrecto, pueden encontrar que no quieren enviar nuevamente. En esta prueba A/B de Unbounce, descubrieron que la copia basada en el valor (aún más larga) ha sido más exitosa en la conversión de los usuarios. CTA puede ser más largo, pero los usuarios han respondido de manera más positiva al mensaje basado en el valor.
La copia actualizada recibió más del 31% más de conversiones que el mensaje original. Finalmente, use señales de confianza alrededor de los botones de formulario de contacto cuando tenga sentido. La declaración de coschedule de que no se requiere una tarjeta de crédito es un buen ejemplo a este respecto:

En general, una buena forma que hace un buen trabajo al usar la “marca de confianza” de texto que alienta a los usuarios a hacer clic sin dudarlo. Pero tenga cuidado.Si usa un signo de confianza cuando no es necesario, puede engañar a los usuarios para creer que deben enseñar información confidencial cuando este no es el caso, como lo demuestra esta prueba A/B de comportarse:
Asumiría que la marca de fideicomiso ayudará a aumentar las conversiones, pero no lo es en este caso.
La versión B recibió casi un 13% más de referencias que la versión A, porque el sello de seguridad hizo que los usuarios creyeran que eventualmente tendrán que enviar el pago u otra información confidencial a través del sitio web. El tiempo para aplicar en (formularios) los formularios de contacto de ácidos no son algo único para todos. Cada sitio web (y el negocio detrás del sitio web) tiene un objetivo diferente y, por lo tanto, los formularios de contacto dentro de él deben funcionar especialmente para ayudar a alcanzar este objetivo. Si desea ejecutar las reglas anteriores correctamente mientras trabaja en estos objetivos, tiene dos opciones. Puede encontrar un complemento de WordPress que lo ayude a crear un formulario de contacto de WordPress personalizado o puede crear un complemento como WPMU Dev Forminator le brinda lo mejor de ambos mundos (¡y es gratis!). Instale el complemento y elija una plantilla con la que comience, luego cree el formulario para adaptarse a sus necesidades específicas, con una gama de opciones y configuraciones de personalización sólidas. Lo que sea que decida, recuerde que los usuarios no tienen necesariamente temer a los formularios de contacto largos, sino más que lo bien que ha creado una experiencia en el formulario para ellos. Prefiere codificar manualmente los formularios de contacto en sus sitios web. O existe un WordPress de confianza complemento que usa cada vez? ¿Por qué?