formulario contacto wordpress

Cómo crear un formulario de contacto en WordPress desde cero

Cómo crear un formulario de contacto en WordPress desde cero
5 (100%) 16 votes

Un formulario de contacto en WordPress es la clase de elemento que toda página web debe tener. De este modo, los usuarios pueden contactar con el dueño del site por si quieren contratar algún servicio, hacer alguna oferta de trabajo o simplemente pedir información sobre algún tema en concreto.

Hay muchas maneras de crear un formulario de contacto en WordPress: mediante plugins, programando código html o utilizando algún apartado propio de la plantilla que estés utilizando.

Desde mi punto de vista, la manera más eficaz de hacerlo es utilizando el plugin Contact Form 7.

Con este plugin podrás crear un formulario de contacto en WordPress totalmente personalizado con los campos que desees en pocos minutos. Elegir entre 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 muy sencillo de utilizar si sigues un tutorial como este.

emailFormulario de contacto en WordPress: primeros pasos con Contact Form 7

Lo primero es 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”. Si todavía no te manejas bien con WordPress te recomiendo leer esta guía.

En este momento puedes hacer dos cosas.

Si quieres un formulario de contacto en WordPress sencillo y sin personalización, puedes coger el que ya te viene con Contact Form 7. Sin embargo, si lo que quieres es algo más cuidado y profesional, puedes hacerte uno propio invirtiendo un poco más de tiempo.

En esta guía te explico ambos casos pero si prefieres verlo en vídeo, aquí tienes un vídeotutorial en el que te lo explico todo paso a paso:

tarjeta_twitterFormulario 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.
  • De: Déjalo por defecto.
  • 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 “Nuevo mensaje recibido desde el 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, 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 poner 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”.

medalFormulario 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 con campos personalizados.

Para crear uno desde cero haz click en “Añadir nuevo” y ponle un título para identificarlo.

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 para que el usuario pueda elegir un servicio o producto en el que está interesado antes de enviar el mensaje. Esto puede ser útil cuando ofreces 3 servicios distintos y quieres saber desde el primer momento qué es exactamente lo que demanda el cliente.

Lo primero de todo es añadir la <label> con su título. 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

conversacion_movil¿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 esta guía para saber 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 🙂 .

 

10 Comentarios
  • Carolina
    Publicado a las 16:40h, 05 diciembre Responder

    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.

    • Javier Balcázar
      Publicado a las 16:48h, 05 diciembre Responder

      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
    Publicado a las 09:21h, 10 enero Responder

    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!

    • Javier Balcázar
      Publicado a las 23:16h, 10 enero Responder

      ¡Muchas gracias por tu comentario Gaby! La verdad es que teniendo plugins como Contact Form 7 es muy sencillo crear un formulario de contacto.

  • Luis Martinez
    Publicado a las 07:52h, 20 marzo Responder

    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

    • Javier Balcázar
      Publicado a las 10:04h, 20 marzo Responder

      Hola Luis, la verdad es que es muy sencillo crear los diversos campos, solo tienes que seleccionar el que quieras crear y añadirlo como cualquier otro campo.

      • Luis Martinez
        Publicado a las 12:16h, 20 marzo Responder

        Hola javier queria hacer algo mas avanzado y lo logre colocando un poco de estilo y modificando mas el formulario de verdad Gracias..

  • Juan Carlos Santos Villalta
    Publicado a las 23:06h, 24 marzo Responder

    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.

    • Javier Balcázar
      Publicado a las 23:47h, 24 marzo Responder

      Intento hacer los vídeos y mis guías de manera sencilla para que todo el mundo lo pueda seguir sin perderse y es un placer ver que de verdad os sirve de ayuda 🙂

Escribe un comentario