Advertisement
  1. Code
  2. WordPress

Crear formularios en WordPress que sean completados

Scroll to top
Read Time: 12 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

La mayoría de nosotros tenemos al menos un formulario en algún lugar de nuestro sitio WordPress.

Puede tratarse de un simple formulario de contacto. O un formulario de suscripción a una newsletter. Un formulario de compra tal vez. O quizá algo más a medida.

Sea cual sea la información para la que tu formulario esté diseñado recopilar, apostaría que deseas que lo rellene y haga clic en enviar el mayor número posible de personas. No quieres que la gente se rinda a mitad de camino o que para empezar, ni siquiera encuentre el formulario.

En este artículo, voy a darte algunos consejos sobre cómo agregar formularios a tu sitio web que realmente sean cumplimentados. Voy a cubrir lo siguiente:

  • El código: cómo crear formularios accesibles y responsivos, con código válido que garantice su correcto funcionamiento.
  • La experiencia del usuario: cómo mejorar el diseño de tus formularios de modo que su uso sea lo más sencillo posible y que en consecuencia las personas los rellenen.

A medida que avancemos, proporcionaré algunos ejemplos de buenos formularios que funcionan bien y son fáciles de usar, y te señalaré algunos recursos que podrías usar para ayudarte.

Así que vamos a empezar con el código.

Formularios bien codificados

Es poco probable que crees el código de los formularios en tu sitio directamente. Posiblemente usarás un plugin.

Por lo tanto, es importante instalar un plugin que genere código limpio, accesible y responsivo que no afecte negativamente a la forma en la que este se muestra o funciona.

Cuando hayas instalado tu plugin y creado tu primer formulario con él, te recomiendo que lo visites en tu sitio (tanto en ordenadores de escritorio como en dispositivos móviles) y examines el código que lo ejecuta.

Un formulario bien codificado:

  • Utiliza los elementos y las etiquetas correctos para cada campo de formulario.
  • Tiene el diseño de salida del formulario en el mismo orden que el código.
  • Es responsivo de manera que funciona igual de bien en todos los tamaños de pantalla.
  • Es posible utilizarlo sin un ratón: tabular a través de los campos con el teclado llevará al usuario de un campo a otro en el orden adecuado.
  • Es fácil de interactuar con él en todos los tamaños de pantalla, con un ratón, con el teclado o con el pulgar/dedo.

Comprueba tu formulario en diferentes dispositivos y tamaños de pantalla y asegúrate de que el código utiliza los elementos HTML correctos y que no añade nada que no deba. Ejecútalo a través de una herramienta de validación para comprobar que no hay ningún problema.

The W3C validator toolThe W3C validator toolThe W3C validator tool

Si encuentras problemas menores, podrás solucionar gran parte de ellos durante la configuración de tu formulario. Si encuentras problemas más importantes, posiblemente tendrás que encontrar otro plugin para formularios.

Y si tu plugin constructor de formularios te ha proporcionado un formulario que no es responsivo, definitivamente necesitas un nuevo plugin. La mayoría de los visitantes de sitios web están ahora en dispositivos móviles y si tus formularios no son responsivos, no los cumplimentarán.

El formulario de registro de Envato Elements está diseñado para que funcione igual de bien en un ordenador de escritorio o en un dispositivo móvil, y ni el diseño ni el contenido cambian entre uno y otro.

envato elements signup form - mobile

Experiencia de usuario (UX) en diseño de formularios

El diseño de un formulario, y lo fácil que sea interactuar con él, tendrá un gran impacto en la frecuencia con la que se rellena. Para maximizar las probabilidades de que un mayor número posible de personas lo haga y pulse finalmente el botón de envío, debes adoptar las mejores prácticas de experiencia de usuario. Aquí tienes algunas cosas que puedes hacer para mejorar tus formularios.

Limitar el número de campos a cumplimentar

Los formularios tardan en cumplimentarse y lógicamente, desearás reducir este tiempo. También querrás evitar que la gente sienta que estás entrometiéndote en su privacidad. Recientemente intenté acceder a WiFi pública que me solicitaba no sólo proporcionar mi dirección de correo electrónico, sino también mi número de teléfono, mi dirección y mi fecha de nacimiento. No hace falta decirlo, ¡me conecté a otra red WiFi!

El sitio web de Hubspot ofrece una guía gratuita sobre las conversiones en sitios web a cambio de tu dirección de correo electrónico. Sin embargo, al hacer clic en el enlace de descarga, te presentan un formulario que te pide mucha más información de la que necesitan si quieres que te envíen la guía .

Hubspot form with 8 fieldsHubspot form with 8 fieldsHubspot form with 8 fields

Me habría descargado la guía y sentido muy feliz de recibir su newsletter, pero no quería proporcionar toda esta información, así que finalmente no completé el formulario. Es una conversión perdida.

Por el contrario, para registrarte en el sitio de Kickstarter solo te piden tu nombre, tu dirección de correo electrónico y una contraseña obligatoria. Es todo lo que necesitan, y por tanto, es todo lo que piden.

Kickstarer signup form with 3 fieldsKickstarer signup form with 3 fieldsKickstarer signup form with 3 fields

Identifica qué información necesitas para poder responder a alguien que complete tu formulario. Es posible que no necesites nada más que su nombre y su dirección de correo electrónico o su número de teléfono. Para las suscripciones a newsletters, solo necesitas su dirección de correo electrónico. Apégate al mínimo: siempre podrás pedir más información más adelante si fuese necesario.

Dividir formularios largos

Si el formulario tiene que ser largo porque realmente necesitas más información, considera dividirlo en varias pestañas o páginas. De este modo, el usuario no se sentirá abrumado al ver una gran cantidad de campos al acceder por primera vez a él.

Si te registras como aspirante al Duke of Edinburgh Award en el Reino Unido, un premio para jóvenes que implica desafíos físicos, mentales y sociales, verdaderamente tendrás que proporcionar mucha información. El formulario se ha dividido en cinco partes para que resulte menos desalentador.

The Duke of Edinburgh Award registration form in 5 partsThe Duke of Edinburgh Award registration form in 5 partsThe Duke of Edinburgh Award registration form in 5 parts

Diseño del formulario

A los lectores les resulta más fácil escanear visualmente un formulario si el texto de cada campo se sitúa encima. De esta manera, la vista es dirigida hacia la parte inferior del formulario sin tener que desplazarse horizontalmente de lado a lado. Y el formulario funcionará igual de bien tanto en ordenador de escritorio como en móvil.

El formulario de registro de Envato Elements hace esto mismo para ayudar a guiar el ojo hacia abajo en el formulario. Y además incluye únicamente los campos necesarios.

envato elements signup form - 3 fieldsenvato elements signup form - 3 fieldsenvato elements signup form - 3 fields

Los campos de formulario también deben ser autoexplicativos y útiles. Evita la jerga o las descripciones no estándar en los campos. Nombre y Correo electrónico es suficiente.

Llamada a la acción

Una clara llamada a la acción dará a los usuarios un incentivo para completar el formulario. Si está claro que existe un beneficio para ellos tras completarlo, o la acción que se desencadenará está clara, entonces será mucho más probable que lleguen al botón de envío.

Unbounce ejecutó pruebas A/B en el formulario de registro para Betting Expert, y descubrió que una mejor llamada a la acción aumentaba las conversiones en más de un 30%.

Two calls to action Join Betting Expert vs Get FREE Betting TipsTwo calls to action Join Betting Expert vs Get FREE Betting TipsTwo calls to action Join Betting Expert vs Get FREE Betting Tips

"Get Free Betting Tips" superó a "Join Betting Expert" porque dio a las personas un claro incentivo para suscribirse, con algo que les beneficiaba.

Al diseñar tu llamada a la acción, imagina el estado anímico del visitante y lo que está buscando al completar tu formulario. Olvídate de los beneficios para tu negocio y expón de forma bien articulada qué obtendrán ellos a cambio de él.

Y si tu plugin de formularios lo permite (y uno bueno lo hará), edita el botón de envío para que sea en cambio una llamada a la acción.

No pidas información para pagos si no la necesitas

Arriba mencioné la red WiFi que solicitaba información que me parecía irrelevante. Otra información que la gente es reacia a proporcionar, a menos que sea necesario, es su número de tarjeta de crédito.

Si ofreces una prueba gratuita, no pidas un número de tarjeta de crédito durante el registro. En su lugar, ofrece al usuario una razón para permanecer fielmente contigo transcurrido ese primer mes gratuito (o semana, o lo que ofrezcas), y obtén los detalles de pago una vez haya acabado ese periodo.

El sitio web de Moz ofrece una prueba gratuita con un formulario sencillo, con el compromiso de que puedo cancelar en cualquier momento y la promesa de un recordatorio antes de que mi prueba gratuita finalice. Hasta ahora, bien.

Mos signup form with 3 fieldsMos signup form with 3 fieldsMos signup form with 3 fields

Pero cuando me desplazo hacia abajo, me piden los datos de mi tarjeta de crédito. Esto me lleva a asumir que automáticamente me cobrarán transcurrido un mes, y me siento desalentado a registrarme.

The Moz signup form part 2 - credit card detailsThe Moz signup form part 2 - credit card detailsThe Moz signup form part 2 - credit card details

No niego los conocimientos de Moz en lo que respecta al SEO y las conversiones, por lo es posible que esta sea una estrategia deliberada. Es posible que hayan descubierto que el número de personas que abandonan tras el mes gratuito es significativamente alto y que por lo tanto vale la pena perder desde el primer momento algunas posibles inscripciones. Si estás en un escenario similar, está bien, pero asegúrate de hacer primero un análisis.

Uso de la lógica condicional

El uso de la lógica condicional en los formularios puede ayudar a evitar que sean más largos de lo necesario.

Un buen plugin de formularios te permitirá mostrar campos basados en la respuesta del usuario a un campo anterior, es decir, esos campos no se muestran a menos que sea necesario.

Una vez más, ten cuidado al decidir cuál de estos campos se va a mostrar, y muéstralos únicamente cuando sean realmente necesarios.

Confirmaciones y mensajes de formulario

Una vez que el usuario haya hecho clic en el botón Enviar, es una buena práctica proporcionar comentarios que le hagan saber que lo ha completado correctamente.

Podría hacerse mediante la redirección a otra página con más información, o mediante un mensaje en la misma página en la que se cumplimentó el formulario, sea como sea, hay que confirmar claramente a los usuarios que lo han rellenado con éxito y mostrarles tu agradecimiento por ello. Diles qué sucederá a continuación, incluyendo cualquier acción que deban tomar posteriormente, como por ejemplo revisar su correo electrónico.

Y cuando recibas envíos de formularios, haz un seguimiento de los mismos lo antes posible. Actualmente estoy haciendo la mudanza de mi casa y ayer cumplimenté varios formularios en los sitios web de tres firmas de mudanzas solicitando información. Sólo uno me ha llamado después, ¡adivina con cuál voy a hacer mi mudanza!

Configura tu plugin para que te notifique cada vez que un formulario sea enviado, y haz un seguimiento de inmediato. Si puedes, configura una respuesta automática usando tu sistema de correo electrónico o un proveedor de lista de correo, para que reciban algo rápidamente.

Si el usuario no ha completado el formulario correctamente y hay algún error, asegúrate de que cualquier mensaje de error sea claro y le indique lo que necesita hacer. No uses texto vago o con tono juicioso.

Cuando escribo mi nombre en el campo para la dirección de correo electrónico del formulario de suscripción de Envato Elements, ese campo queda resaltado y aparece un mensaje indicando que la dirección de correo electrónico no es válida.

Envato Elements signup form error messageEnvato Elements signup form error messageEnvato Elements signup form error message

Esto me deja claro cuál es mi error para que lo pueda corregir.

Los formularios bien diseñados aumentarán las conversiones

Diseñar adecuadamente los formularios en tu sitio web aumentará considerablemente el número de personas que los rellenen y hagan clic en enviar. Si te aseguras de que los formularios estén bien codificados, sean accesibles y responsivos, y los diseñas de forma que proporcionen una buena experiencia de usuario, deberías comprobar que son mucho más eficaces.


Además, si quieres usar plugins personalizados pero no te sientes cómodo jugando con servidores y prefieres que alguien se ocupe de todo esto por ti, considera el hosting administrado de WordPress. Gracias a la asociación de Envato con SiteGround, puedes obtener hasta un 60% de descuento en el hosting administrado para WordPress.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.