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:{}

One 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!

  • Carla

    Hola, tengo una consulta a ver si me puedes ayudar. Me funciona correctamente el Contact Form 7, salvó que cuando la persona cubre todos los datos y adjunta los archivos, cuando le da a enviar, se queda pensando todo el rato, nunca salta el mensaje de “se ha enviado correctamente”, pero a mi me llegan los mails. ¿A qué se puede estar debiendo esto? Más que nada por que la persona piensa que no se está enviando el formulario y en realidad si. Muchas gracias. ¡Saludos!

    • blogendeos

      Hola Carla,

      Sospecho que hay algún conflicto con los plugins que usas o con la plantilla. Sería necesario ver más detalles, puedes comprobarlo con la consola de las “Herramientas para desarrolladores” del navegador que usas.

      Para ello tendrás que pulsar la tecla F12, clicar sobre “Consola” y ver si hay errores mientras rellenas y envías el formulario.

      En la siguiente imagen tienes un ejemplo de cómo sería en Chrome. https://uploads.disquscdn.com/images/43f898b26765a2540991dc5612d95c9df9d70ffd10b4cb0bd38399c32d165308.png

      ¡Saludos!

      • Carla Fontán Zaragoza

        Muchas gracias. Efectivamente me sale este error, ¿sabes qué significa?
        https://uploads.disquscdn.com/images/e923f255ee67711ed9bb812fcd6cef3166c544329cdbaaa2ac6656b06c49da07.png

        • blogendeos

          Hola de nuevo @carlafontnzaragoza:disqus
          Confirmado que hay un error que impide mostrar el mensaje de “enviado correctamente”.
          Ahora viene lo más complicado, detectar quién provoca este error. Te doy unas ideas:

          1. Asegúrate de que en la configuración del formulario no te marca ningún error de sintaxis.
          2. Si tienes código en “Ajustes adicionales”, elimínalo.
          3. Si por algún sitio ves algo parecido a ‘on_sent_ok’, elimínalo.
          4. Asegúrate de tener las ultimas versiones de Contact Form 7, WordPress y la plantilla que usas
          3. ¿Tu web es multidioma? Puede que haya algún problema con el plugin de idioma, deshabilítalo un momento y vuelve a probar.
          4. Puede que tengas conflicto con otros plugins. Desactívalos todos. Si entonces te funciona, ve activándolos de uno en uno y vuelve a probar. Así sucesivamente hasta encontrar el que está dando problemas.

          De momento esto es lo que te puedo decir desde mi posición, sin ver tu web.
          A ver si con estos consejos hay suerte.

          ¡Saludos!

          • Carla Fontán Zaragoza

            Muchas gracias por tu ayuda, probaré con estos consejos. ¡Saludos!

  • Ana

    Fantástica información. He tomado nota a pesar de ser supernovata en esto. Mi problema es de base…se que tengo personas registradas pero donde encuentro sus direcciones de correo? En cpanel? Solo en el correo?
    Gracias. Un saludo,

    • blogendeos

      Hola Ana, gracias por tu comentario. Si te refieres a usuarios registrados en tu WordPress puedes consultarlos en el menú “Usuarios” que aparece a la izquierda. Si tu pregunta es en relación al truco 7, en vez de al menú “Usuarios” tendrás que acceder al menú “Flamingo”. Saludos!

  • Juan

    Muchas gracias, el truco 8 me salvo la vida, y la creación de muchos formularios independientes por URL
    Saludos

    • blogendeos

      Hola Juan, gracias por tu mensaje. Estamos encantados de que te haya sido de ayuda!

  • alberto guia

    buenas tardes ,excelente post! existirá una etiqueta especial que diga en el correo del ADMIN, el NOMBRE DEL USUARIO que mando el formulario?, sin tener que pedirle a el nuevamente que escriba el nombre de USUARIO en dicho formulario, probé todas las etiquetas especiales del TRUCO 8 y ninguna dice el NOMBRE DE USUARIO que mando el formulario desde su sesión, saludos

    • blogendeos

      Hola alberto guia, ¡por supuesto que puedes hacer los que comentas!

      La teoría es la siguiente:
      Vamos a usar un campo de tipo “hidden” (para que no sea visible) donde contendrá un campo que se rellenará automáticamente con el nombre de usuario. Este campo sí lo enviaremos con el resto de información del formulario al destinatario del correo.

      La práctica es la siguiente:
      – Campo de tipo “hidden” con el nombre de usuario –> [hidden your-name default:user_login ]
      – En el correo electrónico enviamos la información así –> Nombre usuario: [your-name]

      Ejemplo del input en foto: https://uploads.disquscdn.com/images/60db535f5172696ca95d6c363f2c579ea04cf60b16cc1dd00b647e7023efc8eb.png

      Ejemplo del mensaje en foto: https://uploads.disquscdn.com/images/d8070e15f966df880fb2910528bf7daad13cfffd4edbad019846a8e9a0034f7c.png

      Como información extra comentarte que Contact Form 7 va más allá y permite introducir automáticamente la siguiente información de los usuarios registrados:
      – default:user_login
      – default:user_email
      – default:user_url
      – default:user_first_name
      – default:user_last_name
      – default:user_nickname
      – default:user_display_name

      Espero haberte ayudado, cuéntanos cómo te ha ido y ¡gracias por leernos!

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

ACEPTAR
Aviso de cookies