Campos con valores personalizados en contact form 7

En ocasiones tenemos la necesidad de personalizar un poco más nuestros formularios en Contact Form 7.

Desde valores personalizados, por defecto o simplemente valores dinámicos que quieres obtener de una entrada en particular y adjuntarlos en un mensaje.

Son necesidades muy especificas pero que en ocasiones nos topamos.

Ejemplo: Un cliente que tiene una inmobiliaria y quiere saber exactamente desde cuál inmueble es contactado, para poder remitir a sus agentes.


cómo agregar campos con valores personalizados en contact form 7.

No vamos a utilizar Plugins adicionales para personalizar un formulario en Contact Form 7, lo único que haremos es agregar un pequeño código en el archivo functions.php de tu Theme.

No voy a entrar en detalles sobre el código, pero si tienes dudas, puedes dejarme tus comentarios sin ningún problema. 😉

En resumen, haremos esto:

  • Utilizar el Hook wpcf7_init de Contact Form 7, para agregar nuevos tags.
  • Añadir y configurar el nuevo tag o campo personalizado en CF7.
  • Personalizar o manipular el valor personalizado del campo.

Lo primero es ubicar el archivo functions.php de tu Theme, para agregar el código que usaremos para personalizar Contact Form 7. También puedes usar un Plugin personalizado, pero no hablaremos de eso. (Al menos no en este artículo).

Si ya ubicaste el archivo, manos a la obra.

1) Hacemos uso de wpcf7_init y agregamos nuestro nuevo tag personalizado:

/*-------------------------------------------------------------
* Custom Tag Contact Form 7
*--------------------------------------------------------------*/

add_action( 'wpcf7_init', 'custom_add_form_tag_inmueble_agent' );

function custom_add_form_tag_inmueble_agent() {
    wpcf7_add_form_tag( 'inmueble', 'custom_inmueble_form_tag_handler', array( 'name-attr' => true ) ); 
}


El código anterior es bastante simple: invocamos a wpcf7_init para registrar un nuevo tag, posterior dentro de la función custom_add_form_tag_inmueble_agent() invocamos a wpcf7_add_form_tag() función encargada de agregar el nuevo tag de forma personalizada.

Hay 2 valores importantes dentro de wpcf7_add_form_tag():

1) “Inmueble” ese será el nombre del tag en Contact Form 7.
2) La función custom_inmueble_form_tag_handler() usada para manejar el valor del campo. (La vemos a continuación).

Con lo anterior, ya tenemos un nuevo tag en Contact Form 7, que podremos usar, de nombre “Inmueble”. Lo que sigue a continuación es manipular el valor del mismo.

Agregamos el siguiente código, justo debajo del anterior:

function custom_inmueble_form_tag_handler( $tag ) {
 
/*- Este es mi valor personalizado, puedes poner cualquiera acá -*/  

   $inmueble = isset($_SESSION['inmueble-agent']) ? $_SESSION['inmueble-agent'] : 'N/A';

/*- Configuración del campo -*/

   $atts = array(
        'type' => 'hidden',
        'name' => $tag->name,
        'value' => $inmueble
    );

/*- Creamos el campo con los atributos anteriores -*/

   $input = sprintf(
        '<input %s />',
        wpcf7_format_atts( $atts ) );

/*- Retornamos el nuevo campo personalizado-*/

   return $input;

}


Detalles importantes del código anterior:

1) inmueble es una variable de sesión, que utilizo para asignar el valor del input o campo personalizado en Contact Form 7.

2) En la configuración del campo, establezco el tipo como “hidden” pues es un valor que no me interesa vea el usuario. Lo que hago, es directamente darle un valor dinámico a ese campo con la variable de sesión.

3) Continuando con la configuración a ‘value’ le asigno el valor de mi variable de sesión.

Si todo ha salido bien, desde las configuraciones al momento de crear un nuevo formulario en Contact Form 7, deberían poder crear un nuevo campo personalizado y usarlo en sus mensajes.

Ejemplo:

Campos personalizados en CF7
Campos personalizados en CF7


Para este caso en particular, “inmueble” es un campo con un valor personalizado, que obtiene la información de una variable de sesión.

Es solo mi ejemplo, dentro de la función encargada de manipular el valor y las configuraciones del campo, puedes hacer CASI cualquier cosa, solo es cuestión de ser un manitas. 😉


Personalizar contact form 7 sin plugins.

WordPress nos permite hacer de todo sin necesidad de Plugins. Sin embargo, no esta demás mencionar que actualmente existen algunos complementos para añadir campos personalizados en Contact Form, tomando su valor de casi cualquier parte.

Lo anterior en caso de que el código no sea lo tuyo, o simplemente tengas miedo de romper algo en tu sitio.

Si tienes dudas sobre cómo personalizar formularios en WordPress, obtener valores dinámicos de tus entradas o simplemente realizar cambios en Contact Form 7, puedes dejar tus comentarios. 😉

Por último y no menos importante, ¡Comparte! es puro amor. <3

2 comentarios en “Campos con valores personalizados en contact form 7”

  1. Hola! Muy interesante el post. Tengo un contact form 7 multistep. El usuario coloca su nombre en una pantalla y se dirige a otra para completar el siguiente dato requerido. Yo quisiera mostrar en esa pantalla el nombre que introdujo anteriormente para poder hacerle una pregunta personalizada en la vista actual. Es posible hacer eso?

    Responder
    • Hola Marina!

      Claro, si puedes. 😉

      Si observas, en la configuración del nuevo campo, yo configuro ese input como “hidden” para que se oculte.

      En tu caso, debería ser un campo visible, que muestre el valor del primer paso.

      Responder

COMENTARIOS