Contact Form 7 es el plugin de formularios de contacto para WordPress gratuito por excelencia, con más de 5 millones de instalaciones activas. Si quieres aprender a configurar Contact Form 7 y sacarle el máximo provecho ¡no dejes de leer!
Contenidos
Instalar Contact Form 7
Contact Form 7 se encuentra en la biblioteca de plugins de WordPress.org, por lo que se puede instalar directamente desde el propio WordPress. Para ello, solo tenemos que acceder, en el menú lateral izquierdo, a:
Plugins > Añadir nuevo > Buscar “Contact Form 7”
Una vez instalado y activado, veremos habilitada un nuevo elemento en el menú lateral izquierdo llamado “Contacto”:
Primeros pasos en Contact Form 7
Cuando accedamos a la gestión del plugin veremos tres opciones:
- Formularios de contacto: en esta pestaña verás un listado con todos los formularios configurados. Por defecto, Contact Form 7 integra un formulario “base” llamado “Formulario de contacto 1”. Esto resulta muy útil, ya que nos permite observar la configuración básica y, a partir de esta, modificarla a nuestro gusto.
- Añadir nuevo: podemos utilizar esta opción si queremos crear un nuevo formulario, que utilizará como información básica la configuración por defecto, que debemos modificar posteriormente.
- Integración: esta opción permite integrar Contact Form 7 con otras herramientas, como el Captcha de Google, que activa la casilla de verificación previa al envío para evitar el spam de robots.
Crear un formulario de contacto nuevo
Cuando creamos un formulario de contacto en Contact Form 7 o editamos uno existente, lo primero que debemos hacer es dar un título. Lo ideal es utilizar un nombre que nos permita identificar fácilmente tanto a nosotros como a las personas que puedan hacer cambios en nuestra web posteriormente, de qué formulario se trata. Una buena opción es nombrar nuestro formulario con la ubicación en la que se encuentra el formulario (footer, página de contacto, formulario lateral, etc.). ¡Las cosas bien hechas, bien parecen! y la organización es fundamental para evitar, posteriormente, derrochar mucho tiempo.
Dentro del formulario, encontraremos diferentes pestañas: formulario, correo electrónico, mensajes y ajustes adicionales. Veamos su funcionalidad:
-
Contact Form 7: Crear el contenido del formulario
Una de las características que hacen que Contact Form 7 sea uno de los plugins para crear formularios en WordPress más utilizados es su sencillez: sin tener conocimientos de desarrollo ni HTML es posible configurar un formulario básico gracias a la inserción mediante etiquetas.
Para añadir estos campos, únicamente deberemos pinchar sobre el elemento y ¡voilà! Verás cómo aparece su etiqueta en el formulario añadido en la parte inferior del mismo. Para modificar su posición, bastará con cortar el fragmento de código y pegarlo en el lugar deseado.
No obstante, debemos prestar atención a que la descripción que aparece es la que deseamos. Si no, siempre podemos editar el texto que aparece entre las etiquetas HTML (por ejemplo, es útil editar la etiqueta <label>, que indicará la información que debe introducir el usuario, para advertir que dicho campo es requerido y que, si no introduce información válida, el formulario no será enviado).
-
Contact Form 7: Configurar el envío del formulario
En la pestaña de Correo electrónico será en la que configuremos el envío del formulario de contacto. Este paso es fundamental, ya que, si no lo configuramos correctamente, nuestro formulario no será enviado. Para evitar el desastre presta atención a los siguientes parámetros:
Para: aquí deberás introducir la cuenta de correo a la que quieres que llegue el formulario.
De: por defecto, te aparece la etiqueta [your-name], que permite que, al recibir el correo, sepas quien es el remitente, ya que Contact Form 7 replica aquí la información introducida por el usuario en el formulario donde tenemos introducida esta misma etiqueta. No obstante, lo más importante en este punto es que el correo asociado en este campo tenga el dominio de la web (<wordpress@tudominio.com). Si no, ¡no funcionara!
Asunto: Aquí debemos introducir el asunto que veremos cuando recibamos el formulario de contacto. Esto es útil configurarlo, por ejemplo, cuando tenemos un formulario de contacto para diferentes peticiones (presupuesto, información, etc) o diferentes servicios. De esta manera, de un solo vistazo veremos qué solicitud estamos recibiendo.
Cabeceras adicionales: este campo nos permite realizar ajustes adicionales, como agregar una cuenta de correo en copia si queremos que llegue el formulario de contacto a dos cuentas de correo diferentes. Para añadir esto solo deberíamos insertar: “bcc:correo@correo.com”.
Cuerpo del mensaje: será el correo que recibamos en nuestra bandeja de entrada y de su configuración dependerá la información que veamos. Para ver la información que debe introducir el usuario en el formulario, deberemos replicar las etiquetas que hemos insertado en el mismo.
-
Contact Form 7: mensajes de respuesta al envío de formulario
Contact Form 7 establece, por defecto, los mensajes que aparecerán al usuario cuando interactúe con el formulario y se produzca algún error o validación. En la pestaña “Mensajes” podrás personalizar los mensajes de alerta y dar ese toque personal a tu formulario.
Por defecto, cuando se envía correctamente el formulario no carga una página nueva, sino que aparece el mensaje de validación en la misma página del formulario. Pero ¡tranquil@! En Online Zebra te contamos cómo crear una página de “gracias” en WordPress con Contact Form 7.
-
Contact Form 7: ajustes adicionales
Como indica su nombre, se trata de una pestaña que podemos usar para incluir complementos adicionales a Contact Form 7. Aquí encontrarás algunos de los elementos que puedes incluir.
Insertar el formulario de Contact Form 7 en una página del WordPress
Vale, ya tenemos configurado el formulario de contacto ¿y ahora qué?
Ahora toca insertarlo en la página que deseemos. Para ello, debemos fijarnos en el shortcode del formulario en cuestión, que encontraremos tanto dentro del formulario, debajo del título del formulario como en el listado de formularios.
Solo deberás copiar este shortcode y pegarlo en la parte de la web en la que desees que aparezca y ¡ya tienes listo tu formulario de contacto!. Si utilizas algún constructor visual como WPBakery Page Builder, posiblemente incorpore un módulo ya de Contact Form, en el que solo deberás seleccionar el nombre del formulario que quieres insertar.
Además de esto, si quieres dotar a tu formulario de contacto de otras funcionalidades, existen una infinidad de complementos para Contact Form 7 que pueden serte de gran utilidad. ¿Conoces alguna extensión de Contact Form 7 digna de mención?
