Main menu

10 trucos para Contact Form 7 – Primera parte

Cuando hablamos de crear un formulario de contacto para WordPress lo tenemos claro, nuestra primera opción siempre es Contact Form 7. ¿No estás convencido? Con estos 10 trucos que te mostramos saldrás de dudas.

Contact Form 7 es uno de los plugin más populares en el repositorio de WordPress, su más de 1 millón de instalaciones activas y sus más de 28 millones de descargas lo elevan a la categoría de plugins indispensables.

Si además le sumas que es gratuito, su facilidad de uso y su capacidad para adaptarse a lo que necesitas con los trucos que te mostramos, Contact Form 7 se vuelve imprescindible casi obligatorio.

Truco 1: Mover el mensaje de confirmación

Al hacer un envío, Contact Form 7 muestra por defecto los mensajes de confirmación tipo “Su mensaje se ha enviado con éxito” o “Falló el envío del mensaje” al final del formulario.

Contact Form Response Tag

Contact Form 7 Mover mensaje confirmación

Si lo deseas, puedes mover este mensaje a cualquier otro sitio usando la etiqueta:

[response]

Por ejemplo puedes ponerlo en la parte superior o incluso repetidas veces, aunque no tenga mucho sentido, pero que sepas que se puede.

Contact Form 7 mensaje superior
Contact Form 7 confirmación arriba

 

Contact Form 7 multiple response
Contact Form 7 multiple confirmación

Truco 2: Redirecciona a una página de agradecimiento

Después de enviar un formulario, Contact Form 7 se queda en la misma página. Si necesitas redireccionar al usuario a la típica Página de gracias o Thank you page tan solo necesitas añadir en la “Configuración adicional” el siguiente action hook con tu URL de destino:

on_sent_ok: "location = '/gracias';"

Redireccionar contact form 7

Truco 3: Seguimiento de eventos con Analytics

Si usas Google Analytics es muy probable que quieras medir las veces que se ha usado tu formulario de contacto. Contact Form 7 permite hacer un seguimiento de eventos usando el siguiente action hook en la “Configuración adicional”:

on_sent_ok: "_gaq.push(['_trackEvent', 'Formulario de contacto 1', 'Enviado']);"

Eventos Analytics contact form 7

Truco 4: Añadir más destinatarios a Contact Form 7

Cuando se rellena y envía un formulario, normalmente hacemos que llegue el mensaje a la dirección de correo que hemos especificado. También deberías saber lo fácil que es añadir más destinatarios con copia CC y con copia oculta BCC escribiendo sus direcciones en los “Encabezados adicionales”

Añadir destinatarios Contact Form 7

Truco 5: Checkbox de términos y condiciones

Es muy posible que necesites añadir el típico checkbox de “Acepto los términos y condiciones”. Contact Form 7 tiene un campo específico bastante configurable el cual no deja enviar el formulario hasta que no se clica (o al contrario si se configura para que lo haga al revés).

Podemos añadir la casilla de verificación, la frase y el enlace con la siguiente etiqueta en el campo “Formulario” encima del botón “Enviar”.

[acceptance terminos-condiciones] Acepto los <a href="/terminos-condiciones" target="_blank"> términos y condiciones</a> 
Términos y condiciones en Contact Form 7
Checkbox en Contact Form 7

Como puedes ver, podemos personalizar nuestros formularios de contacto con mucha facilidad.

¿Te había dicho 10 trucos? Pues atento al próximo artículo que traerá los 5 restantes. ¿Te los vas a perder?

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 - Segunda parte - Blog Endeos()

  • Ing Francisco Robles

    Hola , me llamo francisco, tengo una duda, he usado el Location para redirigir a una pagina de Agradecimiento, y si en efecto lo redirige, pero al segundo o segundo y medio vuelve a la pagina donde esta el formulario debido a que carga el mensaje de alerta de “se ha enviado exitosamente tu mensaje”, alguna idea para evitar esto y se quede en la pagina de agradecimiento, de antemano muchas gracias.

    • blogendeos

      Hola @ingfranciscorobles:disqus hemos intentado reproducir el caso que nos comentas y no lo hemos conseguido. La redirección nos funciona con normalidad, así que estamos un poco a ciegas…

      Tal vez estos consejos sean algo evidentes, pero por si acaso:

      Asegúrate de escribir correctamente la sintaxis: on_sent_ok: “location = ‘/url-pagina-gracias’;” en la pestaña “Campos adicionales”

      En el caso de que uses alguno de los otros trucos de Contact Form 7 quítalos y prueba solo con este.

      Desactiva temporalmente otros plugin que puedan interferir con las redirecciones.

      Saludos

  • Erick Andres Sanchez De la Cru

    Hola, tengo un problemilla en agregar los terminos y condiciones. Es que parece algo va mal con algún estilo. No sé mucho de diseño web.

    A ver si me das una mano. 🙂

    • blogendeos

      Hola Erick, ¿nos puedes dar algún detalle más sobre tu problema?

  • Marta

    Hola, excelente información, sólo me ha surgido una duda.
    En mi web quiero que el formulario de contacto se envíe a otra cuenta Outlook (es decir info@miempresa.com) pero intentando e intentando por medio de todos los tutoriales de internet no he conseguido que me envie nada a ninguna dirección.
    Si puedes echarme una mano
    Muchas gracias

    • blogendeos

      Buenos días Marta,
      Para indicar el destinatario donde deben llegar los formularios, tan solo tienes que añadir la cuenta en el campo “Para” que se encuentra en la pestaña “Correo Electrónico” del formulario de contacto.

      https://uploads.disquscdn.com/images/7cc38b174849ef3c3c43c3aa35633e18053154158e88e79efff5aaf5670ed210.png

      Si lo que necesitas es enviar el formulario a dos correos diferentes, tienes que activar la opción “Correo electrónico (2)” y añadir la dirección en el campo “Para”.

      https://uploads.disquscdn.com/images/bf39d56e01561670e8d4da3d431c4d6f60a3191aba259d34e68c0523dcaa5539.png

      Ahora bien, si una vez hecho esto sigue sin llegarte los mails, el error está en otra parte. Si fuera el caso nos lo comentas.

      Saludos

      • Muchas gracias por la información. Si queremos enviar a más de un remitente, estos se ponen separados por comas : info@remitente1.com, info@remitente2.com @blogendeos:disqus ¿Sabes de algún otro modo? ya que este no me funciona en un sitio y en otro si. Gracias!!

        • blogendeos

          Hola @toniubeda:disqus

          Separar con comas a los remitentes también es muy buena opción, son detalles de Contact Form 7 que lo convierten en un gran plugin.

          Que en un sitio funcione y en otro no puede deberse a mil cosas… empezaría revisando que los remitentes los tengas escritos sin espacios después de cada coma, es un fallo fácil de cometer. Según tu ejemplo, debería ser: info@remitente1.com,info@remitente2.com en lugar de info@remitente1.com, info@remitente2.com.

          Si eso no funciona, otro modo sería el uso de las “Cabeceras adicionales” donde podrías poner una copia y una copia oculta de la siguiente manera:

          https://uploads.disquscdn.com/images/af0550b3f8dbdc9c1353ee931f52f4ccbe4ae633552e7bf3505c7b2cf01b525b.png

          En caso de que necesites más remitentes, también podrías concatenarlos con comas.
          Si encuentras solución nos lo comentas ¿sí?

          ¡Saludos!

          • Gracias por la respuesta, la verdad es que lo tenía como comentas. Lo que he hecho es cambiar el orden de los correos y, tachan!!!!! ahora funciona. Pero me gusta más lo de añadirlos a la cabecera adicional. Un saludo y gracias de nuevo.

          • blogendeos

            Gracias a ti por leernos y contarnos tu caso.
            ¡Saludos!

  • John J Rodriguez G

    Excelente Pluging!: tengo una pregunta puntual si alguien me puede ayudar , si tengo un menu desplegable , Osea: si seleccione una variable del menú quiero que valla a una URL o si seleccione otra valla a otra URL, alguien me puede dar una luz con ese código En la pestaña formulario va esto: Carrera Seleccionada
    [select* CarreraSeleccionada “Carrera 1 Meca” “Carrera 2 Petroleo” “Carrera 3 Deporte”] entonces como seria en la pestaña ajustes adicionales para según la selección valla a una URL especifica Muchas Gracias.

    • blogendeos

      Hola @johnjrodriguezg:disqus

      Seguro que te será útil esta documentación oficial: https://contactform7.com/redirecting-to-another-url-after-submissions/

      Te explica cómo redireccionar a una url después de enviar el formulario. Podrías probar de adaptarlo a l oque necesitas, según el valor del select, redirigir a una página u otra.

      ¡Saludos!

  • Jesus Manuel Arroyo Sobrino

    No consigo algo que debería ser simple o así lo entiendo yo.
    El formulario es para usuarios registrados, una vez que un usuario rellene el formulario y lo envíe que no le vuelva a aparecer, porque consigo ocultarlo al enviar pero si recarga la página le vuelve a aparecer.

    • blogendeos

      Hola @jesusmanuelarroyosobrino:disqus

      No creo que se pueda conseguir el comportamiento que comentas solo con las opciones del plugin.
      Deberías controlar de alguna manera que un usuario ya ha rellenado el formulario. Tal vez usando cookies o guardando en la base de datos algún parámetro que se consulte antes de mostrar el formulario, por ejemplo:
      Si “formulario_rellenado = sí” entonces no me muestres el formulario.
      Si no lo ha rellenado, entonces múestralo.

      Es un ejemplo muy simple, pero sirve para explicar la idea…

      ¡Saludos!

      • Jesus Manuel Arroyo Sobrino

        Y la posibilidad de cambiarle el rol a un usuario automáticamente al enviar el formulario???

        • blogendeos

          Hola @jesusmanuelarroyosobrino:disqus

          Simplificándolo en una sola frase, el comportamiento “normal” de Contact Form 7 es el de recoger datos que se han rellenado en un formulario y enviarlos por mail a un correo electrónico específico, todo lo demás queda fuera de su alcance, por lo que se tendrá que programar a medida.

          Quizá necesites otro plugin diferente. No sé los detalles de tu proyecto, pero si lo que quieres es mover a los usuarios de grupo y ofrecerles diferentes contenidos, tal vez los plugins de “membresías” o “suscripciones” te sirvan: https://es.wordpress.org/plugins/search/membership/

          ¡Saludos!

  • Diego “imagenbruja” Casas

    Hola! Queria saber si se puede hacer q envie una copia del mail a la persona que escribe. Muchas gracias!

  • samuel diaz

    Saludos amigo una pregunta , como puedes enviar tu ubicacion de google maps por este formulario de contacto!

  • Liula

    Muy buenas, lo primero, me encanta el pluging. Ahora, tengo un problema. Tengo un cliente que si o si quiere quitar el campo nombre e email del formulario. ¿Es posible hacerlo? ¿Cómo lo hago para que no em de error? Gracias.

    • blogendeos

      Hola @liula:disqus,
      Por supuesto que puedes quitar los campos de nombre y mail. Tan solo tendrás que hacer estos dos pasos:

      1- En la pestaña “Formulario” borra las etiquetas correspondientes al nombre y al mail (por defecto son [text* your-name] y [email* your-email]). Deja solo las que te interesen. En la siguiente imagen verás que solo he dejado el “Asunto”, “Mensaje” y botón de “Enviar”.

      https://uploads.disquscdn.com/images/f2f10758a4bd027ae81fa39bf3d83b77d2bf1fcfaba254239870a857e05911b1.png

      2 – En la pestaña “Correo electrónico” tienes que eliminar o modificar todas aquellas etiquetas que hagan referencia a [your-name] y [your-email], fíjate que pueden aparecer tanto en el campo “Para”, “De”, “Cabeceras adicionales” (esta la tendrás que dejar vacía) y “Cuerpo del mensaje”. Te quedará algo así:

      https://uploads.disquscdn.com/images/e88f00d94aa3b3db6c852ea421ce64037c9603e2a3fcfca2474b78a2ef76b8b4.png

      (Acuérdate de poner los mails del dominio con el que trabajes, no dejes el que ves en el ejemplo “@endeos.net”…)

      ¡Espero haberte ayudado!

  • Noelia Marramiau

    Hola, gracias por la información, me ha servido de ayuda. Pero me he dado cuenta que el mensaje de confirmación si que me aparece si se completa el formulario con el pc, pero con el móvil no sale ningún mensaje y me aparece un símbolo como de reiniciando. ¿Eso a que se debe?
    Gracias.

    https://uploads.disquscdn.com/images/d3deb22d4e54ef623705dfd7ebc13e13fb1a36e7ca8ef965cf499e7ff2771670.png

    • blogendeos

      Hola @noeliamarramiau:disqus

      Es extraño que la versión en ordenador sí funcione y la versión móvil no… sin ver la web es complicado, pero te pongo una batería de preguntas a ver si alguna te puede ayudar.

      ¿Te sucede lo mismo si usas la plantilla por defecto de WordPress? Prueba de cambiarlo temporalmente para descartar que sea cosa de plantilla…
      ¿Tienes algún plugin que trabaje solo con dispositivos móviles? Tal vez está dando conflicto con Contact Form 7…
      ¿Usas algún plugin de optimización? Prueba de limpiar la caché o desactivarlo temporalmente…
      ¿Te aparece el mismo error si simulas un dispositivo móvil con el inspector de elementos de Chrome?

      Espero que estas ideas te sirvan para hacer funcionar ese formulario.
      Ya nos contarás como te ha ido.
      ¡Saludos!

      • Noelia Marramiau

        Hola, después de muchas pruebas, he probado a desactivar el plugin de CF7Customizer y sin él si que me aparece el mensaje de confirmación, pero claro me gustaba como quedaba estéticamente con CF7Customizer… Entonces no sé que hacer. ¿Alguna recomendación?
        Gracias, un saludo.

        • blogendeos

          Hola @noeliamarramiau:disqus

          Ya sé que no es consuelo, pero nos hemos dado cuenta de que el tuyo no es el único caso.
          En la misma página del plugin hay dos hilos en el foro bastante recientes:
          https://wordpress.org/support/topic/problems-by-submit-form/
          https://wordpress.org/support/topic/no-success-message-4/

          El primero hoy por hoy no tiene respuestas y en el segundo la solución que dan es poner una versión antigua de Contact Form 7.

          En tu caso elegiría alguna de estas 3 opciones:
          1- Esperar a que Contact Form 7 o CF7Customizer se actualice y si hay suerte se solucione el problema.
          2- No usar CF7Customizer y darle estilo al formulario vía CSS, manualmente, con el código de toda la vida y así asegurarte de que nunca tendrás incompatibilidades
          3- Si no quieres liarte con el código CSS puedes ponerte en contacto con nuestro equipo de desarrollo web para que se encarguen ellos de hacer el trabajo. Te lo dejarán tal como pidas. https://blog.endeos.com/contacto/

          ¡Muchos saludos!

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

ACEPTAR
Aviso de cookies