En 2024, mantenerse en contacto con tu audiencia es muy importante. Establecer una lista de correo electrónico con un servicio como MailChimp te ayuda a entregar contenido directamente a tus suscriptores.
Las listas de correos electrónicos son geniales, pero ¿qué pasa si un lector o cliente potencial quiere ponerse en contacto contigo directamente? ¡Ahí es donde entran los formularios de contacto! En este artículo, explicaremos cómo configurar el popular plugin Contact Form 7 para tu sitio de WordPress.
Cómo Instalar el Contact Form 7
El Contact Form 7 existe desde 2009, y ha acumulado más de 5 millones de descargas en la última década. Contact Form 7 puede ser instalado directamente desde el repositorio de plugins de WordPress. Si buscas «contact form 7», podrás encontrar el plugin junto con una variedad de add-ons.
Una vez que hayas instalado el plugin, verás un elemento de menú denominado «Contact» en la barra lateral del panel de control de WordPress. Aquí es donde puedes configurar todos los ajustes del Contact Form 7.
Las Ventajas y las Desventajas de Tener un Formulario de Contacto
Antes de que nos sumerjamos en cómo configurar el Contact Form 7 para tu sitio de WordPress, vamos a repasar rápidamente algunos de los pros y los contras de añadir un formulario de contacto a tu sitio.
Las ventajas de tener un formulario de contacto
- Un formulario de contacto permite a los lectores, clientes y fans contactarte directamente. Dependiendo del propósito de tu sitio de WordPress, la capacidad de un visitante para comunicarse contigo puede ser muy importante. Por ejemplo, no añadir un formulario de contacto a un sitio de comercio electrónico puede ser económicamente perjudicial para tu negocio porque las partes interesadas no podrán ponerse en contacto contigo si tienen preguntas sobre tu producto.
- Un formulario de contacto añade legitimidad a tu sitio o negocio de WordPress. Mucha gente ve la presencia de un formulario de contacto como una especie de factor de confianza. La idea de poder llegar a ti, el dueño del sitio, hace que tu contenido gane credibilidad.
Las desventajas de tener un formulario de contacto
- El spam puede ser un problema para los formularios públicos como los buzones de comentarios y los formularios de contacto. Afortunadamente con el Contact Form 7, puedes filtrar el spam con reCAPTCHA. Incluso puedes configurar una regla de página Cloudflare para protegerte aún más. Vamos a entrar en los detalles de cómo configurar la protección de spam en el Contact Form 7 más adelante en el artículo.
- Después de añadir un contact form a tu sitio, es probable que tengas que dedicar tiempo a responder a los mensajes. Esto no es necesariamente algo malo dependiendo de cómo lo mires. Algunas personas temen el proceso de responder a los correos electrónicos, mientras que otros lo disfrutan genuinamente. Por nuestra experiencia, las relaciones que se manifiestan al tener un formulario de contacto en tu sitio típicamente superan el costo de la moderación, ¡por lo que recomendamos que te potencies a través de él!
Visión general de la configuración del Contact Form 7
Crear un formulario de contacto con el plugin Contact Form 7 es súper fácil. Para empezar, haz clic en Contacto > Formularios de contacto en la barra lateral de WordPress. En esta página, puedes ver todos tus formularios de contacto junto con sus detalles de metadatos asociados.
Cuando el Contact Form 7 se instala por primera vez, crea un formulario de ejemplo también. Antes de entrar en cómo crear un formulario de contacto personalizado, echemos primero un vistazo al formulario de ejemplo para tener una mejor idea de cómo funciona el Contact Form 7. Hz clic en Contact form 1 para ver los ajustes del formulario.
La página «Editar formulario de contacto» está dividida en cuatro secciones.
- 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.
- Correo electrónico – personaliza la plantilla de correo electrónico y la configuración utilizada para los correos electrónicos de notificación.
- 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.
- Ajustes adicionales – Especifica fragmentos para habilitar funciones adicionales como el modo solo para suscriptores, el modo de demostración y la omisión de correo.
¡Ahora vamos a ver más de cerca cada sección y crear un formulario de contacto personalizado!
Cómo Crear un Formulario de Contacto de WordPress
Para crear un nuevo formulario de contacto, haz clic en Añadir nuevo junto a «Formularios de Contacto».
Dale un nombre al nuevo formulario de contacto y haz clic en «Guardar».
En la sección «Formulario», añade el HTML necesario para tu formulario de contacto. Puedes utilizar los distintos botones preestablecidos para generar los códigos abreviados de las etiquetas de los formularios más populares. Para facilitar las cosas, comprueba las descripciones de abajo para las etiquetas de formulario preestablecidas que vienen con el Contact Form 7.
- 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 las 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 aceptación.
- Cuestionario – Crea una etiqueta de formulario para un par de preguntas y respuestas.
- Archivo – Crea una etiqueta de formulario para un campo de carga de archivos.
- Enviar – Crea una etiqueta de formulario para un botón de envío.
Ahora vamos a personalizar un formulario de contacto. Para que sea completo, crearemos un formulario de contacto que use todas las etiquetas de formulario preestablecidas en el Contact Form 7.
La etiqueta de «texto» del Formulario
Al hacer clic en una etiqueta de formulario preestablecida en el Contact Form 7, verás un menú contextual como el que se muestra a continuación. En este menú, puedes configurar los ajustes de la etiqueta del formulario. En la parte inferior, verás un atajo que puede ser incrustado en tu plantilla del formulario de contacto.
Para la etiqueta del formulario de «texto», estamos usando los ajustes de abajo para crear un campo de entrada para un nombre.
- Tipo de campo – Campo requerido
- Nombre- text-711 (autogenerado)
- Valor predeterminado – Tu nombre (usado como texto de marcador del campo por defecto)
- Akismet – Campo sin rellenar
- Atributo de ID (CSS) – cf7-tu-nombre
- Atributo de calse (CSS) – cf7-tu-nombre
Estos ajustes generan el siguiente código corto.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Por ahora, solo haz clic en el botón Insertar para añadir la etiqueta del formulario a la plantilla del formulario de contacto. Agregaremos más etiquetas HTML para estructurar el formulario más adelante.
La etiqueta de «correo electrónico» del Formulario
A continuación, crearemos una etiqueta de formulario de correo electrónico que permitirá que nuestro formulario de contacto recopile las direcciones de correo electrónico.
Para la etiqueta del formulario de «correo electrónico», hemos configurado los siguientes ajustes.
- Tipo de campo – Campo requerido
- Nombre – email-632 (autogenerado)
- Valor predeterminado – Tu correo electrónico
- Akismet – Campo sin rellenar
- Atributo de ID (CSS) – tu-correo-electrónico
- Atributo de clase (CSS) – tu-correo-electrónico
Estos ajustes generan el siguiente código corto.
[email* email-632 id:email class:email placeholder "Your Email"]La etiqueta de «URL» del Formulario
En algunos casos, puede que quieras tener un campo de entrada en formulario de contacto para recopilar el sitio web de alguien. Si bien técnicamente puedes utilizar una etiqueta de formulario de «texto» normal para esto en el Contact Form 7, te recomendamos utilizar la etiqueta de formulario «URL» en su lugar. La etiqueta de formulario «URL» generará un campo de entrada que valida las URL para asegurar que estén formateadas correctamente.
Para la etiqueta del formulario «URL», hemos configurado los siguientes ajustes.
- Nombre – url-601 (autogenerado)
- Valor predeterminado – Tu sitio web
- Akismet –Campo sin rellenar
- Atributo de ID (CSS) – cf7-tu-sitio-web
- Atributo de clase (CSS) – cf7-tu-sitio-web
Estos ajustes generan el siguiente código corto.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]La etiqueta de «teléfono» del Formulario
De manera similar a las URL, también puedes usar una etiqueta de formulario de «texto» estándar para recopilar números de teléfono. Sin embargo, es mejor usar la etiqueta de formulario «teléfono» en su lugar para asegurarte de que el número de teléfono es válido.
Para la etiqueta del formulario «teléfono», hemos configurado los siguientes ajustes.
- Nombre- tel-842 (autogenerado)
- Valor predeterminado – Tu número de teléfono
- Atributo de ID (CSS) – cf7-tu-número-de-teléfono
- Atributo de clase (CSS) – cf7-tu-número-de-teléfono
Estos ajustes generan el siguiente código corto.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]La etiqueta de «fecha» del Formulario
La etiqueta del formulario «fecha» del Contact Form 7 te permite generar un selector de fechas al estilo del calendario. Este campo de entrada de «fecha» es útil para especificar las fechas de las citas en un formulario de contacto.
Para la etiqueta del formulario de «fecha», hemos configurado los siguientes ajustes.
- Nombre- fecha-389 (autogenerado)
- Valor predeterminado – Fecha de tu cita
- Rango – Nuestro rango de fechas personalizado
- Atributo de ID (CSS) – cf7-fecha-cita
- Atributo de clase (CSS) – cf7-fecha-cita
Estos ajustes generan el siguiente código corto.
[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]La etiqueta de «área de texto» del Formulario
La etiqueta del formulario «área de texto» permite crear un cuadro de texto de varias líneas que permite a los visitantes enviar mensajes más largos. Las áreas de texto son muy útiles para capturar el cuerpo de un mensaje.
Para la etiqueta del formulario de «área de texto», hemos configurado los siguientes ajustes.
- Nombre – textarea-795 (autogenerado)
- Valor predeterminado – Tu mensaje
- Atributo de ID (CSS) – cf7-tu-mensaje
- Atributo de clase (CSS) – cf7-tu-mensaje
Estos ajustes generan el siguiente código corto.
[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]La etiqueta de «menú desplegable» del Formulario
La etiqueta de formulario «menú desplegable» del Contact Form 7 te permite crear un menú desplegable con múltiples opciones. Los menús desplegables son útiles para situaciones en las que quieres que un visitante seleccione una opción específica para enviar con el formulario. Por ejemplo, si diriges una empresa de mantenimiento de WordPress, puedes configurar un menú desplegable que permita a un visitante elegir entre los servicios que ofreces.
Para la etiqueta del formulario de «menú desplegable», hemos configurado los siguientes ajustes.
- Nombre – menu-24 (autogenerado)
- Opciones – Opción 1, Opción 2, Opción 3, Opción 4
- Permitir selecciones múltiples – Marcado
- Insertar ub elemento en blanco como primera opción – Marcado
- Atributo de ID – cf7-menú-desplegable
- Atributo de clase – cf7-menú-desplegable
Estos ajustes generan el siguiente código corto.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]La etiqueta de «casillas de verificación» del Formulario
La etiqueta de formulario de «casillas de verificación» te permite crear casillas de verificación en HTML. Al igual que los menús desplegables, las casillas de verificación también pueden utilizarse para seleccionar opciones predefinidas. Dependiendo de la naturaleza de tu formulario de contacto, las casillas de verificación pueden funcionar mejor que los menús desplegables. Por ejemplo, si tienes un número reducido de opciones para elegir, una casilla de verificación reduce el número de clics necesarios para realizar una selección. Por otro lado, si tu formulario de contacto tiene muchas opciones, un menú desplegable puede funcionar mejor porque ocupa menos espacio vertical.
Para la etiqueta del formulario de «casillas de verificación», hemos configurado los siguientes ajustes.
- Nombre- casilla-de-verificación-948 (autogenerado)
- Opciones – Opción 1, Opción 2, Opción 3
- Envolver cada elemento con la etiqueta <label> – Marcado
- Atributo de ID – cf7-casilla-de-verificación
- Atributo de clase – cf7-casilla-de-verificación
Estos ajustes generan el siguiente código corto.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]La etiqueta de «botones de selección» del Formulario
La etiqueta del formulario «botenes de selección» permite crear botones de radio con múltiples opciones. A diferencia de las checkboxes y los drop-down menus, los radio buttons solo permiten seleccionar una única opción.
Para la etiqueta del formulario de «botenes de selección», hemos configurado los siguientes ajustes.
- Name – radio-708 (autogenerado)
- Options – Opción 1, Opción 2, Opción 3
- Envolver cada elemento con la etiqueta <label> – Marcado
- ID Attribute – cf7-radio
- Class Attribute – cf7-radio
Estos ajustes generan el siguiente código corto.
[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]La etiqueta de «aceptación» del Formulario
La etiqueta del formulario de «aceptación» del Contact Form 7 puede utilizarse para generar una sola casilla para marcar con el fin de aceptar los términos y condiciones. Con la configuración de la etiqueta del formulario de aceptación, puedes especificar un mensaje para que sea mostrado.
Para la etiqueta del formulario de «aceptación», hemos configurado los siguientes ajustes.
- Nombre- aceptación-545 (autogenerado)
- Condición- Marca esta casilla para aceptar los términos.
- ID Attribute – cf7-aceptación
- Class Attribute – cf7-aceptación
Estos ajustes generan el siguiente código corto.
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]La etiqueta de «cuestionario» del Formulario
La etiqueta del formulario «cuestionario» puede utilizarse para crear preguntas y respuestas básicas en el formulario de contacto. Para crear una pregunta de prueba, usa el siguiente formato para separar la pregunta y la respuesta – Pregunta|Respuesta. En la captura de pantalla de abajo, nuestra pregunta es «¿En qué año se lanzó WordPress?«, y la respuesta (separada por un carácter «|») es 2003.
Para la etiqueta del formulario de «cuestionario», hemos configurado los siguientes ajustes.
- Nombre – cuestionario-461 (autogenerado)
- Preguntas y respuestas – ¿En qué año se lanzó WordPress? |2003
- Atributo de ID – cf7-cuestionario
- Atributo de Clase – cf7-cuestionario
Estos ajustes generan el siguiente código corto.
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]La etiqueta de «archivo» del Formulario
La etiqueta «archivo» del Contact Form 7 te permite agregar la funcionalidad de carga de archivos a un formulario de contacto. Esto es útil para situaciones en las que quieres que un visitante pueda subir una imagen o un archivo PDF para enviar con el formulario. Por ejemplo, si tienes un blog de fotografía que publica envíos de invitados, puedes agregar la funcionalidad de carga de archivos para que las personas carguen imágenes.
En los ajustes de la etiqueta del formulario, puedes especificar una variedad de ajustes para asegurar tu formulario. Recomendamos que siempre establezcas un límite de tamaño de archivo para evitar que los usuarios maliciosos suban archivos enormes. Del mismo modo, especificar «formatos de archivo aceptados» te ayuda a bloquear el formulario en los formatos de archivo que deseas y esperas. Teniendo en cuenta el ejemplo del blog de fotografías, es posible que desees limitar el tamaño de los archivos a 1 MB (1024 KB) y los tipos de archivo aceptables a los formatos de imagen conocidos como JPG y PNG solamente.
Para la etiqueta del formulario de «archivo», hemos configurado los siguientes ajustes.
- Nombre – archivo-658 (autogenerado)
- Límite de tamaño de archivo – 1024kb
- Formatos de archivo aceptados – jpg|png|gif
- Atributo de ID – cf7-archivo
- Atributo de clase –cf7-archivo
Estos ajustes generan el siguiente código corto.
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]La etiqueta de «enviar» del Formulario
Por último, pero no menos importante, es la etiqueta del formulario de «enviar» del Contact Form 7. Como habrás adivinado, esta etiqueta de formulario te permite generar un botón de envío para un formulario de contacto.
Para la etiqueta del formulario de «enviar», hemos configurado los siguientes ajustes.
- Etiqueta – Enviar
- Atributo de ID – cf7-enviar
- Atributo de clase – cf7-enviar
Estos ajustes generan el siguiente código corto.
[submit id:cf7-submit class:cf7-submit "Submit"]Cómo Estructurar un Formulario de Contacto con Etiquetas de Formulario
Ahora que tenemos todas las etiquetas de los formularios preparadas, es hora de crear el formulario de contacto. En este punto, la configuración del formulario de contacto debería parecerse a la siguiente captura de pantalla. Toma nota de todas las etiquetas del formulario que hemos creado arriba. Con las etiquetas del formulario en su lugar, puede usar el atajo [contact-form-7] para incrustar el formulario en una publicación o página de WordPress.
En el editor de WordPress, pega el atajo en un bloque vacío.
Si utilizas el editor clásico de WordPress, puedes pegar el código abreviado en cualquier lugar del editor de contenido.
Ahora deberías poder ver el formulario de contacto en la página donde has añadido el atajo del Contact Form 7. Este es el aspecto de nuestro formulario de contacto con los ajustes mencionados anteriormente. Como puedes ver, el Contact Form 7 convierte automáticamente las etiquetas del formulario en HTML válido que se renderiza con los estilos CSS predeterminados incluidos en tu tema de WordPress.
Nuestro formulario de contacto en su estado actual es un buen punto de partida, pero le falta una característica clave. Las etiquetas del formulario como «texto», «correo electrónico» y «URL» soportan marcadores de posición, pero otros elementos como «casillas de verificación» y «botones de selección» no. Sin las etiquetas adecuadas, las casillas de verificación y los botones de selección no serán muy útiles para los visitantes porque no tienen ningún contexto. ¡Por suerte, añadir etiquetas en el Contact Form 7 es muy fácil!
Cómo añadir etiquetas de formulario en el Contact Form 7
Hay dos formas de añadir etiquetas a las etiquetas del Contact Form 7. Para las etiquetas de formulario de abajo, puedes simplemente envolver la etiqueta del formulario con una etiqueta.
- Texto
- Correo electrónico
- URL
- Teléfono
- Número
- Fecha
- Área de texto
- Aceptación
- Cuestionario
- Archivo
Echa un vistazo al ejemplo de la etiqueta del formulario de «texto» a continuación.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Para añadir una etiqueta a esta etiqueta del formulario, podemos reemplazar la etiqueta del formulario con el recorte de abajo. Fíjate en la instancia adicional de «Tu Nombre» justo después de la <label> etiqueta de apertura.
<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>Esto es lo que parece este cambio en nuestro formulario de contacto. En este caso, la etiqueta recién creada sirve para el mismo propósito que el marcador de posición. Sin embargo, si no quisiéramos especificar un marcador de posición dentro de la etiqueta del formulario, entonces la etiqueta ayudaría a identificar el propósito de un cuadro de entrada específico.
En el caso de las etiquetas de formularios que muestran múltiples controles de formularios como casillas de verificación, botones de selección, y menús desplegables, si se envuelve la </label> etiqueta del formulario dentro de una etiqueta se produce un error. Esto sucede porque una <label> etiqueta se supone que solo se debe usar con un único control de formulario. La naturaleza de las casillas de verificación, los botones de selección y las opciones de los menús desplegables implican múltiples controles de formulario, por lo que son incompatibles con la solución de etiquetado predeterminada.
Para las casillas de verificación, botones de selección y los menús desplegables, tendrías que añadir un parámetro use_label_element dentro del atajo. Echa un vistazo al ejemplo de la etiqueta del formulario de la casilla de verificación, donde use_label_element está en negrita.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Una vez añadido el parámetro use_label_element, puedes añadir una etiqueta directamente encima de la etiqueta del formulario en el editor del contact form.
Para completar, hemos añadido etiquetas a todas las etiquetas del formulario de contacto. Probablemente no necesitarías hacer esto para un sitio de producción porque algunas etiquetas de formulario ya incluyen marcadores de posición. En cualquier caso, queríamos demostrar cómo funcionan las etiquetas.
Este es el aspecto de nuestro formulario de contacto:
Configuración de los Ajustes del Correo Electrónico en Contact Form 7
Ahora que hemos configurado la estructura de nuestro formulario de contacto, es hora de echar un vistazo a la configuración de la entrega de correo electrónico en el Contact Form 7. Aunque la configuración de entrega de correo electrónico por defecto debería funcionar bien para la mayoría de los sitios, sigue siendo importante entender los diversos ajustes en caso de que tu sitio o caso de uso requiera una configuración especial.
Para acceder a la configuración del envío de correo, vaya al editor del contact form y seleccione la pestaña «Mail».
Los ajustes de entrega de correo electrónico del Contact Form 7 te permiten personalizar las plantillas y los parámetros que se utilizan para generar y enviarte una notificación después de que alguien realice un envío de formulario. Si utilizas una configuración incorrecta, es posible que no se te notifique de los envíos de formularios. Por lo tanto, es importante probar el envío del formulario después de crear un formulario de contacto y cambiar los parámetros.
El Contact Form 7 te permite configurar los siguientes ajustes de entrega del correo electrónico.
- Para – la dirección de correo electrónico a la que enviar una notificación.
- De – la dirección de correo electrónico desde la que enviar una notificación.
- Asunto – el asunto del correo electrónico de notificación.
- Cabeceras adicionales – especifica las cabeceras adicionales del correo electrónico como «reply-to».
- Cuerpo de mensaje – el cuerpo del correo electrónico de notificación.
- Archivos adjuntos – especifica los archivos adjuntos que se incluirán en el correo electrónico de notificación.
Ahora, repasemos cada escenario para entender mejor cómo pueden impactar en la entrega del correo electrónico en el Contact Form 7.
El campo «Para»
Asegúrate de especificar una dirección de correo electrónico real para el ajuste «Para». De forma predeterminada, el Contact Form 7 asignará la dirección de correo electrónico asociada a tu cuenta de usuario de WordPress a la opción «Para». Si tu dirección de correo electrónico de WordPress no es válida, asegúrate de actualizarla en la configuración de tu perfil y cambia también la dirección de correo electrónico en el Contact Form 7.
El campo «De»
El ajuste «De» debe utilizar el siguiente formato – Your Name. Para nuestra configuración del correo electrónico del formulario de contacto, usamos kinstalife <[email protected]>.
Por defecto, el Contacto 7 rellenará este campo con [email protected]. Debes asegurarte de que esta dirección de correo electrónico es válida porque algunos hosts de WordPress bloquean el correo electrónico saliente a direcciones no válidas. Hay varias maneras de hacer que esta dirección de correo electrónico sea válida. Puedes configurar una cuenta de correo electrónico dedicada para [email protected] o puedes habilitar la funcionalidad de «catch-all» en tu proveedor de servicios de correo electrónico. Si no puedes configurar esta dirección de correo electrónico, te recomendamos que la cambies por una dirección de correo electrónico válida para evitar problemas de entrega.
El campo «Asunto»
La opción «Asunto» puede utilizarse para especificar una línea de asunto para los correos de notificación. Por defecto, el Contact Form 7 establece el asunto como Site Name “[your-subject]" – el nombre del asunto en la plantilla del formulario por defecto del Contact Form 7.
Si no tienes una etiqueta de formulario llamada «[your-subject]» en tu formulario, asegúrate de cambiarla por otra. Por ejemplo, si solo tienes una etiqueta de formulario para capturar el nombre de un visitante (por ejemplo, [tu-nombre]), podrías cambiar la línea de asunto a You’ve Received a Message from [your-name].
El campo «Cabeceras adicionales»
En «Cabeceras adicionales», puedes especificar cabeceras de correo electrónico como reply-to, CC y BCC. Por defecto, el Contact Form 7 añade el siguiente encabezado – Reply-To: [tu-email]. Esta cabecera te permite responder a la dirección de correo electrónico especificada en un formulario de contacto enviado.
La cabecera de respuesta predeterminada está bien si utilizas la etiqueta del formulario de correo electrónico predeterminado del Contact Form 7. Si no lo haces, asegúrate de que coincida con el nombre de la etiqueta del formulario de correo electrónico. En el caso de nuestro formulario de contacto, el nombre de la etiqueta del formulario de correo electrónico es «email-632», por lo que la etiqueta de respuesta al formulario tendría que cambiarse a Reply-To: [email-632].
El «Cuerpo del mensaje»
El siguiente es el «Cuerpo del mensaje», que determina el contenido del cuerpo del correo electrónico de notificación. La plantilla predeterminada del Contact Form 7 utiliza las etiquetas de formulario your-name], [your-email], [your-subject] y [your-message], y tiene este aspecto:
From: [your-name]
Subject: [your-subject]
Message Body:
[your-message]
--
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)Asegúrate de cambiar estas etiquetas del formulario si no las usas en tu plantilla de formulario de contacto. Dado que el formulario de contacto que hemos creado recoge mucha información, podemos configurar el cuerpo del mensaje con etiquetas de formulario adicionales como esta:
Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Contact Form 7 Configuración del correo electrónico – Archivos adjuntos
Si tu formulario implica subir un archivo, puedes incluir el archivo con el correo electrónico de notificación. En nuestro formulario de contacto, tenemos una etiqueta de formulario de carga de archivos llamada «[file-658]». Por lo tanto, podemos agregar esta etiqueta de formulario en «Archivos adjuntos» para asegurarnos de que el archivo se incluya en el correo electrónico de notificación.
Contact Form 7 Problemas de Entrega del Correo Electrónico
Si encuentras que el Contact Form 7 no está enviando correos electrónicos, hay algunas cosas que puedes comprobar antes de contactar con un desarrollador de WordPress para obtener ayuda.
- Comprueba si tu servidor está enviando otro tipo de correos electrónicos. Para probarlo, puedes activar otra acción de envío de correo electrónico haciendo un comentario de prueba en una entrada de blog o enviando una solicitud de restablecimiento de contraseña en tu página de inicio de sesión de WordPress. Si recibes un correo electrónico después de realizar una de estas acciones, es probable que el problema esté relacionado con la configuración del Contact Form 7. Si no recibes correos electrónicos, ponte en contacto con el equipo de asistencia de tu host y hazles saber que tienes un problema con el envío de correos electrónicos.
- Asegúrate de que los campos «De» y «Para» de la configuración de entrega de correo de tu formulario de contacto estén configurados correctamente. Para que el Contact Form 7 funcione correctamente, ambos campos deben tener direcciones de correo electrónico reales.
Contact Form 7 Formulario de Envío de Mensajes
El Contact Form 7 le permite personalizar una variedad de mensajes de envío de formularios. Estos mensajes se muestran después de que se cumpla una determinada condición. Por ejemplo, si un visitante olvida rellenar un campo obligatorio, el Contact Form 7 mostrará un mensaje de «El campo es obligatorio». Para la mayoría de los casos de uso, los mensajes predeterminados deberían funcionar perfectamente. Sin embargo, si deseas personalizar los mensajes, puedes hacerlo haciendo clic en la pestaña «Mensajes» del editor del formulario de contacto.
Cómo Asegurar Tu Formulario de Contacto
A medida que los robots automatizados se han vuelto más inteligentes y omnipresentes a lo largo de los años, el spam se ha convertido en un problema importante para los formularios de contacto. Dado que los formularios de contacto suelen estar disponibles al público en Internet, es bastante fácil para los web scrapers detectarlos y disparar los mensajes de spam a tu buzón de correo electrónico. Afortunadamente, hay varias maneras de evitar los spammers y proteger tu formulario de contacto.
Asegura tu Contact Form 7 con reCAPTCHA
Si alguna vez has enviado un formulario por Internet, probablemente ya estés familiarizado con reCAPTCHA, una tecnología desarrollada por Google para identificar el comportamiento automatizado de los robots. Las versiones antiguas de reCAPTCHA (V2) requerían que los usuarios pasaran un rompecabezas o un desafío.
La última versión de reCAPTCHA (V3) no requiere ninguna interacción de los usuarios. En cambio, monitoriza de forma transparente la actividad de los usuarios en segundo plano para distinguir entre los visitantes humanos y los visitantes bot. Dado que el Contact Form 7 es compatible con reCAPTCHA V3, recomendamos utilizar esta última versión porque proporciona una mejor experiencia de usuario para los visitantes.
Para configurar reCAPTCHA, primero tendrás que generar una clave API. Para hacerlo, ingresa a tu cuenta de Google y ve a la página de configuración de reCAPTCHA.
Pasa por el formulario de registro para crear tu reCAPTCHA.
- Etiqueta- Especifica una etiqueta de tu elección.
- Tipo de reCAPTCHA – El Contact Form 7 soporta reCAPTCHA v3, así que selecciona esa versión.
- Dominios – Si tu sitio utiliza un dominio raíz, añade la versión no www y www de tu dominio. Si tu sitio utiliza un subdominio, solo tienes que añadir el subdominio.
- Propietarios – la dirección de correo electrónico asociada a tu cuenta de Google se añadirá como propietario de forma predeterminada. No dudes en añadir otras direcciones de correo electrónico si es necesario.
Después de rellenar todas las opciones, haga clic en Enviar. Te mostrará la «Clave de sitio» y la «Clave secreta» específicas del sitio. Asegúrate de guardar estas claves en un lugar seguro porque tendrás que añadirlas al Contact Form 7.
A continuación, haz clic en «Contacto» en la barra lateral del panel de control de WordPress y haz clic en Integration. Selecciona la opción reCAPTCHA, y pega la clave de tu sitio y la clave secreta en sus respectivos campos. Finalmente, haz clic en Integración para finalizar la integración de reCAPTCHA.
Después de configurar reCAPTCHA en el Contact Form 7, verás un logo de reCAPTCHA en la esquina inferior derecha de tu página de formulario de contacto. Esto significa que reCAPTCHA está activo y protege tu formulario de contacto de los envíos de spam.
Asegura tu formulario de contacto con Cloudflare (Opcional)
Si utilizas Cloudflare para proteger tu sitio, puede establecer una regla de página especial para tu página de formulario de contacto para reducir el número de spam en los formularios de contacto.
Para agregar una regla de página, haga clic en la pestaña «Page Rules» y utiliza la siguiente configuración para ayudar a asegurar tu página de contacto.
- If the URL Matches –*your-domain.com/your-contact-page/*
- Browser Integrity Check – On
- Security Level – High
La función «Browser Integrity Check» de Cloudflare analiza las cabeceras del HTTP. Si detecta un encabezado HTTP que es comúnmente usado por robots automatizados y spammers, niega la solicitud a tu sitio. Poner el «Security Level» en alto desafiará a todos los visitantes que hayan mostrado un comportamiento malicioso en las últimas dos semanas.
Al limitar esta configuración a tu página de contacto con la regla de coincidencia de URL, otras páginas de tu sitio no se verán afectadas por estas reglas de la página. Recomendamos esta configuración porque las páginas normales de «solo lectura» de tu sitio no suelen requerir un ajuste de nivel de seguridad más alto.
Resumen
¡El Contact Form 7 es el plugin de formularios de contacto más popular y con una buena razón! Se puede usar para crear todo, desde formularios de contacto básicos, pasando por cuestionarios de preguntas y respuestas, hasta formularios complejos que admiten archivos adjuntos y menús desplegables.
Lo mejor de todo es que viene con soporte reCAPTCHA incorporado para ayudar a mantener seguro tu formulario de contacto contra los spammers.
¿Utilizas el Contact Form 7 en tu sitio de WordPress? Si no, ¿cuál es tu elección preferida? ¡Háznoslo saber en la sección de comentarios de abajo!
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Deja una respuesta