comparte el articulo 

Códigos útiles si creas formularios con Contact Form 7 de WordPress

Actualizado el 14/09/2010 < > 33 Cometarios

Resumen: 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 [contact-form-7 404 "Not Found"], no es posible usarlo en el sidebar porque no funciona.

Para solucionar este problema, a mí me ha funcionado perfectamente este código:

<?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>

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.

Publicado el 14/09/2010, última actualización 14/09/2010.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que reconozcas al autor, mantengas los enlaces que hay dentro del artículo y pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica Milán

URL: Códigos útiles para tus formularios con Contact Form 7 en WordPress

Añadir Comentario (Subir al texto)

33 Cometarios

  1. Mauro

    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.

    Lunes, 27 de septiembre 2010

  2. Verónica Milán

    Mauro,

    Dale estilo al formulario con tus css… tienes algunos artículos en lawebera con ejemplos: http://www.lawebera.es/comunidad/articulos/diseno-web/css/diseno-de-formularios-con-css.php

    Saludos.

    Viernes, 1 de octubre 2010

  3. angel

    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

    Sábado, 13 de noviembre 2010

  4. ideas

    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 envien fotos que es para lo que yo lo uso y me gustaria ampliarlo a 2 o 3 megas el tamaño maximo.

    Gracias.

    Domingo, 14 de noviembre 2010

  5. Verónica Milán

    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.

    Lunes, 15 de noviembre 2010

  6. Chris

    Hola Verónica. No tuviste problemas con wordpress 3.0.1 (si es que usas esa versión) para insertar el fomrulario?.
    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.

    Lunes, 22 de noviembre 2010

  7. David

    Todavía no he conseguido que me funcione el tema de Google Analytics en el formulario..

    Copio y pego el codigo y no funciona.

    Martes, 25 de enero 2011

  8. Ezkielnet

    Uso mucho este plugin en mis páginas y no sabía que se podía personalizar tanto. Probare algunos códigos.

    Martes, 2 de agosto 2011

  9. Luis

    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

    Viernes, 7 de octubre 2011

  10. juana

    existe alguna forma o alguna extension para manejar comboBox dependientes?

    Miércoles, 9 de mayo 2012

  11. José

    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

    Miércoles, 30 de mayo 2012

  12. Iván

    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

    Jueves, 2 de agosto 2012

  13. Ruben

    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

    Domingo, 19 de agosto 2012

  14. PC-SERVEIS, Diseño y Presupuesto Web

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

    Lunes, 5 de noviembre 2012

  15. oswaldo

    Miles de millones de gracias Verónica, me sirvió muchísimo. Bendiciones.

    Domingo, 13 de enero 2013

  16. Samuel

    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. ¿Si existe manera de cambiar la dirección de correo a la cual se envían los mensajes de los usuarios?

    Miércoles, 27 de febrero 2013

  17. RafaCI

    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

    Viernes, 1 de marzo 2013

  18. Guillermo

    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

    Martes, 4 de junio 2013

  19. Andrés

    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?

    Sábado, 22 de junio 2013

  20. Samuel

    Muy interesante este earticulo me ha servido muchisimo

    Lunes, 24 de junio 2013

  21. Agus

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

    Jueves, 25 de julio 2013

  22. RaulDaguiler

    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?

    Lunes, 16 de septiembre 2013

  23. Martn B

    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!

    Sábado, 7 de diciembre 2013

  24. isidro

    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.

    Miércoles, 15 de enero 2014

  25. Vanesa

    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

    Martes, 28 de enero 2014

  26. antonio

    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!

    Martes, 17 de junio 2014

  27. Miguel

    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.

    Viernes, 20 de junio 2014

  28. verónica

    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!

    Jueves, 16 de octubre 2014

  29. carlos

    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

    Lunes, 17 de noviembre 2014

  30. FERNANDO

    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.

    Sábado, 25 de abril 2015

  31. Alejandro

    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

    Sábado, 23 de mayo 2015

  32. Jonathan Rojas

    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

    Miércoles, 10 de junio 2015

  33. Alex

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

    Viernes, 31 de julio 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras