Cuando hablamos de formularios en WordPress, el rey sin duda es Gravity Forms. Sin embargo no todo el mundo va a invertir en ese software si no tiene la necesidad específica. La alternativa gratuita, en cuanto a flexibilidad y potencia, es Ninja Forms, y por eso vamos a ver en este artículo cómo crear un formulario de contacto avanzado con Ninja Forms.

Ninja Forms

Ninja Forms es un plugin de formularios que permite un amplio rango de aplicaciones, desde un sencillo formulario de contacto hasta un completo formulario de ventas que permita selección de opciones, cálculo precio final en función de las alternativas elegidas, y pasarela de pago. Todo ello en un sólo formulario.

Pero hoy vamos a limitarnos un formulario de contacto, pero sin quedarnos en lo básico: vamos a implementar un formulario de contacto que por supuesto cumpla con la Ley de Protección de Datos y que, además, redirija al usuario a una página de agradecimiento una vez enviado el mensaje. ¡Vamos a empezar!

Formulario de contacto con Ninja Forms

Bien, lo primero que hay que decir es que, al instalarlo, Ninja Forms ya incluye un formulario básico de contacto, llamado Contact Me, que podemos utilizar como base para crear el nuestro. Habrá que hacer cambios, porque no es en realidad ningún formulario: está vacío.

Así que vamos a Formularios y, en los enlaces de acción de Contact Me, pulsamos a editar. Eso nos lleva a una pantalla aparentemente fuera de nuestro panel de control. No te asustes, sigues ahí aunque parezca que no, y pulsando sobre el aspa que hay arriba a la derecha puedes regresar al entorno conocido cuando quieras.

A partir de aquí podemos añadir los campos necesarios utilizando el enlace Just click here and select the fields you want, o bien cargar una plantilla predefinida (Contact Us) y empezar a trabajar a partir de ella.

Cumplir con la Ley de Protección de Datos

Como es un formulario sencillo, mejor nos lo hacemos nosotros mismos desde el principio. Es más fácil añadir tres o cuatro campos, que ponernos a adaptar lo que otros han hecho. Así que pinchamos en Just click here… y, de los campos que aparecen a la derecha, seleccionamos los que necesitemos añadir. Una idea, que no tiene por qué coincidir con lo que tú necesitas:

• User Information Fields:
  • Primer nombre
  • Dirección de correo electrónico
• Un Single Line Text, para escribir el asunto
• Un Paragraph Text, para el mensaje en sí
• Un Single Checkbox, para la aceptación de la política de privacidad

Porque, efectivamente, al solicitar al usuario que rellene su dirección de email (necesario para la respuesta) debemos informarle de la política de privacidad y él aceptarla, si queremos cumplir con la LOPD. Y queremos. ¡Vaya que si queremos! Te recuerdo que la infracción más leve en materia de protección de datos está multada con 601,01€, así que pondremos de nuestra parte para no cometer infracciones.

Bien, en este punto ya podemos empezar a configurar cada uno de los campos, pinchando de uno en uno y rellenando qué etiqueta aparecerá, cuáles de ellos son obligatorios (utilizando el interruptor al efecto):

Al llegar a la Single Checkbox, deberíamos poner algo así como:

Acepto la política de privacidad

de forma que marcar la casilla signifique la aceptación de la política de privacidad, indicada en el enlace. Para poder cumplir la LOPD hay que marcar el campo como obligatorio y por defecto «no marcado». A estas alturas nuestro formulario tiene más o menos esta pinta (el nombre lo puedes cambiar en Avanzadas > Opciones de visualización > Nombre del formulario):

Casi está terminado, sólo falta darle las funcionalidades: hacer que nos envíe un correo electrónico cuando alguien rellene un mensaje, y hacer que redirija al usuario a la página de agradecimiento.

Configurando acciones

Vamos a empezar haciendo que el formulario nos envíe un email cuando alguien nos deje un mensaje. Evidentemente para ello tendremos que ir a la opción Emails y Acciones y añadir una nueva pulsando el círculo azul con un «+» que hay abajo a la derecha.

Entre las acciones disponibles pulsamos Dirección de correo, y comenzamos a rellenar los datos:

• Nombre de acción: la que quieras.
• Para: aquí pondremos a qué dirección tiene que enviar el email. Puedes escribir la tuya o pinchar en el simbolito de la lista de la derecha y buscar la opción Sistema > Admin email, para que la envíe al email que esté configurado para administración en WordPress.
• Sujeto: pésima traducción de «asunto». Puedes poner algo así como «Mensaje de» y a continuación elegir de la lista Campos > Primer Nombre (quedando algo así como Mensaje de {field:firstname}), o bien poner el asunto que el usuario haya puesto en el formulario seleccionando Campos > Asunto.
• Mensaje de correo electrónico: aquí te puedes explayar, pero mejor ir a lo útil y eficiente. Puedes ir eligiendo campos con la lista que aparece y montarte algo así:

Nombre: {field:firstname}
Email: {field:email}
Asunto: {field:asunto}
Mensaje: {field:tu_mensaje}

Porque en realidad no necesitas más. Así ya tienes montado el email que recibirás, aunque aún puedes afinar más con la configuración. Pincha en Avanzadas y seguimos configurando:

• Nombre de quien procede el correo: {field:firstname}
• Dirección de quien procede el correo: {field:email}
• Responder a: {field:email}

Lo demás, como viene por defecto. Así el email te llegará listo para responderle directamente a quien te lo envió.

Enviar a una página de gracias con el formulario de contacto de Ninja Forms

Hecho lo básico que debe hacer un formulario de contacto, incluyendo lo necesario para cumplir con la Ley de Protección de Datos, vamos a ir un paso más allá y dar las gracias a todo el que nos mande un mensaje.

Para ello, lo primero, es crear una página de agradecimiento. Esto no hace falta que te lo explique, ya sabes: Páginas > Añadir nueva (en WordPress), y pones un mensaje de agradecimiento, con una imagen más o menos chula, y si añades los botones para seguirte en redes sociales mejor (así aprovechas y puedes ganar algún seguidor).

En lo que respecta a nuestro formulario, lo que haremos es crear una nueva acción, pero esta vez pulsamos en Redirigir y, en el campo URL, pegamos la dirección de nuestra página de gracias. ¿Creías que era más difícil? Ya ves que no.

Claro que siempre se puede ir un pasito más lejos. Por ejemplo, la magia de PHP y las variables por el método GET nos pueden permitir personalizar la página de agradecimiento, incluyendo en ella el nombre de quien nos ha enviado el mensaje. Algo así:

Claro que eso ya no es tan sencillo e implica programación. Si quieres que te implemente algo así en tu web, no tienes más que utilizar mi formulario de contacto para mandarme un mensaje. Así, de paso, pruebas el efecto que hace el recibir un mensaje de agradecimiento personalizado. 😉