Cómo agregar campos personalizados en el plugin Contact Form 7

El tutorial de hoy se podría considerar de tipo long tail, es decir, lo que te compartiré posiblemente no le veas utilidad ahora mismo, pero si en un futuro próximo te surge esta necesidad agradecerás que alguien se tomara el tiempo de crear un tutorial.

Todo parte de una necesidad para mi academia online, donde como ya te mostré en el pasado artículo me gustaría permitir a los miembros del club una opción justa para poder proponer ideas de nuevos cursos.

El sistema que empecé tenía en cuenta la antigüedad del alumno, es decir, según el número de meses que llevara en la plataforma se le asignaba un nivel u otro. Para calcular el número de meses creé la siguiente función:

No me voy a extender mucho en la anterior función puesto que gran parte de su código lo utilizamos ya en un shortcode, pero se resume en:

• Conseguir la ID del usuario conectado en ese momento.
• Obtener fecha de registro en la academia.
• Obtener su nombre.
• Calcular número de meses que lleva registrado.
• Retornar nombre y nivel (número de meses + 1).

Integración con Contact Form 7

Bien, pues para empezar a usar este nivel me gustaría integrarlo dentro de un formulario de contacto creado con el plugin Contact Form 7.

Por lo tanto, este formulario permitirá a todo el mundo, sea o no miembro de la academia, proponer ideas de nuevos cursos, pero en el caso de que el usuario se haya logueado previamente en la plataforma también recibiré su nivel, de esta forma podré almacenar las propuestas en una hoja de cálculo y ordenarlas y, en el caso de que varias personas propongan un mismo tema, agruparlas y sumar dichos niveles.

Reconozco que este método no está 100% automatizado, pero prefiero empezar de forma lean. En un futuro lo iré mejorando y si os gustan este tipo de tutoriales, del tipo behind the scenes iré compartiendo los progresos. Bueno, vamos al lío.

Para poder añadir un nuevo campo personalizado a nuestros formularios de Contact Form 7 (CF7), debemos crear un shortcode, pero en este caso no valen los normales y corrientes de la API de WordPress. Aún así el proceso es igualmente sencillo:

Debemos añadir una función al action hook que ofrece CF7 llamado «wpcf7_init» con lo cual estamos indicando: que en el caso de que CF7 esté activo en nuestro sitio web y se haya iniciado correctamente, entonces se ejecute nuestra función de callback «mp_cf7_custom_shortcode«.

Veamos ahora el código de esta última:

Lo que hacemos es llamar a una función que nos ofrece CF7 llamada «wpcf7_add_form_tag» que nos permite generar shortcodes para usar en nuestros formularios, por lo tanto es muy parecida a «add_shortcode«:

• Recibe 2 parámetros: el nombre del shortcode que puedes elegir el que quieras, como por ejemplo «show_member_level«. Y la función de callback que la he llamado «cf7_get_member_level«.
• «cf7_get_member_level» lo único que hace es llamar a la función que te mostré al inicio «mp_get_member_level«.
• Obtener únicamente el nivel del miembro y retornar un input de tipo oculto con el atributo name=»member-level» y el atributo value con dicho nivel.

¡Genial pues ya tenemos un nuevo shortcode propio de CF7 que nos permitirá añadir un campo oculto a nuestro formulario con el nivel del usuario. Ahora sólo nos queda crear el formulario y añadírselo.

Creamos el formulario

De manera que si ahora creas un nuevo formulario de contacto con CF7 y le añades el shortcode que acabamos de crear:

Tendremos que recoger el valor recibido y mostrarlo en el texto del correo que recibiremos. Para recoger este valor debemos utilizar el valor que asignamos al atributo «name» del campo del formulario, por lo tanto, en este caso será «member-level«:

Ahora cuando alguna persona envíe su propuesta, el correo que recibiré incluirá también su nivel como miembro y, en caso de que no sea miembro o no haya ingresado en la academia antes de enviar su mensaje, el nivel valdrá cero:

¡Y eso es todo! 😀 como ves no ha sido una tarea muy compleja y sólo hacía falta conocer un poco las posibilidades que ofrece Contact Form 7 a los desarrolladores. Espero que te haya gustado el tutorial.

Y no hace falta que diga que desde este momento ya puedes proponer nuevos cursos para el Club SiliCodeValley 💃💃 en silicodevalley.com/proponer.

¡Muchísimas gracias, un abrazo y seguimos!