Camilo Camargo, Bienvenida al Blog.
Hola, espero que este artículo pueda serte útil.

¿No resolviste tu problema? Usa el buscador o déjame un comentario.

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

¿Te ha resultado útil? Comparte el artículo.

5 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
  2. Hola, yo necesito algo similar, necesito configurar un formulario que es de un solo campo y que el dato que se ingrese en este se muestre en el mismo campo pero en el otro formulario ya rellenado, ¿ Como lo puedo hacer ?

    Responder
  3. Hola Camilo, gracias por compartir tus conocimientos, tengo un formulario que ha sido un dolor de cabeza, resulta que tengo un gran problema para insertar un código variable para poder fijar un número de Cod. empresa en un campo de un formulario Contact form 7, te cuento: tengo un formulario de 4 columnas, este formulario se repite en 75 páginas, cada página contiene un número de empresa, en mi formulario hay un campo llamado Cod. Empresa, ¿como puedo hacer que en ese campo del formulario aparezca el número correspondiente a cada empresa diferente?. cual seria el código html o css que tengo que insertar. gracias por la ayuda.

    Nombre [text* Nombre_cliente]
    E-mail [email* E-mail_cliente]
    Teléfono [tel* Telefono_cliente]
    Cod. Empresa [text* Cod-Empresa]
    Mensaje / Comentarios [textarea* Mensaje-Comentario]

    [acceptance acceptance-840] Acepto los terminos y condiciones. [/acceptance]

    [recaptcha align:center]

    [submit «Enviar»]

    Responder
    • Hola mi estimado!

      Hay varias formas de hacer lo que planteas, con PHP.

      Realmente el código que muestro en este artículo te funciona, PERO donde dice:

      /*- Este es mi valor personalizado, puedes poner cualquiera acá -*/

      Deberías ver la forma de obtener el cod de empresa correspondiente.

      Lo anterior puedes hacerlo guardando todos los cod en la base de datos y luego los llamas en cada página.

      Si no quieres liarte con base de datos, podrías agregar el código en el mismo archivo. (No es optimo, pero si fácil).

      ¿Cómo están tus conocimientos de PHP? Avísame y te grabo un videito, en caso de ser necesario.

      Responder

Comentarios