Cómo configurar Contact Form 7 con WP Mail SMTP en WordPress

Contact Form 7 es un plugin gratuito que te permite crear y gestionar formularios de Contacto para WordPress.

info Para que Contact Form 7 funcione, es esencial tener instalado y configurado el plugin WP Mail SMTP. Puedes seguir la guia del siguiente manual.

Instalación del plugin

Primero, accederemos al WordPress e instalaremos el plugin Contact Form 7. Para ello, nos dirigiremos a "Plugins" -> "Añadir nuevo plugin":

Buscaremos el plugin en el buscador superior:

Una vez instalado, haremos clic en activar:

Creación de los formularios

Para añadir o editar un formulario haremos clic en el icono "Contacto" y en el botón "Añadir nuevo".

Le pondremos un nombre al formulario y lo guardaremos:

La página «Editar formulario de contacto» está dividida en cuatro secciones.

1. Formulario – Personaliza tu plantilla de formulario de contacto HTML con una variedad de opciones de campo como texto, correo electrónico, casillas de verificación, etc. También puedes escribir HTML personalizado en el cuadro de personalización del formulario.
2. Correo electrónico – Personaliza la plantilla de correo electrónico y la configuración utilizada para los correos electrónicos de notificación.
3. Mensajes – Personaliza los mensajes que se muestran después de acciones específicas. Por ejemplo, puedes configurar un mensaje único para que se muestre después de que alguien envíe un formulario de contacto.
4. Ajustes adicionales – Especifica fragmentos para habilitar funciones adicionales como el modo solo para suscriptores, el modo de demostración o la omisión de correo. También permite la creación de código que se va a ejecutar antes o después de acciones específicas.

Pestaña Formulario

Puedes utilizar los distintos botones preestablecidos para generar los códigos abreviados de las etiquetas, de entrada de datos, para un formulario más utilizado.

• Texto – Crea una etiqueta de formulario para una sola línea de texto. Los campos de texto son útiles para nombres, apellidos y otros recortes basados en texto que no requieren múltiples líneas.
• Correo electrónico – Crea una etiqueta de formulario para una dirección de correo electrónico.
• URL – Crea una etiqueta de formulario para una URL.
• Teléfono – Crea una etiqueta de formulario para un número de teléfono.
• Número – Crea una etiqueta de formulario para un número. A diferencia de los campos de entrada de «texto» o «área de texto», los campos de «número» solo permiten dígitos numéricos.
• Fecha – Crea una etiqueta de formulario para una fecha.
• Área de texto – Crea una etiqueta de formulario para un área de texto. A diferencia del campo de entrada normal de «texto», un campo de «área de texto» permite múltiples líneas de texto. Son ideales para introducir el cuerpo del mensaje.
• Menú desplegable – Crea una etiqueta de formulario para un menú desplegable.
• Casillas de verificación – Crea una etiqueta de formulario para casillas de verificación.
• Botones de selección – Crea una etiqueta de formulario para los botones de selección.
• Aceptación – Crea una etiqueta de formulario para una casilla de validación.
• Cuestionario – Crea una etiqueta para crear un cuestionario de preguntas y respuestas.
• Archivo – Crea un campo para la subida de archivos.
• Enviar – Crea una etiqueta de formulario para un botón de envío.

Cada uno de los tipos de entrada de datos debe estar entre etiquetas '''<label>''' y '''</label>'''. Por ejemplo:

 <label> Título
     [entrada_de_datos] </label>

El campo "Título" será el título/encabezado que verá el usuario encima del campo de entrada de datos.

El campo "[entrada_de_datos]" es el código que nos proporcionan cada una de las etiquetas anteriores.

Por ejemplo, si queremos añadir a nuestro formulario un campo de entrada de texto, haremos clic en "texto":

Nos aparecerá una ventana con las siguientes opciones de configuración (cada etiqueta tiene distintas opciones, puedes revisar la guía de cada etiqueta):

• Tipo de campo: Podemos escoger si es obligatorio rellenar el campo.
• Nombre: Este es el nombre interno que disponemos para identificar el campo en la configuración del formulario.
• Valor por defecto: El valor que se mostrará en el campo si el usuario no lo cambia. Se muestra como un texto y si el usuario lo quiere modificar tendrá que eliminarlo manualmente.
• Usar el texto como marcador de posición del campo: El texto que verá el usuario en el campo si no se modifica. Se muestra como texto, pero desaparecerá al hacer clic en el campo o al introducir un nuevo valor.
• Este campo requiere el nombre del autor: Esta etiqueta identifica a un campo donde el usuario tiene que introducir su nombre y será procesado por el sistema de filtrado Akismet (en caso de tenerlo configurado) para determinar si los datos del formulario son Spam o no.
• Atributo de ID: Le asigna un ID al campo. Se utiliza para asignar estilos por media de código CSS.
• Atributo de clase: Le asigna una clase al campo. Se utiliza para asignar estilos por media de código CSS.

Una vez configurados los campos, haremos clic en insertar:

Nos creará la entrada de datos que tendremos que poner entre etiquetas '''<label>''' y '''</label>'''. Podemos asignarle un título/encabezado a la etiqueta:

<label> Apellidos:
     [text* apellidos]</label>

Pestaña Correo Electrónico

En esta pestaña definiremos la plantilla que se utilizará a la hora de enviar el correo electrónico cuando el usuario haga clic en el botón de enviar.

Por defecto, se envía el correo electrónico a la cuenta del administrador de la web, desde la cuenta [email protected].

El asunto es: "Nombre_del_sitio" + el asunto que haya puesto el usuario en el formulario.

Al hacer clic en el botón responder, una vez nos llegue un correo, responderemos a la cuenta que haya introducido el usuario. Y el cuerpo del mensaje serán los datos que se han introducido en los distintos campos del formulario.

En la parte superior nos aparecerán los nombres de los campos del formulario para poder configurar la plantilla, son las variables que contendrán los distintos valores/inputs que haya introducido el usuario.

Si tuviésemos campos donde subir archivos, nos aparecerán las etiquetas en el apartado "Archivos adjuntos".

info Deberemos guardar los cambios hechos en el formulario para que se actualicen las etiquetas

Por ejemplo, la siguiente configuración en esta pestaña, se recibirá con el siguiente formato:

Pestaña Mensajes

Esta pestaña permite personalizar los mensajes que recibe el usuario según el estado del formulario: si se ha enviado, si no se ha podido enviar, si ha habido un error..:

Pestaña Ajustes Adicionales

Desde esta pestaña, podemos personalizar funciones adicionales, como omisión de envío de correo, modo solo suscriptores o la ejecución de funciones personalizadas en momentos concretos de la ejecución del formulario.

Añadir el formulario a una página

Desde el editor de páginas, añadiremos un nuevo bloque de tipo Contact Form 7.

info Dependiendo del maquetador que utilices, la importación del bloque cambiará.

Desde el maquetador por defecto, haremos doble clic en el bloque Contact Form 7 para añadirlo.

Deberemos indicar qué formulario de entre todos los creados queremos que se muestre:

Prueba de funcionamiento

Accedemos a la página donde hemos añadido el formulario, rellenamos los campos y enviamos el formulario:

El propietario del sitio recibe el correo electrónico con los datos: