WordPress

Cómo crear un formulario de contacto en WordPress. Tutorial Contact Form 7 2018

En el artículo de hoy quiero enseñarte cómo crear un formulario de contacto en WordPress utilizando el plugin Contact Form 7. Además, al final de este tutorial he incluido un vídeo en el que te lo enseño yo mismo de forma práctica.

Con este plugin podrás crear un formulario con todos los campos que desees en pocos minutos. Podrás elegir entre incluir campos obligatorios, campos opcionales, selectores para que el usuario indique el servicio o producto que está interesado y mucho más.

¿Y sabes que es lo mejor de todo? Que Contact Form 7 es gratuito y que es el mejor plugin para crear y añadir un formulario de contacto. Simple, fácil de utilizar y efectivo.

Formulario de contacto en WordPress: Tutorial Contact Form 7

Lo primero que tienes que hacer ir a tu zona de administración de WordPress e instalarlo. Para ello ve a PluginsAñadir nuevo y pon “Contact Form 7” en el buscador de plugins. Pincha en “Instalar” y después en “Activar”.

Una vez lo hayas hecho se te añadirá en el menú de la izquierda un nuevo apartado que se llama “Contacto”.

Recurso extra: Si todavía no te manejas bien con WordPress, aquí te dejo una guía de su panel
Ir a la guía

En este momento puedes hacer dos cosas.

Si quieres crear un formulario de contacto en WordPress sencillo y sin personalización, puedes coger el que ya te viene con Contact Form 7 e insertarlo directamente en tu página web. Sin embargo, si lo que quieres es algo más cuidado y profesional, puedes hacerte uno propio invirtiendo unos minutos extra.

En este artículo te explico ambos casos, pero si prefieres verlo en vídeo, al final del artículo te dejo un vídeotutorial en el que te lo explico todo paso a paso.

Formulario de contacto en WordPress básico

Al acceder al apartado de “Contacto” verás un listado con los formularios. Como acabas de instalar el plugin, solo tendrás el predeterminado, llamado algo así como “Formulario de contacto 1”.

formulario contacto wordpress

Si pinchas en él te aparecerá una pestaña que pone “Formulario” y dentro tendrás un cuadro de texto con los típicos campos de nombre, email, asunto y mensaje. Si con esto te vale, lo único que debes hacer es indicarle al plugin tu cuenta de correo electrónico para que todos los mensajes que te envíen tus visitantes lleguen a tu bandeja de correo habitual.

Para ello ve a la pestaña “Correo electrónico” y deja configurados los campos del siguiente modo:

  • Para: Aquí debes introducir tu cuenta de email. Por ejemplo, pepito@gmail.com.
  • De: Aquí tienes que introducir la variable [your-name] y luego poner <wordpress@tudominio.com>
  • Asunto: Aquí tienes que poner el título que quieras que el plugin le ponga a los mensajes que te envíen los usuarios a través del formulario. Yo pondría algo así como “Contacto a través del formulario de contacto”.

Los demás campos los puedes dejar como están.

Cuando termines de configurarlo, ve arriba del todo y, bajo el título del formulario de contacto, verás un pequeño código en formato shortcode. Se parecerá a esto:

como-crear-un-formulario-de-contacto-eb-wordpress

Copia este código e introdúcelo en la página donde quieras insertar el formulario, normalmente en la de contacto.

Si utilizas algún plugin de maquetación visual como Visual Composer (aquí te dejo un tutorial), podrás incluir el formulario en cualquier parte de la web utilizando el elemento “Contact Form 7”.

Formulario de contacto en WordPress personalizado

Si estás leyendo esto es porque no te conformas con el que viene por defecto y quieres hacer tu propio formulario de contacto con campos personalizados.

Para crear uno desde cero haz click en “Añadir nuevo” y ponle un título para identificarlo, algo así como “formulario de contacto principal”.

Por defecto, como hemos visto antes, saldrá un formulario con varios campos: nombre, email, asunto y mensaje. Te aconsejo que los utilices como base y vayas quitando o añadiendo lo que necesites.

Para comenzar a añadir nuevos campos, crea la etiqueta html <label> y escribe el título del campo que quieras que aparezca encima del recuadro donde el usuario introduce sus datos. Recuerda que las etiquetas html hay que cerrarlas así que pon un </label> al final de modo que quede así:

<label>Escribe aquí tu teléfono</label>

De momento lo que has hecho es poner un pequeño texto que indica que hay que introducir el teléfono. Ahora vamos a poner la cajita dónde deben introducirlo.

Como hemos dicho que estábamos añadiendo el campo de teléfono, selecciona “teléfono”.

formulario de contacto en wordpress

Aparecerá una ventana emergente como esta:

como crear un formulario de contacto en wordpress

Después de que hayas rellenado los campos cómo necesites, haz click en el botón insertar y verás como has añadido un código junto a los demás campos. Asegúrate de que el código que te ha generado el plugin está dentro de las labels que acabas de crear de manera que te debería quedar algo parecido a esto:

<label>Escribe aquí tu teléfono[tel* telephone]</label>

Con esto ya has añadido el campo de teléfono de forma obligatoria para el usuario.

Vamos con otro ejemplo.

Ahora vas a añadir a tu formulario de contacto en WordPress un campo opcional de apellido. Para ello repetimos el proceso anterior y creamos la label:

<label>Apellido</label>

A continuación pincha en el botón “texto” y te volverá a aparecer la ventana emergente de antes. En este caso deja sin marcar la opción de obligatorio y haz click en “insertar”. Recuerda que el shortcode que se genera debe quedar entre las etiquetas <label> así que si el plugin no te lo coloca ahí, copia y pégalo dentro para que quede similar a esto:

<label>Apellido[text* text-398]</label>

Por último, vamos a añadir unos selectores. Imagina que en tu web ofreces 3 servicios distintos, y quieres saber desde el primer momento qué servicio demanda el cliente. Para ello puedes poner unos pequeños campos con cada servicio para que el usuario pueda elegir y que tú sepas ya en qué servicio está interesado.

Lo primero de todo es añadir la <label> con su título como antes. No obstante, en este caso, al tratarse de selectores, para que funcione bien cambia la etiqueta <label> por <p>:

<p>¿Qué servicio necesitas?</p>

Ahora vamos con los selectores. Imagina que eres un fotógrafo y ofreces 3 tipos de servicios:

  • Fotografía para bodas.
  • Fotografía para comuniones.
  • Book de fotos.

Para añadir cada selector pincha en “botones de selección” y añade las tres opciones. Luego pincha en “insertar” y pega el código entre las label:

<p>¿Qué servicio necesitas?[radio radio-769 default:1 “Fotografía para bodas” “Fotografía para comuniones” “Book de fotos”] </p>

Una vez hayas terminado de introducir estos y los demás campos que necesites, tienes que coger los shortcodes de los campos nuevos que acabas de crear e introducirlos en el área de texto de la pestaña “Correo electrónico“. Si no haces esto, el usuario rellenará el formulario con todos los campos pero no te llegará la información completa.

contact form 7 wordpress

Cómo redirigir a los usuarios a otra página tras completar el formulario

Si quieres enviar a los usuarios a otra página después de que completen el formulario de contacto, por ejemplo a una de gracias por completar el formulario, tienes que instalar un plugin que complementa a Contact Form 7 y añade esta funcionalidad.

Esto es muy útil cuando quieres contabilizar las conversiones si has realizado una campaña de publicidad (aquí pondrás el código de conversión), o cuando has ofrecido un lead magnet y quieres poner en esta página el contenido de regalo.

Para ello, es tan sencillo como instalar el plugin Contact Form 7 Redirection y verás como aparece una nueva pestaña en el apartado de creación de los formularios.

guia contact form 7

Ahí podrás seleccionar la página a la que quieras redirigir al usuario. Puede ser una que hayas creado previamente o poner ahí la URL que quieras directamente.

Vídeotutorial Contact Form 7

Lo prometido es deuda, aquí te dejo el vídeo explicativo de todo el proceso. En él, podrás ver como creo un formulario de contacto en WordPress utilizando el plugin Contact Form 7.

¿Tienes alguna duda?

Para finalizar, solo decirte que si tienes cualquier duda puedes preguntarme en los comentarios y estaré encantado de ayudarte.

Si te ha gustado este tutorial de Contact Form 7 y has aprendido cómo crear un formulario de contacto en WordPess, por favor compártelo en tus redes sociales y suscríbete al canal de YouTube y al blog para estar atento a los nuevos recursos que regularmente proporciono.

Cómo crear un formulario de contacto en WordPress. Tutorial Contact Form 7 2018

4.8 (96.57%) 35 votes

63 Comments

  • Carolina dice:

    Hola Javi, yo tengo puestos esos campos y el teléfono se puede rellenar, pero luego en el mail que nos llega no aparece ese campo. ¿Porque crees que puede ser? Imagino que será algo de código que yo no controlo mucho. Muchas gracias por el post.

    • Hola Carolina!

      Si no te llegan algunos campos es porque no los has incluido en la pestaña de “Correo electrónico”. Siempre que introduzcas en la pestaña “Formulario” algún campo nuevo debes añadir el shortcode en el correo ?

      Un saludo

    • Hola Carolina!

      Si no te llegan algunos campos es porque no los has incluido en la pestaña de “Correo electrónico”. Siempre que introduzcas en la pestaña “Formulario” algún campo nuevo debes añadir el shortcode en el correo ?

      Un saludo

  • Gaby C.M-F dice:

    El que no crea un formulario de contacto es porque no quiere ¡pedazo de guía! ¡Enhorabuena Javi! Ya he tomado buena nota. Un abrazo!

  • Luis Martinez dice:

    Hola excelente tu guia podrias hacer una guia de como hacer el formulario de los textfield como los que aparecen aca en el comentario de nombre completo email y web

  • Juan Carlos Santos Villalta dice:

    Hola Javier. Acabo de descubrir tu web y he visto alguno de tus vídeos como el de Contact Form y me han parecido sencillo gracias a como lo explicas. Muchas gracias por tu ayuda.

  • Eduardo dice:

    Hola Javi, exelentes tutoriales, gracias 😀
    Solo una duda: hay manera de reducir el tamaño del formulario si lo quieri meter en un widget lateral?
    Saludos

    • No hay problema. Cuando creas un formulario con Contact Form 7, el plugin te genera un shortcode que luego puedes poner dónde quieras y se ajusta en tamaño. Ponlo como widget de texto y verás que el tamaño se adapta al espacio que haya.

    • No hay problema. Cuando creas un formulario con Contact Form 7, el plugin te genera un shortcode que luego puedes poner dónde quieras y se ajusta en tamaño. Ponlo como widget de texto y verás que el tamaño se adapta al espacio que haya.

  • Patricia dice:

    Hola, Javier. Enhorabuena por tu post, es genial. Yo he estado creando el formulario y he seguido todos los pasos pero cuando hago una prueba rellenándolo desde la web como si fuera otra persona, al mail que he vinculado para que le lleguen los formularios le llega un mensaje con texto html en donde he puesto campos adicionales y eso que he copiado las etiquetas y las he añadido en la pestaña de correo. ¿Por qué crees que puede ser?
    Un cordial saludo.

    • Que raro Patricia, haz una cosa, ve a la pestaña de Correo electrónico y arriba suelen salir los campos con el nombre exacto. Cógelos de ahí e ponlos en el correo. Si ves que no sale bien, desinstala contact form 7, vuelve a instalarlo y crea el formulario de contacto otra vez.

    • Que raro Patricia, haz una cosa, ve a la pestaña de Correo electrónico y arriba suelen salir los campos con el nombre exacto. Cógelos de ahí e ponlos en el correo. Si ves que no sale bien, desinstala contact form 7, vuelve a instalarlo y crea el formulario de contacto otra vez.

  • Carloslato dice:

    Hola javier, excelente guia, la estaba buscando, lo hice todo, pero cuando envío un mensaje de prueba nunca llega, por que pasa eso ?

  • Raúl dice:

    Hola buenas Javier,

    Te digo, yo en mi página web después de incluir el formulario de contacto y de probarlo para ver si realmente funciona, al momento de hacer clic en enviar se queda pensando y no acaba ocurriendo nada. ¿ésto por qué ocurre? Gracias! Un saludo.

    • Raúl, revisa que hayas configurado todos los parámetros que explico en el tutorial de Contact Form 7 correctamente y mira si has puesto tu correo electrónico bien. Si aún así no funciona, desinstala y vuelve a instalar el plugin y, si no te funciona, quizás se pueda deber a una incompatibilidad con otro plugin que tengas, por lo que quita todos menos Contact Form 7 y vuelve a probar. Si es esto, luego activa uno a uno el resto de plugins y averigua cuál es el que es incompatible y busca una alternativa.
      Un saludo

    • Raúl, revisa que hayas configurado todos los parámetros que explico en el tutorial de Contact Form 7 correctamente y mira si has puesto tu correo electrónico bien. Si aún así no funciona, desinstala y vuelve a instalar el plugin y, si no te funciona, quizás se pueda deber a una incompatibilidad con otro plugin que tengas, por lo que quita todos menos Contact Form 7 y vuelve a probar. Si es esto, luego activa uno a uno el resto de plugins y averigua cuál es el que es incompatible y busca una alternativa.
      Un saludo

  • Edimar dice:

    Hola! quisiera saber como le cambio el color al texto o al botón, porque me sale el botón y el texto de “enviar” en color blanco

  • ignacio dice:

    Hola como estas? como puedo poner el titulo de la pagina en el asunto? del correo para que sepan que se mando desde tal pagina y tiene un asunto diferente. Tengo una especia de guia de comercios y un form insertado en cada pagina, pero llegan todos sin referencia.

    • Ignacio, la alternativa más fácil, es que construyas un formulario distinto para cada página. Luego en la pestaña de “Correo electrónico”, en el apartado de asunto, añédele a cada formulario el nombre de la página delante y así ya lo tendrías 😉

    • Ignacio, la alternativa más fácil, es que construyas un formulario distinto para cada página. Luego en la pestaña de “Correo electrónico”, en el apartado de asunto, añédele a cada formulario el nombre de la página delante y así ya lo tendrías 😉

  • Hola Javier me sirvió mucho tu información, hay alguna forma de “obligar” al campo en aceptar solo un numero de caracteres limitados me refiero al campo de teléfono ya que si escribo solo el numero 0 igual envía el formularia. Por favor necesito tu ayuda. Saludos

    • Hola Yeniree, puedes poner un máximo o un mínimo de caracteres en cualquier campo como en el siguiente ejemplo que aplico un límite a un bloque de texto:

      [textarea* your-message minlength:10 maxlength:140]

      Con esto, hago que el usuario tenga que introducir un mínimo de 10 y un máximo de 140 caracteres en dicho campo. Esto se puede aplicar a casi cualquiera.

    • Hola Yeniree, puedes poner un máximo o un mínimo de caracteres en cualquier campo como en el siguiente ejemplo que aplico un límite a un bloque de texto:

      [textarea* your-message minlength:10 maxlength:140]

      Con esto, hago que el usuario tenga que introducir un mínimo de 10 y un máximo de 140 caracteres en dicho campo. Esto se puede aplicar a casi cualquiera.

  • Raquel dice:

    Hola Javier,
    Muchas gracias por tus fantásticos tutoriales, poco a poco me voy creando mi página web. He activado el plugin de contact form 7, pero me sale con 1 error. Me avisa de que en la pestaña segunda “Correo electrónico” en la casilla “De” me avisa del siguiente error “Sintaxis incorrecta para el buzón de correo”. ¿Cómo debo de escribirlo?

    Quedo a la espera de tu respuesta. Gracias y saludos!

  • Sebastian dice:

    Hola Javier, muy buena la pagina y muy bueno este plugin que nos compartiste, pero me surgió una duda al respecto. La pregunta es la siguiente: Si utilizo el plugin de redireccionamiento que explicas a lo ultimo, el usuario al hacer click en el botón “enviar” ¿Se producen dos acciones? Es decir: 1) redirige al usuario a otra pagina y 2) me llega un mail a mi con los datos del cliente. Espero haber sido claro. Saludos desde Argentina.

  • Giuseppe Diego dice:

    Buenas Javier el formulario me tira este error.
    Hubo un error intentando enviar tu mensaje. Por favor inténtalo de nuevo más tarde.
    porque debe ser ?? muchas gracias!

    • Giuseppe, revisa que has seguido todos los pasos correctamente. El error puede venir de muchos lados, por lo que lo mejor es que borres el formulario y lo hagas desde cero siguiendo el vídeo. Luego no te olvides de poner tu email en el apartado de “Correo electrónico” para que te lleguen los mensajes bien.

  • Carlos Garcia dice:

    Que tal Javier, comienzo en este rubro de las páginas web en WordPress, deseo realizar lo siguiente, en el momento que una persona llena el formulario de contacto y una vez ya enviado es posible que esta persona ¿Reciba una respuesta automática?

    • ¡Si claro! Cuando creas tu formulario de contacto con Contact Form 7, verás que en la pestaña de “Correo electrónico”, abajo del todo, puedes activar dicha opción y escribir el mensaje de respuesta automática que quieras 😉

  • Lucas Gayol dice:

    Hola Javi. Te hago una consulta en relación al tema este de los formularios. Vos pones 3 servicios en esa empresa que armaste. Pero cuando los seleccionas las opciones parecieran ser excluyentes entre sí. ¿Qué pasa si yo quiero poner un formulario de servicios en donde la persona pueda hacerle click a más de una opción disponible? Desde ya gracias. Muy bueno todo lo que haces.

    • Lucas, buena pregunta. Si quieres que el usuario pueda seleccionar varios servicios, cuando añades la etiqueta de menú desplegable, en la ventana que aparece para configurarlo de Contactf Form 7, tienes una pestaña que pone “Permitir selecciones múltiples”. Haz clic ahí y lo tienes hecho.

      También puedes utilizar el campo de casillas de verificación.

  • MICHOACANOS MOVIMIENTO dice:

    que etiqueta usas para poner la opcion de un archivo?

  • Con Contact Form 7 puedes crear un formulario de contacto en WordPress de manera gratuita. Revisa el plugin que has instalado, ya que quizás no sea Contact Form 7

  • David Vargas dice:

    hola amigo, gracias y felicidades por este tuto, en verdad que me has sacado de un apuro… solo tengo una pequeña duda, ya tengo mi formulario creado, pero cuando lo visualizo me aparece todo justificado a la izquierda y nada esta justificado… podrías ayudarme con eso? ya que veo que en tu tutorial todo te aparece centrado y justificado.

    • Revisa a ver si tu plantilla tiene un apartado de opciones y estilos del formulario de contacto. La que yo utilizo, Bridge, tiene un apartado específico para ello. Si no, puedes hacerlo con CSS o con un plugin como CF7 Customizer.

  • Rubén García dice:

    Hola Javi buenas noches, soy nuevo en wordpress ya cree el formulario pero como lo coloco en la página que quiero que me escriban. Gracias

    • Rubén, tan solo tienes que coger el shortcode que genera el propi formulario y pegarlo en la página dónde quieras que se muestre. El shortcode lo encontrarás en el apartado de “Formulario” como puedes ver en el pantallazo que adjunté en el artículo 😉

  • Duver, si ya tienes el formulario de contacto creado, ve al apartado de “Contacto” en el menú izquierdo del panel de WordPress y ahí tendrás otro apartado en el que te saldrán los formularios de contacto. Haz clic en el que quieras insertar y te aparecerá un shortcode como el que pongo en el pantallazo de este artículo. Algo así como [contact-form-7 id ...]. Esto es lo que tienes que copiar y pegar en la página en la que quieras mostrarlo.

  • Dayanna, lo único que tienes que hacer es poner en el campo de “Para” la cuenta de correo electrónico a la que quieras que lleguen los formularios y liego en el apartado “De” [your-name] . ¡Sustitúyelo por tu dominio y arreglado! 😉

  • Marcela, si has seguido todos los pasos exactamente igual que como los explico en el tutorial y no te sale, puede ser que tengas el plugin desactualizado o que tengas otro que cause una incompatibilidad, que la plantilla no esté actualizada tampoco, o que incluso tu plantilla no sea compatible con Contact Form 7, cosa que sería muy rara. Prueba a actualizar plugins y plantillas y a desactivar todos los plugins menos Contact Form 7. Si no, prueba en otra instalación con oto tema diferente para descartar que no sea tu theme.

  • El formulario se va a ajustar al tamaño de la fila o sección de tu web donde lo coloques. Por eso, es útil utilizar un maquetador visual y una buena plantilla para ello. Te recomiendo que utilices Bridge que viene con Visual composer y que tiene un apartado específico para personalizar y darle estilo al formulario fácilmente. Te dejo el link: https://goo.gl/1Zcy33

  • Mina, he actualizado el post explicando más detenidamente ese punto. En el apartado de Correo electrónico de contact form 7 tienes que ponerlo del siguiente modod:
    – Para: Aquí debes introducir tu cuenta de email. Por ejemplo, pepito@gmail.com.
    – De: Aquí tienes que introducir la variable [your-name] y luego poner

  • Andres Quintero Altamiranda dice:

    Buen día Javier, recibe un cordial saludo.

    Necesito tu ayuda ¡URGENTE! , llevo semanas buscando el error y aun no doy con el.

    ¿Porque wordpress no carga la pagina anterior cuando le doy retroceder?

    Por ejemplo estoy en la pagina principal de mi sitio, le doy clic a mis ultimas entradas y me envía a otra pagina, pero cuando le doy clic en el botón retroceder de mi navegador no carga completa mi pagina de inicio 🙁 .

    Ya he probado con la mayoría de los navegadores y en varias computadoras y nada que funciona, por favor ayúdame con esto. Te lo agradezco.

    Saludos desde colombia.

  • Hola Leticia, para añadirlo puedes utilizar el elemento de Aceptación que te deja añadir una casilla para que el usuario pueda aceptar y le podrías meter el link a la página de la Política de Privacidad

  • Hola Kattan,

    Lo que comentas puede deberse a multitud de factores. Para empezar a descartar cosas, lo primero que haría sería desinstalar y borrar Contact Form 7, luego desactivar todos los plugins momentaneamente y luego instalar y activar Contact Form 7. Una vez hayas hecho esto, haz el formulario siguiendo todos los pasos de este tutorial y prueba de nuevo. Si te funciona, se deberá a que tenías un plugin que estaba causando conflicto asi que ve activando el resto de plugins uno a uno hasta descrubir cuál y busca una alternativa.

    También puede deberse al hosting, que tenga versiones de php muy antiguas. Échale un ojo a este hosting que es el que utilizo yo en mi web y nuca da problemas.

    Por último, puede comprueba que no es la plantilla. Activa otra y mira si te pasa.

Leave a Reply