Cómo añadir formularios con Contact Form 7

Abro con este artículo el primero de una serie donde te estaré explicando la sencillez y robustez del plugin «Contact Form 7» para que puedas crear todo tipo de formularios y aprendas cómo manipular los datos que se envían a través de él.

Vamos a comenzar desde lo más sencillo que es cómo añadir un simple formulario a nuestra página Web.

Cómo añadir un nuevo formulario

En primer lugar tendrás que instalar y activar el plugin «Contact Form 7» en tu WordPress. Una vez instalado, sigue los siguientes pasos para agregar un nuevo formulario a tu página Web:

1. Ve a Contacto » Añadir nuevo. Un vez que se cargue la página estarás en la pestaña «formulario» donde podrás configurar los siguientes valores:

1. Título: Aquí tendrás que especificar un título para el formulario.
2. Campos disponibles: El plugin Contact Form 7 pone a tu disposición un conjunto de campos para que te sea muy simple armar tus formularios. Te detallo algunos de ello para que los conozcas:
   • Texto: Es el más simple de todos. Agrega un campo de texto donde el usuario puede escribir libremente.
   • Correo Electrónico: Este campo validará que el contenido tenga el formato correcto para un correo electrónico.
   • Fecha: Este campo despliega un calendario para que el usuario seleccione una fecha.
   • Área de texto: Es una caja de mayor tamaño para que el usuario pueda escribir texto libremente.
   • Menú desplegable: Este campo permite agregar un conjunto de valores para que el usuario elija uno o más de ellos desde un selector desplegable.
   • Aceptación: Agrega una simple casilla de verificación que debe estar marcada para poder enviar el formulario.
   • Cuestionario: Podemos agregar una pregunta simple al formulario para evitar el envío de SPAM. Ejemplo 2+2? = 4
   • Archivo: Este campo permite al usuario cargar un fichero para agregar al formulario.
   • Enviar: Es el botón que enviará el formulario con todos los campos anteriormente configurados.
3. Cuerpo del formulario: Aquí podrás modificar el HTML del formulario en caso que necesites agregar algún elemento extra o una clase de CSS. Como podrás ver, los campos se agregan con formato de shortcode.

Define todos los campos que necesites y al finalizar no olvides hacer clic en el botón «Guardar» para registrar todos los cambios.

¿Cómo se envía el formulario?

Por defecto el plugin envía el formulario al correo electrónico del Administrador del WordPress, pero por supuesto que tanto esta dirección como el contenido del email puede ser configurado desde la pestaña «Correo electrónico».

Haz clic en esta pestaña o bien utiliza las fechas del teclado (⬅️➡️) para desplazarte entre ellas.

A continuación te detallo para qué sirve cada campo:

1. Etiquetas: Cualquier campo que agregues al formulario en la pestaña «Formulario» tendrá un nombre único (ID) que luego podrás utilizar en el correo o bien en los mensajes (que veremos más adelante) que devuelvas a la Web.
   Como puedes ver, en este formulario tenemos a disposición los campos [fc-nombre], [fc-email], [fc-mensaje] y [fc-archivo].
2. Para: En este campo podrás especificar a qué dirección de correo quieres enviar el formulario. Puedes agregar más de un destinatario separándolos por coma, ejemplo: tu-email@gmail.com, otro-email@gmail.com, email-nro-3@gmail.com.
3. De: Esta campo será el remitente del correo. Para evitar que vaya a la carpeta de SPAM usa un correo con el mismo dominio que la Web desde donde se emite.
4. Asunto: Define un título para el correo. Ej. «Nuevo Contacto desde la Web mi-web.com»
5. Cabeceras adicionales: Aquí podrás agregar todas las cabeceras adicionales de correo que necesites. Por ejemplo:
   • Para agregar un email en copia (CC) usa la cabecera Cc: otro-email@gmail.com.
   • Para agregar un email en copia oculta (CCO) usa la cabecera Bcc: otro-email@gmail.com.
6. Cuerpo del mensaje: Define aquí como quieres recibir el correo electrónico con todos los campos del formulario. Como ves en el ejemplo, puedes mezclar texto con las Etiquetas vistas en el punto 1.
   En el caso que agregues etiquetas HTML, no olvides marchar la casilla de «Usar contenido del tipo HTML».
7. Archivos adjuntos: En el caso que el usuario pueda subir archivos a tu formulario podrás agregarlos como ficheros adjuntos al correo utilizando este campo. Basta simplemente con que agrueges la etiqueta del campo como ves en el ejemplo.
8. Correo electrónico (2): Ten en cuenta que todas las configuraciones anteriores son para el correo que te llegarán a ti, pero puedes activar esta casilla para enviar un segundo correo a quién desees.
   Puede usar este segundo correo para configurar una respuesta automática al usuario que te envió el formulario o bien enviar una copia con otras configuraciones a otra persona.
   Los campos que se despliegan son iguales a los que ya he detallado.

Mensajes de éxito o validación

En la pestaña «Mensajes» podremos configurar todos los tipos de mensajes que el formulario pueda devolver.

No voy a detenerme a explicar cada campo porque es muy simple de entender. Cada fila corresponde a un tipo de mensaje de éxito o error que pueda devolver el formulario.

Lo que sí voy explicarte son los valores que aquí puedes o no utilizar:

• Etiquetas HTML: No está permitido el uso de etiquetas HTML, de hecho si lo haces te aparecerá un mensaje de advertencia.
• Etiquetas de campos: Puedes utilizar las etiquetas de campos del formulario, de manera tal que podrás personalizar los mensajes con los datos introducidos, por ejempleo: Gracias [fc-nombre] por enviarnos tu mensaje.

Añade el formulario a tus páginas o entradas

Muy bien, ya tenemos el formulario configurado, ahora es momento de mostrarlo en la página Web.

Lo único que tienes que hacer es copiar el «shortcode» del formulario y pegarlo en cualquier entrada o página de tu Web utilizando el bloque «Shortcode» de Gutenberg.

Una vez que guardes los cambios, visita la entrada o página para verificar el correcto funcionamiento del formulario.