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.
Índice de contenidos
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 Plugins > Añ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 complerta actualizada a 2019
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”.
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:
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».
Aparecerá una ventana emergente como esta:
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.
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.
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.
Antes de terminar, me gustaría recomendarte unos artículos de mi blog en el que te enseño a crear tu propia página web o blog con WordPress en unos sencillos pasos:
- Selección con las plantillas y temas para WordPress que mas me gustan para crear una web en 2019 ➜ ¡Incluye enlaces de descarga!.
- ¿Cuál es el mejor hosting para crear una web con WordPress?
- Guia completa 2019 de Visual Composer, el mejor maquetador para crear tu web.
- Aprende a instalar WordPress en un servidor en menos de 5 minutos.
¿Tienes alguna duda?
Para finalizar, solo decirte que si tienes cualquier duda puedes preguntarme en los comentarios y estaré encantado de ayudarte.
Recurso extra: Aprende a crear un sistema de reservasen 5 pasos
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.
