Hace poco vimos una forma sencilla de crear formularios de contacto en WordPress, utilizando el famoso plugin Contact Form 7. Este plugin gratuito es fácil de utilizar, y además te aporta una gran flexibilidad a la hora de diseñar tus formularios de contacto.

Pero lo que puedes hacer con este plugin no termina ahí. De hecho, esconde una gran cantidad de secretos y trucos con los que puedes mejorar notablemente el funcionamiento de tus formularios– hoy te presento una lista de sólo algunos de ellos, que estoy seguro te serán de una gran ayuda.

1. Redirige a tus visitantes a una página de agradecimiento

Normalmente, Contact Form 7 utiliza AJAX para enviar las solicitudes de contacto cada vez que alguien rellean el formulario. Esto quiere decir que la página no se refresca ni cambia, y tu formulario se limitará a mostrar un mensaje de confirmación.

Aunque esto hace que instalar los formularios sea más simple, suele ser recomendable redirigir a tus visitantes a una página de agradecimiento, o confirmación. Esto se hace por varias razones, pero la más importante de todas es que gracias a ello podrás rastrear objetivos en Google Analytics, y medir con precisión quién completa tus formularios.

Hacer esto en Contact Form 7 es en realidad muy, muy simple. Basta con abrir el formulario de tu elección, y en el campo de Configuración Adicional ubicado en la zona inferior, añadir el siguiente código:

on_sent_ok: “location = ‘URL’;”

Sólo sustituye la URL por la dirección completa de tu página de agradecimiento (incluyendo http://), y eso hará que cada vez que un visitante complete tu formulario sean trasladados a esa página.

2. Inserta tus formularios en las barras laterales

Ya hablamos en su momento sobre lo versátil que es Contact Form 7 para insertar formularios en todas partes, gracias al uso de los shortcodes de WordPress. Con este plugin puedes incluso añadir un formulario dentro de una barra lateral, con sólo un par de pasos adicionales.

Lo primero que necesitas hacer es descargar e instalar el plugin Shortcodes in Sidebar Widgets. Este es un plugin extremadamente simple que te ahorrará la tarea de añadir la siguiente línea a tu archivo functions.php:

add_filter(‘widget_text’, ‘do_shortcode’);

Ya elijas utilizar el plugin o insertar esta línea de código en functions.php (con sólo uno basta), podrás hacer uso de cualquier shortcode en un widget de texto. Ahora sólo te queda copiar y pegar el shortcode de Contact Form 7 como si lo fueras a insertar en el contenido de una página, y tendrás un formulario en la barra lateral de tu sitio.

3. Guarda las solicitudes de contacto dentro de WordPress

Uno de las mayores razones por las que Contact form 7 se mantiene ligero y fácil de utilizar es que no guarda las solicitudes de sus formularios en tu sitio WordPress. Cada vez que alguien rellene un formulario, éste se enviará por correo a la dirección que tu desees, pero después de eso no quedará rastro de dicha solicitud.

Si tuilizas Contact form 7 para algo más que un simple formulario de contacto, seguramente desearás grabar todas y cada una de las solicitudes que se rellenan. Para eso, puedes utilizar el plugin Contact Form DB. Esta sencilla pero potente utilidad creará una nueva sección en tu panel de administración, en donde se guardará toda la información de la gente que ha rellenado tus formularios.

Este plugin te permitirá entonces exportar toda la información para guardarla y procesarla.

4. Utiliza shortcodes en el editor de formularios

En el editor de Contact Form 7 puedes utilizar HTML, lo que te aporta una gran flexibilidada la hora de crear formularios con estructura. Pero, ¿y si utilizases shortcodes para añadir elementos interactivos a tu formulario WordPress?

Aunque el HTML te permite estilizar tus formularios de casi cualquier forma, aún así deberás añadir los estilos CSS necesarios para que luzcan correctamente. Esto puede resultar difícil de mantener debido a la gran cantidad de código que deberás escribir dentro de la caja de texto.

La solución está en los shortcodes. Con ellos puedes simplificar de sobremanera el estilizado de tus formularios, ya que te ahorrarán el trabajo de utilizar HTML y CSS. Además, con ellos podrás insertar elementos dinámicos, como tooltips o contenidos desplegables.

Simplemente añade el siguiente código al archivo functions.php de tu tema WordPress:

add_filter('wpcf7_form_elements', 'mifuncion_wpcf7_form_elements');
function mifuncion_wpcf7_form_elements($form){
	$form = do_shortcode($form);
	return $form;
}

Esto hará que puedas utilizar no sólo las etiquetas de Contact Form 7, sino cualquier shortcode que tengas instalado en tu sitio WordPress. Y si no tienes un pack de shortcodes ya, puedes probar a utilizar uno que he creado yo.

5. Integra tus formularios con Akismet

Si tienes un sitio WordPress, no cabe duda de que habrás visto alguna vez el plugin Akismet. Este servicio, creado por la misma empresa que desarrolla WordPress, te ayuda a filtrar todo el spam que de otra forma inundaría los comentarios de tu blog.

Los formularios de contacto no están exentos de esto, pero Contact Form 7 tiene la ventaja de aprovechar el servicio de Akismet para defenderse. Una vez lo tengas instalado y activado, puedes añadir los siguientes atributos a los campos de tus formularios, y así hacer que sean enviados a los servidores de Akismet:

  • akismet:author – valida un nombre en tu formulario.
  • akismet:author_email – te permite validar un email.
  • akismet:author_url – te permite validar una URL.

Debes tener en cuenta que Akismet es un servicio de validación de comentarios, no de formularios de contacto. Por eso, estos tres atributos los deberás emparejar con los campos más parecidos que tengas– todos son opcionales, pero cuantos más datos le proporciones a Akismet, más certero será.

6. Cambia la posición de los mensajes de validación

Uno de los puntos fuertes de Contact Form 7 es que te permite validar la entrada de información, pudiendo hacer que algunos campos sean requeridos o que tengan un formato en particular. Si al enviar un formulario la validación falla, se mostrará un mensaje de error advirtiendo al usuario de ello.

Este mensaje se muestra al final del formulario, lo cual no siempre es la forma más elegante de hacerlo. Si has creado un formulario con una gran cantidad de campos y lo has estilizado con columnas y otros detalles, quizás desees mover el mensaje de sitio.

Para eso, basta con utilizar la etiqueta response y colocarla en cualquier parte del formulario que desees:

[response]

Esto hará que los mensajes de validación se muestren en donde elijas, teniendo un mayor control sobre el diseño.

7. Añade una casilla de términos y condiciones

Para los que operamos desde España, este es un detalle muy importante que suele pasarse por alto a menudo. De acuerdo con la LOPD (Ley Orgánica de Protección de Datos), cada vez que un usuario te mande información personal a través de un formulario éste debe darte su consentimiento explícito.

Esto se suele hacer mediante mensajes como el siguiente, ubicados justo encima o al lado del botón de envío:

Al enviar este formulario estoy de acouerdo con los términos y condiciones de este sitio.

Pero no siempre es suficiente. Para asegurarte de que cumples con la ley, lo mejor es siempre incluir una casilla de verificación que deba ser marcada para poder enviar los datos. Esta casilla debe además contener un enlace hacia tu página de términos y condiciones, para informar al usuario del tratamiento de sus datos personales.

Un detalle de Contact form 7 es que trae un campo especializado para esto, utilizado de la siguiente forma. Esto creará la casilla de verificación, que impedirá el envío del formulario si no ha sido marcada:

[acceptance aceptar-terminos]

No obstante, para crear la línea completa de aceptación también tendrás que incluir un enlace. Para añadirlo todo, simplemente copia el siguiente código en tu formulario de contacto, y luego sustituye URL por la dirección completa de tu página de términos y condiciones (el aviso legal):

[acceptance aceptar-terminos] Acepto los <a href=”URL” target=”_blank”>términos y condiciones</a> de uso.

Crea mejores formularios WordPress ahora

Con todos estos trucos podrás crear formularios mucho más flexibles, extendiendo la funcionalidad de Contact Form 7. Aún así, esto es sólo la punta del iceberg.

¿Conocías ya alguno de estos trucos? ¿Tienes alguno bajo la manga? ¡Compártelo!