Códigos útiles si creas formularios con Contact Form 7 de WordPress
(2 votos, promedio: 4,00 de 5)
Cargando...Si gestionas tus formularios en WordPress con Contact Form 7 este post te va a ser realmente útil para dar un paso más en la personalización de sus funciones y conocer las posibilidades de este plugin.
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.
47 respuestas
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.
Me sumo a la consulta de RafaCI: también quiero saber cómo poner un campo al lado de otro, y no debajo. Muuuuy bueno el post!
ES muy útil este tutorial, a ver si se puede hacer ésto que pretendo con Contact Form7… presendo poner un menu desplegable, y con cada una de las opciones del desplegable que se me abra una caja de texto con una descripción concreta. Por ejemplo, si elijo la opción 1 se despliega una caja de texto 1, si despliego la opción 2 se despliega la caja de texto 2… es ésto posible?
Hola!
¿Hay alguna forma de modificar el parámetro action del form? Lo digo porque me gustaría que al enviar el formulario pudiera recibirlo en una página creada por mi en php.
Gracias!!
Muy interesante este earticulo me ha servido muchisimo
He creado formularios con Contact Form 7, y cuando envía el correo 2 (el autorrespondedor automático) aparece como remitente Wordpress. ¿Como puedo hacer que aparezca mi nombre?
Muchas gracias por el post, me ha sido de gran ayuda. Me queda una duda por resolver.
Contact Form 7 almacena los datos de los correos que me llegan a través del formulario en una base de datos? en caso de que no sea así, es posible crear una base de datos que almacene de forma automática los datos de los remitentes (nombre, email, telefono, etc)?
Gracias
Tengo un formulario donde me aparecen 3 campos uno encima del otro, y quiero que aparezcan uno a continuación del otro (en fila en lugar de en columna).
He probado con tablas, pero el estilo de mi tema de WP aparece y queda un formulario de contacto bastante feo. Cómo puedo hacerlo?
Gracias
Hola, La información del post me ha resultado sumamente útil. Solo tengo una duda.
Dentro de mi FS Contact Form, me manda los mensajes a una dirección de correo que tenía en Webmail; que migré a Gmail. ¿Existe manera de cambiar la dirección de correo a la cual se envían los mensajes de los usuarios?
Miles de millones de gracias Verónica, me sirvió muchísimo.
Muchas Gracias por tu Publicación!!
Tengo una duda que no encuentro por ningún sitio…
Alguien sabe cuál es el código que debemos implementar para añadir el plugin SI CAPTCHA de wordpress en otras páginas y que funcione correctamente?
En mi caso, tengo una página de contacto personalizada en mi blog para que los usuarios realicen directamente un presupuesto web y obtener un coste aproximado de su web y deseo añadir este código captcha al final del formulario pero no encuentro cuál es el código fuente que debo poner…
Gracias por adelantado a todos ;)
Un saludo desde Barcelona ! !
Buenas, gracias por las publicaciones, pero tengo un problema con las cajas que hay que rellenar, ya que el color de las mismas están en blanco igual que el fondo de la pagina, y me gustaría saber como poner un borde a las mismas, para que estas se vean, ya que de la otra forma hay que imaginarse donde están.
gracias
Muchas gracias por la información, me acabo de pasar a este plugin ya que el anterior que usaba no me permitía la respuesta automática, y con tus indicaciones lo he solucionado.
Gracias
Buenos días,
¿Hay alguna forma de saber desde que página se envían los contactos?. Si tengo el mismo formulario en distintas páginas, por ejemplo, tres modelos de armarios distintos, ¿Cómo puedo saber a que armario se está refiriendo? ¿Se puede poner algún código que me lo diga?
Gracias
existe alguna forma o alguna extensión para manejar comboBox dependientes?
He creado una web con Wordpress en otro dominio y he puesto este formulario de contacto. El problema que tengo es el siguiente:
Los emails enviados a traves de ese formulario, SI llegan a su destinatario, pero no sale ningún mensaje que diga algo así como “Mensaje enviado” o “Rellene todos los campos”, etc… simplemente se queda la imagen “ajax-loader” girando constantemente.
Repito los mensajes si llegan.
Alguien puede indicarme como solucionar esto. Gracias y un saludo
Uso mucho este plugin en mis páginas y no sabía que se podía personalizar tanto. Probaré algunos códigos.
Todavía no he conseguido que me funcione el tema de Google Analytics en el formulario.
Copio y pego el codigo y no funciona.
Hola Verónica. No tuviste problemas con Wordpress 3.0.1 (si es que usas esa versión) para insertar el formulario?.
No consigo insertarlo. Lo he activado y copiado el código que da entre corchetes, todo por defecto, para pegarlo en la página contacto pero no me muestra nada. Es posible que me salte algún paso, porque según la instrucciones de instalación es simplemente esto lo que hay que hacer y no consigo insertarlo.
Saludos.
¿Como se le puede quitar el limite de 1 mega a los archivos adjuntos? 1 Mega me parece muy poco si lo quieres para que te envíen fotos, que es para lo que yo lo uso y me gustaría ampliarlo a 2 o 3 megas el tamaño máximo.
Gracias.
Ideas, depende de para lo que quieras las fotos, si son para web no deberían pesar ni 1MB, si son para uso personal ya es otra historia.
Guau, pues no conocía yo este plugin. El otro día me instalé uno que se llama CForms, pero creo que este es mucho más potente.
Lo que yo busco, es también una utilidad que haga que los datos de todos los contactos que te lleguen, se guarden en base de datos.
Es posible con este plugin ¿?
Gracias
Hola!
Muy útiles tus consejos.
No sé si puedas ayudarme con este asuntillo: resulta que al poner en forma horizontal el texto “mensaje:” al lado del textarea que hice, este texto queda alineado con la linea inferior del área de texto y no en la superior, como sí lo hace con “Nombre:” y “Correo:”.
No sé si se entiende la idea.
Ojalá tengas alguna noción de como resolver esto.
Gracias.
Mauro,
Dale estilo al formulario con tus css… tienes algunos artículos en lawebera con ejemplos: https://www.lawebera.es/xhtml-css/crear-formularios-html-css.php
Saludos.