Cómo crear un formulario de contacto en WordPress desde cero
4.95 (99%) 20 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 🙂 .