Contact Form 7 es un mega conocido plugin para WordPress que permite con unas sencillas opciones de configuración crear un formulario de contacto totalmente funcional para WordPress. En realidad, es pan comido poner un formulario de contacto en tu página hecha con WordPress si usas este plugin.
El problema viene cuando haces desarrollos algo más complicados, donde el formulario de contacto tiene que tener ciertas características no tan usuales. En mi caso, estoy desarrollando un proyecto para un cliente en WordPress y necesitaba varias cosas que he ido solucionando simplemente configurando Contact Form 7.
La verdad es que no sabía lo potente que es este plugin hasta que me vi obligada a invesitgar como hacer las cosas que comparto a continuación.
Analizar los datos de los envíos desde Contact Form 7 con Google Analytics
Si recibes correos desde estos formularios, puede que quieras analizar en Google Analytics como llegaron tus visitantes a enviarte un mensaje navegando por tu web. Esto resulta muy útil en formularios que tienen que ver con ventas y contacto con el cliente, puesto que saber las rutas, palabras clave y demás datos de aquellos que nos han contactado interesados en comprar, podemos vislumbrar que es una fuente importantísima de datos.
Pues bien, para hacer esto, tenemos que añadir un código extra en el campo “additional settings” de Contact Form 7:
on_sent_ok: "pageTracker._trackPageview('/gracias.html');" O este otro si utilizas el código asincrónico de Analytics
on_sent_ok: "_gaq.push(['_trackPageview', '/gracias.html']);"
A partir de entonces, cuando alguien te envíe un mensaje desde el formulario de WordPress, Analytics lo registrará como un acceso a gracias.html.
Autorespondedor automático con Contact Form 7 de WordPress
Los autorrespondedores son muy útiles para hacerle saber al visitante que hemos recibido su mensaje correctamente, darle un feedback rápido y un poco más personalizado.
Para configurar un autorespondedor en Contact Form 7, de forma que cuando alguien te envíe un mensaje a través del formulario, le llegue una respuesta automática a su correo (por ejemplo para darle las gracias, decirle que recibirá una respuesta en breve, etc.), simplemente rellenamos el segundo bloque de correo (correo 2) de forma que se le envíe un correo a la persona que nos contactó. Es decir, los campos los rellenaríamos con algo parecido a esto:
Correo 2
Para: [your-email] De: Pepita Pérez <hola@pepitaperez.es> Asunto: Mensaje recibido en pepitaperez.es Cuerpo del mensaje: Hola [your-name], He recibido correctamente tu mensaje solicitándome tal cosa. En breve recibirás una respuesta en esta dirección de correo: <[your-email]> Los detalles de tu mensaje: [your-message] Gracias por contactar conmigo. Un saludo, Pepita Pérez.
Donde Pepita Pérez eres tú, hola@pepitaperez.es tu propio correo y pepitaperez.es tu web.
Formulario de contacto en el sidebar de WordPress
A veces uno quiere poner un formulario de contacto en el menú de su web, en lugar de simplemente en un post o página. El código normal que te da la página de configuración de Contact Form 7, el típico Error: Formulario de contacto no encontrado.
Para solucionar este problema, a mí me ha funcionado perfectamente este código:
<?php echo do_shortcode('Error: Formulario de contacto no encontrado.
'); ?> Directamente pegado en el archivo sidebar.php.
Poner un captcha a Contact Form 7 de WordPress
Se puede poner un captcha a los formularios que uses en WordPress, pero para configurarlo debes tener instalado también el plugin really simple captcha. Una vez lo instales, se hace lo siguiente:
Las imagens del captcha se guardan en tu carpeta de arhichos subidos, que por defecto es /uploads, pero como sabrás se puede configurar desde las opciones de WordPress (ajustes > multimedia). Las guarda por defecto en wp-contents/uploads/wpcf7_captcha, aunque esta ruta se puede modificar poniendo la siguiente linea en tu archivo wp-config.php:
define( 'WPCF7_CAPTCHA_TMP_DIR', '/your/file/path' );
Ahora sí, para poner el captcha incluimos este campo en el formulario:
[captchac captcha-1] [captchar captcha-1]
Captchac y captchar deben tener el mismo id para que funcione. Tiene varias configuraciones adicionales que puedes ver en la página del plugin.
Subida de archivos para tus formularios con Contact Form 7
También puedes poner un campo para que el visitante pueda enviarte archivos cuando te mande un correo a través del formulario. Este tipo de campos es necesario restringirlos un poco por temas de seguridad, principalmente el tipo de archivos permitidos, pero el tamaño máximo también es interesante controlarlo. Algunos ejemplos útiles:
[file your-file filetypes:pdf|txt limit:2mb]
De todas maneras, este plugin trae por defecto ciertas limitaciones al tipo de archivos permitido y el tamaño, para hacer más seguro el envío de formularios a través del plugin. Por defecto, acepta archivos con extensión jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. Y el tamaño permitido por defecto es de 1 MB.
Como con el anterior código, los archivos subidos se guardan por defecto en wp-contents/uploads/wpcf7_captcha, pero puedes modificar la ruta donde se suben los archivos, editando el archivo wp-config.php:
define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );
A parte, en el bloque de correo, hay que poner dentro del campo de archivos adjuntos, lo siguiente para que te lleguen al correo:
[your-files]
Añadir cc, bcc y cco (con copia y copia oculta) a los formularios de WordPress
Esto es sencillísmimo, simplemente en el bloque de Correo, le añadimos unas líneas de código dentro de additional headers:
Cc: concopia@correo.com Bcc: copiaoculta@correo.com Cco: copiaoculta@correo.com
Deshabilitar la carga de js o css de Contact Form 7 en el header de WordPress
Esto para mí es bastante útil, ya que Contact Form 7 carga jQuery desde los archivos de tu instalación de WordPress y yo prefiero cargarlos desde el CDN de Google. Además, carga una hoja de estilos independiente para los estilos del formulario, yo prefiero incluir los estilos en la hoja de estilos general del sitio. Estas dos sencillas prácticas, me permiten ahorrar ancho de banda, peticiones del servidor y mejorar la velocidad de carga de la página web.
Para evitar que Contact Form 7 cargue los archivos js y css, ponemos estas líneas de código en el archivo wp-config.php:
define ('WPCF7_LOAD_JS', false); // deshabilita la carga de JS
define ('WPCF7_LOAD_CSS', false); // deshabilita la carga de CSS De momento estos códigos útiles, si encuentro alguno más mientras trabajo lo compartiré con vosotros.
modificado el 13 octubre, 2017 0:55
Ver comentarios (47)
Hola,
Quiero hacer que contact form7 no se cargue siempre para hacer mi web más rápida, pero no sé donde tengo que insertar el código que propones, ni si solamente es eso lo que tengo que poner.
1 define ('WPCF7_LOAD_JS', false); // deshabilita la carga de JS
2 define ('WPCF7_LOAD_CSS', false); // deshabilita la carga de CSS
Gracias
Hola Isabel,
Ese código se pone en el archivo wp-config.php de tu instalación de WordPress. Puedes ponerlo después de que finalice el último "define" que tenga tu archivo.
Con eso debería ser suficiente para que no cargue los js y css asociados al plugin.
Tienes más información en la página del plugin si te interesa:
https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/
https://contactform7.com/controlling-behavior-by-setting-constants/
Saludos!
Hola buenas, tengo una duda, me gustaría saber si hay alguna manera de reenviar la información del formulario a la persona que lo rellena además del destinatario normal.
Hola Chema,
Sí, en la pestaña de correo electrónico, abajo del todo, si seleccionas la casilla del segundo email, ahí puedes configurar un autorrespondedor que se envíe al email de la persona que está contactando contigo con el mensaje que quieras.
Hola! tengo un dilema que debería ser simple pero no encuentro la solución.
En un formulario CF7 los usuarios solicitan semillas, tenemos 22 variedades y cada una tiene su nombre y un campo número para indicar cuántas quieren. Hasta ahí bien.
El problema viene al configurar el correo, los campos numéricos los muestra correctamente (sólo aquellos que se han rellenado) pero necesito que aparezca también cada nombre (sólo de los pedidos, no los 22) y no sé cómo hacerlo.
Espero se entienda y puedan ayudarme! Gracias
Hola Isabel,
Si te estoy entendiendo bien, creo que igual podrías usar checkboxes para las variedades de semillas (https://contactform7.com/checkboxes-radio-buttons-and-menus/), de forma que el cliente seleccione sólo las que quiera.
O simplemente, si dices que tienes un campo numérico para cada semilla que te está funcionando bien, ¿por qué no lo simplificas? podrías fusionar los dos campos en uno. Me explico, renombra los campos numéricos y pon algo así como "Variedad X, cantidad". Entonces ya tendrás en tu correo sólo los nombres de las semillas que han pedido.
Espero que te sirvan las ideas.
Saludos.
Hola!!
Me pregunto si me podrías ayudar a resolver mi problema :(
Ya he creado mi formulario con contact form 7. Sin embargo no recibo en mi email las opciones que el cliente selecciona en el desplegable.
Qué estoy haciendo mal??
Hola Teresa,
Para recibir las respuestas que da un usuario, tienes que mandarte un email. Eso lo configuras en la pestana de "correo electrónico". Si vas hacia abajo verás la opción de mandar un segundo email, ese es el que puedes usar para enviarte las respuestas a tu correo cada vez que alguien rellena un formulario.
Saludos!
Tuve el problema de que si enviaba los mensajes pero no aparecía : su mensaje ha sido enviado", luego entonces seguian enviando mensajes. Lo solucione con el código en el wp config : Deshabilitar la carga de js o css de Contact Form 7 en el header de WordPress! Gracias, muy bueno en 2017.
Hola, buenos trucos.
Existe manera de agregarle un Número de serie cada que alguien nos contacte?
Me explico, si un usuario diligencia el formulario de contacto, más allá de los campos diligenciados llegue un campo extra que le asigne un número identificador o número de serie a ese nuevo contacto. Como cuando se hacen los ticket de soporte que se asigna un número de ticket.
Hola!
Muchas gracias por tus indicaciones. Tengo un problema que no puedo solucionar: no visualizo lo que escribo en los campos de texto del Contat Form 7 desde los dispositivos móviles. Cuando escribo no se ve lo que he escrito y en el área de texto del mensaje, las letras aparecen en vertical.
¿Podrías darme alguna indicación? Muchas gracias!!!
Hola, Tengo una duda, como creo un campo numérico pero automático en un formulario de contacto en WordPress
Muchas gracias
Hola buen aporte, estoy trabajando en un proyecto personal y deseo modificar la longitud de las cajas del formulario sabes como hacer llevo días tratando de hacer lo no logro ubicarlo me puedes dar una mano? GRACIAS!!!
Excelente agradecido por el dato. He configurado todo y ha salido de maravilla pero al adjuntar dos archivos sólo me llega uno que puedo hacer para que llegue dos, son dos imágenes o pdf y aparece el nombre del archivo ósea que se adjunto pero no veo si no un archivo
Hola:
He creado un formulario de contacto con ContactForm7 v. 4.1.2 y todo va bien excepto que en la versión para móvil no aparece el formulario (utilizo Jetpack) y ya active y desactive su propio formulario y nada.
Agradezco su ayuda
Buenos días,tengo wrodpress con el tema VERTIKAL, uso el Form 7, al comienzo estaba configurado como servidor de correo RoundCube y funcionaba, es decir, la gente entraba a mi pagina, usabe le formulario de contacto y desde alli me enviaba el mensaje que quería.
Por mejorar el servdor, pase de roundcueb a gmail, usando los servicios de Google Apps for Work, el problema es que ahora los mails enviados a mi cuenta desde el formulario Contact Form 7 nunca llegan.
Cómo se configura el formulario o la pagina para que vuelva a funcionara? muchas gracias por tu ayuda.
Sera posible hacer que el formulario envie por correo la suma de dos de los campos?
EJ:
campo 1: peso
campo 2: edad
y que por correo llegue unicamente el resultado de peso+edad?
Gracias
Buenos días!!
Tengo este pluging instalado pero una vez pulso el boton de enviar no sale el mensaje de enviado y por eso me llegan 7 u 8 mensajes iguales
¿qué puedo hacer?
Muchísimas gracias!
MUy bueno tu tutorial,
Quisiera preguntarte algo que me viene dando muchas vueltas. y no he logrado hacerlo con Contact Form7.
Si utilizas un solo formulario para varias paginas en tu wordpress
¿Como puedo hacer para el Email me indique desde cual pagina fue enviado el formulario?
Cada pagina es un paquete de viajes que usa un mismo formulario de contacto, pero en los mensajes solo podemos colocar las etiquetas que nos deja crear el plugin.
Hola! muchas gracias por la información! es muy util.
Una pregunta a ver si a alguien le ha pasado...
Hoy derrepente, tras unos meses de utilizar este formulario han empezado a llegarme muchos mensajes que parecen dirigidos a otras páginas.
El asunto viene como encriptado, pero los textos parecen bastante coherentes... ymuchos parece que fueran a una tienda de reparación de electrónica (lo mío es un centro de psicología). parece como un "cruce"... aunque también puede ser simple spam... pero es raro porque normalmente entra 1 mail de spam a la semana y hoy llevo 20 mails de este tipo.
no se si puede tener algo que ver el plugin. ¿os ha pasado alguna vez?
gracias!
Hola. Me gustaría modificar el ancho y alto de los campos de entrada de texto en este formulario pero no sé cómo hacerlo, por favor si alguien me pudiera ayudar
Hola... felicidades por el artículo !!!... quisiera saber si contact form 7 puede colocar seleccion de listas desplegables.... por ejemplo... si quiero que el suscriptor elija en cual ciudad vive.... gracias
Hola,
Tengo un wordpress 3.6 y he instalado el plugin ContactForm7 3.6
Lo he configurado siguiendo los paso a paso de varias paginas y he copiado el código en una pagina de mi wordpress (una solapa de mi web), sin embargo cuando ingreso a la pagina solo me muestra un titulo "Contacto..." y no carga ningún formulario (ningún combo, ningún botón, nada).
Alguien podría ayudarme...
Gracias.
Vanesa
Hola, uso este plugin pero me encuentro con el problema de los campos tipo date, cuando los carga en chrome va de lujo, ya que muestra el calendario, pero cuando los carga en iexplorer o firefox muestra un campo texto en el que hay que introducir la fecha en formato aaaa-mm-dd, ¿sabes si esto se puede personalizar ? ¿ se podría hacer una condición para que en caso de no ser chrome en vez de cargar un campo tipo date cargue un campo text ?
Un saludo.