Dale más estilo a tu formulario de comentarios en WordPress

Una de las cosas más emocionantes que pueden pasar cuando tienes un blog y escribes en él regularmente es recibir comentarios de los lectores. Pero para que esto suceda, el contenido que escribas debe ser interesante y el formulario para enviar comentarios debe ser lo suficientemente visible y atractivo para que el visitante lo complete y lo envíe.

En este post que pertenece a la serie de la prueba del mes vamos a intentar resaltar el formulario de comentarios de nuestro blog dándole un pequeño rediseño para ver si funciona mejor que la versión actual.

Como siempre, probaremos los cambios usando la técnica de prueba A/B. Es la mejor forma de ver con datos reales de los visitantes de tu web si los cambios que realizas funcionan o no.

Mejorando el diseño del formulario de comentarios de WordPress

Nuestro formulario de comentarios es bastante simple. Por defecto, WordPress agrega un campo para ingresar el sitio web del visitante que comenta, pero creemos que este campo no agrega ningún valor. Por el contrario, lo único que atrae son los comentarios de spam de los bots que quieren hacerse con un enlace a toda costa. Por esta razón lo hemos eliminado de nuestra forma original.

En la siguiente comparativa puedes ver la versión original del formulario de comentarios de nuestro blog y la variante con los cambios que hemos realizado. Recuerda deslizar el asa que aparece en el centro de un lado a otro para ver las dos versiones:

Básicamente, hemos realizado tres cambios en el formulario de comentarios:

1. Agregamos un par de emojis al título para resaltar el área de comentarios y animar a los visitantes a escribir. Ahora parece que los estamos saludando y animando a que escriban con el emoji del saludo y la escritura a mano. A la gente le gustan los emojis. Veremos si esto ayuda a tener más comentarios.
2. El texto legal en el que explicamos dónde se almacenan los comentarios al rellenar la información utiliza una fuente más pequeña . Tiene que estar ahí por cuestiones legales, pero no queremos darle tanta relevancia.
3. Pasamos el botón de enviar del formulario a un color naranja que se destaque. Como vimos anteriormente, los colores son importantes.

Ahora que ya tenemos listo el nuevo diseño, lo que nos queda por hacer es probarlo.

Crear una prueba A/B de estilos CSS

Para probar este cambio de diseño en el formulario de comentarios de nuestro blog en WordPress, lo más sencillo es utilizar un test A/B de reglas CSS. La versión A de nuestro sitio web es la que tiene el formulario original, mientras que la versión B contendrá las reglas CSS adicionales para lograr los tres cambios en el diseño del formulario que hemos anticipado anteriormente.

Con Nelio A/B Testing creamos un nuevo test A/B de CSS. La siguiente imagen muestra la pantalla de edición de dicha prueba:

Nombramos la prueba (“Formulario de comentarios destacados”, en nuestro caso) y la variante (“Formulario de comentarios rediseñado”). También podemos añadir una descripción a la prueba en el campo correspondiente de la barra lateral derecha. En la captura de pantalla anterior puedes ver la descripción que agregamos, la cual sirve como referencia para cualquier usuario que vaya a ver la prueba en el futuro.

También hemos reducido el alcance de la prueba a las URL que contienen https://neliosoftware.com/blog/ , de modo que la prueba solo se aplica a las publicaciones de nuestro blog.

Como acción de conversión hemos establecido el clic en el botón de enviar del formulario. Cada vez que un visitante haga clic en ese botón, contaremos una conversión en la prueba para la variante que está viendo el visitante.

Antes de terminar, tenemos que ir a editar la variante B de la prueba. Pasamos el ratón sobre esta variante y aparecerá la opción de editarla. Una vez que hacemos clic en él, se abre un editor de CSS con una vista previa, como puede ver en la siguiente captura de pantalla:

Como puedes ver, en la barra lateral izquierda tenemos el editor CSS en el que puedes escribir las reglas específicas que hacen los cambios en el diseño que vimos antes. Además, en el lado derecho puede navegar por su sitio web para obtener una vista previa del resultado de estos cambios. Solo necesita seis reglas CSS simples para rediseñar nuestro formulario de comentarios.

Cuando terminemos, guardamos y volvemos al editor de pruebas A/B para iniciarlo. Ahora solo esperamos que los visitantes visiten nuestras publicaciones. Cada visitante verá la versión original del formulario o la versión con el rediseño. Esto lo hace Nelio A/B Testing por sí mismo, sin que tengas que hacer nada.

Análisis de los resultados de las pruebas A/B

Hemos tenido la prueba funcionando durante unas seis semanas, analizando casi 20.000 visitantes de nuestro blog (una buena muestra de la población). Puede ver los resultados completos de la prueba A/B en la siguiente captura de pantalla:

El número total de conversiones que ha recibido la prueba no es espectacular. En ese tiempo nuestro blog ha recibido 27 comentarios (por eso hay 27 conversiones en los resultados de la prueba).

Pero lo que hay que destacar es que la variante con el rediseño del formulario de comentarios ha conseguido duplicar el número de conversiones de la versión original. Por tanto, es la opción ganadora del test A/B, con un alto valor de confianza estadística.

Como ves, pequeños cambios en los diseños, que se pueden lograr con pocas reglas CSS, pueden tener un impacto directo en los resultados de tu sitio web. Hemos aplicado esta variante en nuestro sitio web agregando las reglas CSS adicionales en nuestro tema.

Un diseño más elaborado fomenta la interacción.

El diseño es clave para modificar el comportamiento de los visitantes de nuestro sitio web. Conseguir un diseño que funcione mejor que el actual no tiene por qué requerir muchos recursos. Aquí hemos visto que con unas simples reglas CSS podemos hacer cambios que nos den resultados rápidamente.

Aplicar cambios en el diseño de nuestra web es algo que debemos hacer con cuidado. Por eso hemos utilizado un test A/B. Gracias a esta técnica, podemos comprobar con datos reales de nuestros visitantes si los cambios funcionan o no. De lo contrario, no sabremos si hemos elegido un camino correcto de mejora o estamos retrocediendo.

Imagen destacada de Jason Leung en Unsplash.