Main menu

10 trucos para Contact Form 7 – Segunda parte

La semana pasada aprendimos los primeros trucos para Contact Form 7 y en este artículo te traemos los cinco restantes para que puedas crear mejores formularios de contacto con WordPress.

Truco 6: Añadir captcha a Contact Form 7

Usar un formulario de contacto sin algún mecanismo de seguridad es una práctica bastante peligrosa, a no ser que quieras tener un montón de contactos desconocidos ofreciéndote productos de dudosa legalidad, lo mejor será protegerse con un captcha.

Los creadores de Contact Form 7 nos ofrecen Really Simple Captcha, un plugin sencillo pero fácil de usar y configurar con el que no tendremos ningún conflicto.

Para usarlo tan solo debemos añadir su etiqueta correspondiente:

[captchac captcha-endeos] 
[captchar captcha-endeos]

Captcha en contact form 7

También permite cierta configuración de tamaño y colores:

[captchac captcha-endeos size:l fg:#00ff00 bg:#01338d] 
[captchar captcha-endeos]

Confirgurar Captcha en contact form 7

Truco 7: Guardar los registros enviados con Contact Form 7

Una de las “carencias” de Contact Form 7 es que por defecto no hay donde consultar los mensajes enviados a través del formulario.

Los mismos desarrolladores de Contact Form 7 lo saben, por eso han creado Flamingo, un plugin que guarda un registro de los campos que se envían, como pueden ser nombres, correos, asuntos, mensajes…

Guardar registros contact forms
Flamingo contact forms 7

Este plugin también te permitirá exportar en CSV toda la información que vaya recopilando.

Una alternativa creada por otros desarrolladores es Contact Form DB.

Truco 8: Etiquetas especiales para emails

Hay ocasiones en las que queremos más información de la que realmente nos envían desde el formulario. Insertando estas etiquetas especiales en el campo Cuerpo del mensaje o Message Body obtendremos detalles muy interesantes.

[_remote_ip] Muestra la IP del usuario
[_user_agent] Muestra la información del agente de usuario usado
[_url] Muestra la página desde la que nos envían el formulario
[_date] Muestra la fecha de envío
[_time] Muestra la hora de envío
[_post_title] Muestra el título del artículo donde está el formulario

Etiquetas especials contact forms 7

Truco 9: Cargar los ficheros .js y .css solo cuando sea necesario

Con la configuración por defecto, Contact Forms 7 carga sus ficheros JavaScript y CSS en todas las páginas de la web. Como buenos optimizadores que somos, deberían dolernos los ojos al ver estas peticiones innecesarias. Lo más correcto sería cargar estos ficheros solamente cuando estemos mostrando un formulario de contacto.

En primer lugar haremos que no se cargue por defecto los ficheros .js y .css añadiendo en el functions.php de nuestra plantilla:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

En segundo lugar haremos que se carguen estos ficheros solo cuando estemos en la página de contacto. Para ello deberemos colocar en nuestra plantilla de página contact.php antes de llamar al wp_head():

<?php
     if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
         wpcf7_enqueue_scripts();
     }
 
     if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
         wpcf7_enqueue_styles();
      }
?>

Truco 10: Añadir shortcodes en el editor de formularios

El editor HTML de Contact Form 7 permite adaptar el formulario a tus necesidades, pero ¿no echas de menos poder usar shortcodes? Para que funcionen deberás editar tu fichero functions.php y añadir las siguientes líneas:

function endeosshortcode_wpcf7_form_elements($form){
      $form = do_shortcode($form);
      return $form;
}
add_filter('wpcf7_form_elements', 'endeosshortcode_wpcf7_form_elements');

Con estos 10 trucos para Contact Forms 7 no tienes excusa para no hacer formularios de contacto personalizados de la manera más sencilla, pero si necesitas que te ayudemos tan solo tienes que escribir a nuestro departarmento de desarrollo web.

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Google+ Compartir en Linkedin
factory_shortcodes_assets:
a:0:{}

1 pingback/trackback

  • Pingback: 10 trucos para Contact Form 7 - Primera parte - Blog Endeos()

  • Tomas Mendoza

    Geniales trucos! Gracias. me han servido varios

    • blogendeos

      Hola @disqus_mCb98Xaayo:disqus

      Nos alegra que digas esto ¡Saludos!

  • Alessandra

    Me he encontrado con la carencia de los típicos formularios como Contact form 7, ninja, etc
    De que una vez te envían un mensaje, no tienen la posibilidad de añadir a ‘Contactos’ la persona que ha enviado el mensaje. Alguna idea?

    • blogendeos

      Hola @disqus_CxW8LR8jIu:disqus
      Esa es la “limitación” de los plugins, que tenemos que adaptarnos a lo que hacen, todo lo que sea un “extra” requerirá de programación a medida.
      Si lo necesitas para algún proyecto escríbenos en nuestro formulario de contacto y danos los detalles.

      ¡Gracias por leernos!

  • Elisa

    me gustaría saber si se puede redirigir a una pagina diferente dependiendo de la selección que se haya hecho en el menu

    • blogendeos

      Hola Elisa
      El plugin Contact Form 7 no viene con esa funcionalidad implementada, habría que desarrollar la programación.
      Si quieres ve al apartado de “Contacto” y explícanos con detalle lo que necesitas para que podamos darte una valoración de lo que implica hacer lo que necesitas.

      ¡Saludos!

  • Andres toyo

    Buenas de que forma se le puede enviar un correo personalizado a la persona que contacto, algo como gracias por contactarnos le respondemos pronto, pero que le llegue a su correo

    • blogendeos

      Hola Andres, cuando configuras los formularios de contacto, en la pestaña “correo electrónico” puedes configurar el buzón donde llegan los mensajes.

      En esa misma pestaña, un poco más abajo, puedes marcar una opción “correo electrónico (2)”. Márcala y entonces podrás configurar el plugin para que envíe un mensaje al usuario, en el campo “para” tendrás que poner la variable que contiene el email del usuario, que por defecto es [your-email].

      Saludos.

  • Jhonathan H Osorio

    Hola. Muchas gracias por la información.

    Actualmente tengo el siguiente problema. Ya me llegan los mensajes a mi correo, pero me llegan vacios.

    Es decir, en el contact form yo pido 4 cosas. Nombre, teléfono, correo y el mensaje. Cuando me llega el correo de contacto, me llega solo con la información del nombre, el telefono, correo y mensaje no me llegan. ¿Como puedo solucionar eso?. Gracias de ante mano.

  • Cris VinL

    Hola, buenas noches, muchas gracias por la Información, nunca te acostarás sin saber algo nuevo, pero lo que a mí me trae por la calle de la Amargura y no sé que más probar pues he hecho de todo lo posible, siguiendo las instrucciones del Contact Form 7 es cuando se llega al Checkbox.., los datos personales, mensaje y demás, lo acepta, pero cuando llega a la elección de alguna de las cuestiones propuestas, marca todo el recuadro en rojo, dice que hay un error, pero lo bueno es que quien hace la operación de programación es el propio sistema, y no sé cómo solucionarlo, alguien me puede echar una mano?…, un cordial saludo y muchas gracias de nuevo.

    El problema está aquí, no pongo entre las comillas las opciones a elegir, pero esta es la estructura que hace el sistema y él mismo dice que es un error:

    Elige la opción que quieras (*)
    [checkbox* checkbox-408 use_label_element exclusive “C” “M” “M” “S”]

    Ésto es lo que aparece abajo del recuadro rojo en rojo también: Múltiples controles del formulario están puestos dentro de un único elemento etiqueta. ¿Cómo corrijo esto?

    • blogendeos

      Hola @crisvinl:disqus
      Cuando usas el elemento checkbox no tienes que envolverlo con .

      Pon directamente lo siguiente:

      Elige la opción que quieras (*)
      [checkbox* checkbox-408 use_label_element exclusive “C” “M” “M” “S”]

      Dinos si te funciona.
      ¡Saludos!

      • Cris VinL

        *Hola Blogendeos, buenas noches, lo voy a volver a intentar, ya que al principio lo hacía sin el tema de la famosa y el sistema me daba error y decía que tenía que aplicar esa extensión.., más vueltas que le he dado no he podido, incluso he intentado hacerlo buscando el HTML en otros sitios para ver cual era el modo a seguir, pero ni forma de encontrarlo.., de todas formas voy a probarlo otra vez y ahora te digo que es lo que vuelve a pasar…, Aleluya, muchas gracias, parece que esta vez sí funcionó, aunque también ha coincidido el tener que actualizar el plugin, parece que se han juntado las dos cosas.., un fuerte abrazo y seguimos en contacto. ✌🍀😉💷🤗*

        El 23 de enero de 2017, 10:42, Disqus escribió:

        • blogendeos

          ¡Hola!
          Genial que te haya funcionado, que tengas muy buen día.
          👍👍👍

          • Cris VinL

            *Hola Blogendeos, buenas tardes, muchas gracias por alegrarte de mis éxitos, ahora me ha surgido un problema que no sé si me podrás ayudar, y es que el plugin para el índice de contenidos: TABLE OF CONTENT PLUS, no me sirve con mi versión de WP 4.7.1, y ayer por más que lo busqué hasta las 4 de la madrugada no lo encontré, Tú sabes de alguno?.., ya cuando puedas me cuentas.., **un fuerte abrazo y seguimos en contacto. ✌🍀😉💷🤗*

            El 24 de enero de 2017, 9:31, Disqus escribió:

          • blogendeos

            Hola de nuevo @crisvinl:disqus
            Precisamente el plugin “Table of content plus” es el que usamos en la wiki que tenemos para nuestros clientes.
            Lo usamos en un WordPress 4.7.1 y funciona de maravilla, por eso me extraña cuando dices que no te sirve… ¿te aparece algún error o simplemente no funciona?

            Si te aparece error, dinos cuál es.
            Si parece que no funciona, tal vez tengas que configurar en los ajustes del plugin el parámetro “Mostrar cuando”
            https://uploads.disquscdn.com/images/0a6daf2234057de1c0967b89e8ddf791ba3058bc587ab15e52788c428389850d.png

            Esto quiere decir que la tabla aparecerá cuando en tu artículo haya 2 o más títulos.
            Cuando hablo de títulos me refiero a esto:
            https://uploads.disquscdn.com/images/53d0ce0e9cb77e08ab69b4970f3ae45e7f2b338cbd07ba58a54b2383cfd9b893.png

            Si usas menos no aparecerá (pues no tiene sentido mostrar una tabla de contenido cuando solo hay un titular ¿verdad?)

            Espero que te sirva.
            ¡Saludos!

  • Victor

    Hola, muy útil el artículo, sobre todo el tema de los shortcodes. Lo he estado probando y funciona perfecto, pero no he conseguido que los shortcodes funcionen para los valores por defecto de los campos del formulario. Para mi sería perfecto para un formulario en el que los usuarios actualizan sus datos y pueden ver los datos que incluyeron anteriormente. ¿Sabes cómo habría que hacer? Muchas gracias.

    • blogendeos

      Hola @disqus_Gv1LWUHwm9:disqus

      Me alegra que te haya resultado útil el artículo.

      Creo que Contact Form 7 no está pensado para realizar el comportamiento que necesitas… pues básicamente lo que hace es enviar por mail la información que han introducido los visitantes de tu web.

      Dudo que por defecto se encargue de identificar a los usuarios, cargar la información que previamente han añadido y permitirles editarla…

      No se todos los detalles de tu proyecto, pero tal vez deberías buscar otras opciones…

      ¡Saludos!

  • Germán Cuervo Sánchez

    Hola, muchas gracias por la información, es muy util.

    tengo una duda, utilizo el Contact Form 7 y funciona de maravilla, solo que necesito agregarle una función a la que llaman en ingles “adding and removing form fields dynamically” consiste en agregar campos del mismo tipo, me explico, si quiero varios campos con la opcion “nombre” al lado de dicho campo tenga un boton que diga “agregar más” y al hacer click en dicho boton aparezca otro campo para agregar otro nombre. investigando encontre el codigo JavaScript para hacerlo, lo que no se es si lo puedo agregar al Contact Form 7 o por el contrario el Contact Form 7 tenga una extención agregar dicho boton al formulario. De antemano muchas gracias! espero me haya explicado bien.

    • blogendeos

      Hola @germncuervosnchez:disqus
      Parece que no hay una manera “fácil” de añadir y quitar campos al formulario de manera dinámica. No conocemos ninguna extensión de Contact Forms 7 que lo haga…

      Tal y como dices, sí que hay varias opciones para hacerlo con JavaScript, pero eso te obligará crear los formularios a mano, dejando a un lado Contact Forms 7.

      Lo cogemos como idea para desarrollarlo en uno de nuestros próximos artículos, a ver si te sirve de ayuda.

      ¡Saludos!

  • Jose Rodriguez

    Hola la información me ha sido muy util, pero tengo una duda al momento de exportar los datos en flamingo como puedo hacer para que tambien se muestre el nombre del formulario o el canal en el archivo csv. Gracias

  • Javier Meza

    Hola estimados muchas gracias por la información , Espero me puedas ayudar con un pequeño error , que tengo con el formulario contact form 7 , cuando activo el Plugin Flamingo mi formulario se queda cargando en el envío ,pero me llega al correo de recepción la información de contacto y el Flamingo no guarda los datos del mensaje … Es decir no tengo registro de ese mensaje en WordPress solo en el correo ,,, que podría estar pasando?

    • blogendeos

      Hola Javier Meza, a simple vista no es fácil saber por qué te da este problema. En estos casos hay que ir descartando opciones hasta encontrar el por qué de ese comportamiento.

      En primer lugar, mira la consola del inspector de elementos, a ver si te da algún error de JavaScript u otro tipo.

      En segundo lugar, intenta identificar si hay algún plugin que te esté provocando el conflicto, para hacerlo te recomendaría que desactivaras todos los plugins, y si te funciona, ve activando de uno en uno hasta que vuelva a fallar.

      ¡Saludos!

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies