Formulario de Contacto con Contact Form 7 para WordPress

Hace un tiempo puse en funcionamiento el formulario de contacto en el blog.

Para esto recurrí a un plugin del que poco había escuchado pero que me ha resultado bastante cómodo y flexible. El plugin en cuestión se llama Contact Form 7.

Una vez instalado, vamos a tener una nueva opción dentro de nuestro menú de herramientas.

Acceso a la configuración de Contact Form 7

Al acceder al plugin, vamos a ver todas las posibilidades que ofrece éste plugin.

Panel de Contact Form 7

Las opciones son varias, así que vamos a revisar bloque por bloque para entender un poco mejor de qué se trata.

El primer bloque, los detalles de nuestro formulario.

Detalles de nuestro formulario

Lo que vemos, es, además del nombre que lo identifica, el código que más tarde tendremos que usar.

El segundo bloque es el que nos permite componer nuestro formulario. Basicamente es html puro, pero se le agregan algunos tags que el plugin se encargará de manejar.

Composición del formulario

Inicialmente, no vamos a tener idea de cuáles tags deberemos usar.

Para ayudarnos, tenemos a la derecha, un generador de tags según el tipo de campo que busquemos implementar.

Generación automática de tags de Contact Form 7

El tercer bloque es el de configuración del mensaje en si mismo. Vamos a poder establecer la direccción a la que se enviará el mail, así como el formato del remitente. También podremos agregar texto al mensaje que nos escriban y podremos configurar si queremos que se acepten tags html.

Estructura del mensaje

Contamos con la posibilidad de enviar un segundo mail. En éste cuarto bloque tendremos las mismas opción que en el caso anterior (sólo si deseamos actviarlo).

Segundo destinatario para los mensajes

Luego tenemos la posibilidad de configurar cada uno de los mensajes que se utilizan al procesar el formulario. Estos son los mensajes por defecto.

Personalización de mensajes en Contact Form 7

Una vez que hayamos configurado todas las cuestiones de nuestro formulario, podremos grabar y vamos a ver algo similar a ésto debajo del nombre de nuestro formulario.

Código del formulario

Como bien indica la leyenda, vamos a tener que copiar ese código para poder usarlo dentro de una página.

Para activarlo, sólo tenemos que ir a la página (o post… en mi caso es página) en la que queremos usar el formulario y pegar el código que vimos recién.

Aplicando el formulario en nuestra página

Ahora si, grabamos nuestra página y el resultado que obtendremos sería algo como esto.

Formulario publicado con Contact Form 7

Un plugin sencillo, flexible y efectivo.

A lo mejor te interese leer

This entry was posted in Wordpress and tagged , , . Bookmark the permalink.

71 Responses to Formulario de Contacto con Contact Form 7 para WordPress

  1. asier says:

    Hola Damian, la verdad es que suponía que sería así de sencillo, pero no sé porqué a mí no me funciona. Me dice que la página /contacto/ no se encuentra…

    ¿Alguna solución?

  2. Damián says:

    La verdad que no se me ocurre por qué falla.
    En mi caso, simplemente creé la página, la habilité.
    Luego, le puse el nombre y en el contenido pegué el tag del plugin.
    Nada más.

    ¿Puede ser que hayas hehco algo diferente o que tu skin esté trayendo algún problema?

  3. asier says:

    Después de probar varias soluciones, retocar código, etc. he conseguido que funcione!!
    Pero me ha costado lo suyo, he tenido que modificar cosas. Gracias de todas formas por tu pronta respuesta.
    Un saludo.

  4. Fede says:

    Gracias Damián por esta explicación, me fué muy útil.

  5. Filot says:

    Estoy utilizando este plugin en uno de mis blog, he creado una sección de categorías con la opción “Drop down Menu”, el formulario funciona al 100%, pero lo que no logro saber cual es la sintaxi en “Message body:”, para que me llegue al email la categoría que el usuario ha seleccionado, no se si me explico..
    les agradecería infinitamente si me escribieran la solución.
    saludos.

  6. Damián says:

    @Filot

    Cuando creás un dropdown, te genera un código como el siguiente:

    [select menu-68 include_blank "opción 1" "opción 2" "opción 3"]

    Ese código lo ubicás en donde te quede más cómodo según tu diseño de formulario.
    Luego, en el Message body, vas a ver que por defecto tenés escrito:

    [your-message]

    Probá agregando, debajo de ese tag, lo siguiente:

    [menu-68]

    Si prestás atención en este ejemplo, menu-68 es el nombre que se le agrega como nombre al select/dropdown. Luego, llamando sólo por el nombre del elemento en el cuerpo del mensaje, lo vas a tener disponible en tu mail.

    Saludos.

  7. Filot says:

    Mil gracias por la respuesta, ya solucione ;)

  8. juano says:

    hola, lo he podido hacer andar pero no me envia los adjuntos. alguna solución?

  9. Paula says:

    Gracias Damián! Gracias a la respuesta que le diste a Filot pude solucionar el tema de la recepción de todos los campos.

  10. Javier says:

    Hola Damián, ya se que llego tarde pero estoy desesperado. El plugin es muy sencillo de configurar, pero no recibo el mail. Aparece el mensaje de que ha sido enviado correctamente, pero no llega. También he probado a cambiar el tema por si era eso, puse el que viene por defecto y nada.
    Te agradecería un montón tu ayuda.
    Nota: Puedes ver lo que tengo montado en http://turainur.arredemo.org/applys
    Un saludo, Javier.

  11. Damián says:

    @Javier

    ¿Podés confirmar que el envío de mails vía Php está habilitado en tu servidor?
    Por otra parte, el link que pasaste lleva a una 404.

  12. Javier says:

    Damián, ya esta arreglado perdon. En cuento al envío, lo compruebo ahora

  13. Javier says:

    Me temo que no esta habilitado el envio por mail, me voy a poner en contacto con el hosting a ver que pasa. Ya se sabe, al ser hosting gratis :(

  14. Damián says:

    @Javier

    ¿No te conviene, en este caso, sacar una cuenta en wordpres.com?

  15. Javier says:

    ¿Te refieres a poner el blog en el hosting de wordpress?
    El problema son los plugins, themes y demás. Prefiero ser independiente.
    Cuando me respondan los del hosting, te digo.
    ¿Prefieres que lo haga por estos comentarios o por formulario de contacto?
    Muchas gracias por todo Damián.

  16. Damián says:

    @Javier

    Algo tarde, pero termino de contestar.
    Me refería puntualmente por los temas del hosting, pero, definitivamente, el tema de los plugins y la libertad de instalar lo que mejor te convenga, hace que el hosting propio sea una mejor elección.
    Saludos.

  17. kris says:

    instale el contact form 7 como lo he hecho en un par de paginas pero esta ves en esta actualie a wordpress 2.8, y juas!! no funciona bine el formulario, envia el correo pero en blanco o aveces solo el text area… que podre hacer???

  18. Damián says:

    @kris

    No sabría decirte, hasta ahora no me ha pasado nunca.
    Han habido algunos reportes en los foros oficiales, pero no es regla general.
    Quizás debieras darte una vuelta para ver si alguien aporta una solución a un escenario similar al tuyo.

  19. Andres says:

    Cómo logro que al enviar los datos ingresados en un formulario hecho con Contact Form 7 me redirija a una página de confirmación, donde quiero colocar varios textos legales, etc. es posible? Agradezco tu respuesta.

  20. Damián says:

    @Andres

    Entiendo que es no es posible con el plugin, al menos no es un comportamiento por defecto ni es configurable.
    Saludos.

  21. Gastón says:

    Hola Damian, estuve leyendo arriba a cerca de la configuracion del contacform7, yo tengo el mismo problema que Filot, pero aun haciendo las correctiones que mencionas luego, aun sigo sin recibir por mail cualquier campo que le agregue al formulario, ya sea de texto, casilla de verificación etc, lo unico que me llega bien son aquellos que vienen predeterminado por el formlario, te agradeceré mucho tu ayuda.

    Un Saludo Grande
    Gastón

  22. Damián says:

    @Gastón

    ¿Podés pegar el codigo que te genera para tu formulario?.
    Sino, podés enviarmelo a través del formulario de contacto del blog.

  23. Gastón says:

    Damian, muchas gracias por tu atención, ya lo solucione, de paso te realizo otra consulta, cuando uno completa el formulario en la web, quien hace la consulta recibe un mail?. o sea el remitente?. En caso de ser asi no puedo hacer que se reciban los mails.

  24. Damián says:

    @Gastón

    Por defecto no, pero podrias usar las opciones de mail2 del formulario.
    Hago un paréntesis, y quiero hacer referencia tanto a tu último comentario, como al de @Filot.
    Si tuvieron un problema, se les trató de brindar ayuda, y pudieron resolverlo por su cuenta; es más interesante que cuenten el problema y cómo lo resolvieron que decir que ya está solucionado.
    Esto podria colaborar con el próximo que lea el post y/o los comentarios.
    Quizás, si @Filot lo hubiera hecho, vos hubieras podido resolver el tema más rápido. ¿No?.
    Saludos.

  25. Ruben says:

    Buenas tardes Damian, soy bastante nuevo en esto, pero he conseguido que me funcione todo a la primera, increible el plugin, es bastante sencillo. Pero me gustaría poder hacer una cosa .. y no me aclaro.
    A la hora de que el usuario rellene el formulario, me gustaria que tuviese un desplegable en el que pudiese seleccionar de una lista quien lo recibe, ejemplo: enviar a: Administracion, gerencia, etc etc..
    Hay posibilidad de hacer esto?… he estado hechando un vistazo y no me aclaro. Gracias de antemano

  26. Ruben says:

    Lo siento , pero no me queda claro del todo, … ¿donde especifico las distintas direcciones de correo de los destinatarios? donde coloco el menu 68 ??.. Sorry.

  27. Damián says:

    Entiendo que puede hacerse, poniendo como dirección del destinatario (en el formulario que se encuentra debajo del que usás para componer tu formulario) el nombre del select, poniéndolo entre [ ].
    Lo que no he visto que pueda hacerse (reconozco que no he investigado en detalle), es que te ponga una opción que sea, siguiendo tu ejemplo: Administración, y que eso se envié a una cuenta de mail determinada.
    Saludos.

  28. Linea36 says:

    Pues yo lo e descargado y guardado en el directorio wp-content/Plugins y no me sale en el apartado de tools, lo mismo me e equivocado o algo

  29. Damián says:

    @Linea36

    ¿Tenés el plugin en el siguiente directorio: /wp-content/plugins/contact-form-7?
    ¿Es posible que estés con algún problema de permisos en los archivos y que por ese motivo WordPress no pueda levantarlos?

  30. Linea36 says:

    tengo el plugin en el directorio wp-content/plugins/contact-form-7, con la segunda respuesta no se a lo que te refieres.

  31. Damián says:

    @Linea36

    Lo único que se me ocurre preguntarte, segun lo que describiste, es si has ido a Plugins y lo activaste.

  32. Linea36 says:

    entro en lo de plugins pero no me aparece nada con ese nombre para activar

  33. Linea36 says:

    Solucionado el problema, entre en la seccion de Plugins buesque el plugin contact-form-7 y me lo descargue directamente desde internet.

  34. Marcelo says:

    He cargado el plugin, me sale el formulario pero no me llagan los correos me pueden ayudar por favor.

  35. Damián says:

    @Marcelo

    ¿Has hecho un chequeo de las configuraciones, la cuenta a la que se envía el mail o si el envío de mails (desde php) funciona correctamente en tu servidor?.
    Saludos.

  36. Marcelo says:

    Damiá, ya revisé las configuraciones y voy a consultar al hosting sobre el envio de mail en php.
    No me aparece tool, la opción de contact form 7, y los tag a la derecha tampoco, a que se puede deber.

    Gracias

  37. Rafa says:

    Hola, estoy probando el Plugin y me funciona bien. Sólo tengo un problema que no soy capaz de solucionar. No me envía los archivos adjuntos!!!

    Cuando creo un campo para que suba archivos al servidor o los mande por mail, luego a la hora de rellener el forrmulario todo va perfecto incluso seleccionas el archivo y todo y te da el ok de mensaje enviado, pero ni en el correo ni en la carpeta del servidor se encuentran esos archivos.

    ¿Alguien le ha pasado y lo ha solucionado? Gracias.

  38. Damián says:

    @Rafa

    Es bastante sencillo, en breve la solución paso a paso en otro post.
    Saludos.

  39. Marcelo says:

    Damian en el hosting me dicen que esta todo ok, pero los correos no llegan

  40. Claudia says:

    con que sentencias puedo configurar el recibo del mensaje que envian desde el formulario contact form 7… ej.

    Nombre: ” ”
    Telefono: ” ”
    Edad: ” ”

    En este momento llega toda la informacion junta como un solo parrafo.

  41. Damián says:

    @Claudia

    No estoy seguro de comprender la consulta.
    ¿Vos querés que haya campos adicionales con datos y que aparezcan dentro del cuerpo del mensaje o que se utilize una especie de plantilla para el cuerpo del mensaje?.
    Saludos.

  42. RenaticO says:

    Con respecto a lo de claudia, es porque no habilita el HTML Content Type. Listo problema solucionado, no me lo distraigas.
    Ahora si, Damian, el problema que tengo es que no me llega el correo de la persona que me escribe, a su correo si le llega la respuesta (correo 2), pero a mi me llega en el campo “de” mi propio correo… he tenido que poner en el asunto la etiqueta [your-email] para saber siquiera quien me escribe, pero si quiero responder, me sale por defecto mi propio correo.
    Será que estou usando el SMTP de gmail, pero ese problema no lo tengo ni con los avisos de comentarios por aprobar.
    Debería salirme: de Emisor en nombre de
    Pero me sale: de Emisor en nombre de

  43. Damián says:

    @RenaticO

    Me ha causado algo de gracia tu mensaje a Claudia, pero tu solución es válida.
    Con respecto a tu problema, en el campo From/De, tendrías que tener lo siguiente: [your-name] < [your-email]>
    Esos tags han de responder a dos campos de tu formulario:
    - [email* your-email id:your-email]
    - [text* your-name id:your-name]

    Si cambiaste los nombres, deberías adecuarlos.
    ¿Es posible que tengas mal alguna referencia entre el nombre del campo en el formulario y las variables que estás usando?.

    Saludos.

  44. Rubi says:

    Hola Damián he instalado este plugin en contacto en mi blog pero a la hora de enviar el formulario me dice “error intentelo más tarde o contacte con el administrador más tarde” sabes porque puede ser??

    Saludos y excelente trabajo ;)

  45. Damián says:

    @Rubi

    ¿El mensaje que te muestra tiene algún color en los bordes?.
    Si muestra el mensaje con rojo, el problema es del servidor de correo. Deberías hablar con el administrador del sitio y/o hacer una prueba independiente fuera de wordpress. (Podria subir un archivo php para probar la función mail).
    Si el mensaje se muestra con color amarillo, es que Akismet lo considera spam.
    Saludos.

  46. Marco says:

    Donde encuentro ese post para poder ver la solución, espero vuestra respuesta, michas gracias por tu buena voluntad.

  47. Damián says:

    @Marco

    Me tomé la libertad de quitar algunas cosas del comentario (las referencias a los otros comentarios).
    Si te fijas entre el post y el comienzo de los comentarios, vas a encontrar posts sugeridos, y ahi vas a ver lo qeu buscás.
    Caso contrario, hacé una búsqueda de Contact Form 7 en el blog y también lo vas a ver.
    Como último recurso, éste es el link: http://www.damianculotta.com.ar/2009/08/20/contact-form-7-y-los-archivos-adjuntos/
    Saludos.

  48. Marco says:

    Damián, muchas gracias por tu pronta respuesta
    ya observé cual era mi error y estoy agradecido, pues confundí el código creado [file file-820] para ser agregado a Archivos adjuntos: copiaba el mismo sin eliminar [file] quedando solamente [file-820]
    ahora me llegan los adjuntos.

    Pero tengo otra duda, al agregar un textarea o area de texto es demasiado grande comparado con los campos de texto ejemplo:
    http://www.cenhpa.cl/portal/?page_id=24
    es posible manipular ese textarea para que quede menos alto?, pues en el stylesheet.css no encuentro como cambiarlo, hice algunos cambios en span.wpcf7-form-control-wrap dentro de css, pero no me cambia nada, muchas gracias nuevamente

  49. Damián says:

    @Marco

    Algo tarde, pero igual te respondo.
    Debes manipularlo con css, y ahi, no hay regla específica. Dependiendo de cómo tengas los estilos de tu template, sólo tenés qeu crear la regla a aplicar para ese textarea.
    Saludos.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">