Personalización de los correos electrónicos de notificación de formularios

¿Le gustaría aumentar la participación del cliente con notificaciones por correo electrónico personalizadas para su sitio de WordPress? Con solo unos pocos pasos, puede crear notificaciones por correo electrónico personalizadas que dejen una impresión duradera en su audiencia.

Este tutorial le mostrará cómo personalizar sus correos electrónicos de notificación de WPForms.

---

Antes de comenzar, deberá crear un formulario nuevo o editar uno existente para acceder al creador de formularios. Luego, asegúrese de completar la configuración básica de notificación del formulario.

Acceso a la configuración de personalización de correo electrónico

Para personalizar sus notificaciones por correo electrónico, primero deberá ir a WPForms » Ajustes y hacer clic en la pestaña Correo electrónico.

Personalización de las notificaciones por correo electrónico

Después de hacer clic en la pestaña Correo electrónico, encontrará todas las configuraciones que le permiten personalizar las notificaciones por correo electrónico enviadas a través de WPForms. Cubriremos cada una de las opciones de personalización en las siguientes secciones.

Elección de una plantilla de correo electrónico

WPForms proporciona muchas plantillas que puede utilizar para personalizar la apariencia de sus correos electrónicos de notificación.

En la sección Plantilla, encontrará todas las plantillas disponibles que admite WPForms. Cada una de las plantillas de correo electrónico tiene su estilo y características únicas. A continuación, hemos descrito las plantillas disponibles.

• Clásica
• Compacta
• Moderno
• Elegante
• Tecnológico
• Texto plano

Por defecto, todos los correos electrónicos utilizan el formato Clásico. Pero puede actualizar la plantilla y la combinación de colores para que coincidan con los estilos de su marca.

Para seleccionar una plantilla, simplemente pase el cursor sobre la plantilla que desea usar y haga clic en el botón Elegir. Para este ejemplo, elegiremos la plantilla Moderna, pero puede elegir la que desee.

En cualquier momento, puede hacer clic en el botón Vista previa para ver cómo se verían las plantillas en la bandeja de entrada de su usuario.

Aquí tiene un ejemplo de cómo se ve la plantilla de correo electrónico Moderna.

Si prefiere cambiar a notificaciones compactas, seleccione Compacto en la sección Plantilla. Luego, presione Vista previa para ver cómo se ve.

Aquí tiene un ejemplo de cómo se vería un correo electrónico compactado.

La opción de texto plano elimina todos los estilos del correo electrónico de notificación. Así es como se ve al previsualizar la plantilla.

Ajuste de la configuración de apariencia

WPForms te permite personalizar tus notificaciones por correo electrónico con un tema claro u oscuro para que coincida con el estilo de tu marca. Para cambiar el tema visual de tus correos electrónicos, simplemente selecciona la opción Claro u Oscuro en la sección Apariencia. Esto asegura que tus correos electrónicos se vean geniales y se mantengan consistentes con tu marca en la bandeja de entrada de tus usuarios.

Una vez que elijas tu modo de apariencia preferido, puedes establecer su propia imagen de encabezado, esquema de color único y tipografía para ese modo, asegurando un aspecto cohesivo y atractivo para tus correos electrónicos tanto en temas claros como oscuros.

Configuración de una imagen de encabezado de correo electrónico

Si deseas agregar una imagen o logotipo en el encabezado de tus correos electrónicos de notificación, desplázate hasta la sección Imagen del encabezado. Luego haz clic en Subir imagen para seleccionar el archivo de tu imagen de encabezado.

Para una mejor experiencia de visualización en todos los tamaños de pantalla, recomendamos usar una imagen de 300 píxeles de ancho y 100 píxeles de alto.

Después de subir tu imagen, verás un menú desplegable para seleccionar el tamaño de la imagen a usar en tus notificaciones por correo electrónico. Los tamaños disponibles incluyen Pequeño, Mediano y Grande. Seleccionar cualquiera de estos tamaños ajustará la resolución de la imagen para que coincida con el tamaño elegido.

La imagen también se ajusta a la pantalla del usuario. Esto significa que si estás viendo el correo electrónico de notificación desde un dispositivo móvil, se ajustará para adaptarse al tamaño de la pantalla.

Para más detalles, consulta nuestro tutorial sobre cómo agregar una imagen de encabezado a los correos electrónicos de notificación.

Cambio de la combinación de colores

WPForms proporciona una sección de Esquema de color que te permite personalizar los colores de los elementos del correo electrónico de notificación. A continuación, hemos explicado todos los esquemas de color disponibles:

Fondo

Este color controla la apariencia exterior de la plantilla de correo electrónico. A continuación, se muestra un ejemplo con un color de fondo azul claro.

Cuerpo

El color del cuerpo controla la apariencia del contenedor de la plantilla de correo electrónico. Esta es el área donde reside el correo electrónico de notificación real. Aquí tienes una imagen de ejemplo con un esquema de color blanco para el contenedor del cuerpo.

Texto

Este es el color que se utilizará para todos los textos del correo electrónico de notificación. El esquema de color predeterminado es un color de texto oscuro, como se ve en la imagen a continuación.

Enlaces

Este es el esquema de color para todos los enlaces del correo electrónico de notificación. En la imagen a continuación, la dirección de correo electrónico es un enlace que utiliza el color naranja predeterminado para los enlaces.

Para actualizar cualquiera de los colores, puedes introducir el valor HEX en el campo de color o hacer clic en él para abrir el selector de color.

Con el selector de color, puedes ajustar el color a tu gusto.

Actualización de la tipografía del correo electrónico

La tipografía controla qué familia de fuentes se utilizará para los correos electrónicos de notificación de tu sitio. WPForms actualmente admite fuentes Sans Serif y Serif.

Para actualizar la familia de fuentes de tu plantilla de correo electrónico, haz clic en el menú desplegable Tipografía y selecciona la fuente que deseas usar.

Una vez que hayas terminado de personalizar tu plantilla de correo electrónico, desplázate hacia abajo y haz clic en el botón Guardar configuración para guardar tus cambios.

Vista previa de su plantilla de correo electrónico

Después de guardar tus cambios, puedes previsualizarla para ver cómo quedaría en la bandeja de entrada de tu usuario. Para ello, haz clic en el enlace Previsualizar plantilla de correo electrónico en el menú desplegable de Tipografía.

Esto abrirá una vista previa de tu plantilla de correo electrónico de notificación en una nueva pestaña del navegador. La vista previa aplicará todas las personalizaciones que acabas de configurar.

Si el dispositivo del usuario está configurado para usar el modo oscuro, el correo electrónico de notificación se ajustará automáticamente para que coincida con la apariencia del dispositivo del usuario.

Personalización de notificaciones para formularios individuales

Si lo deseas, puedes personalizar la plantilla de correo electrónico para un formulario específico en el constructor de formularios. Para ello, abre el formulario deseado y ve a Configuración » Notificaciones.

A continuación, desplázate hacia abajo y haz clic en Avanzado para acceder a la configuración avanzada. Deberías ver un menú desplegable Plantilla de correo electrónico.

Por defecto, esta opción está configurada como Plantilla predeterminada para todos los formularios de tu sitio. Esto significa que tus formularios utilizarán la configuración global que configuraste en la página de configuración.

Para anular la plantilla predeterminada, haz clic en el menú desplegable Plantilla de correo electrónico y selecciona la plantilla que deseas utilizar.

Alternativamente, puedes hacer clic en el enlace ver plantillas para ver todas las plantillas disponibles.

En la superposición que aparece, selecciona la que deseas utilizar para el formulario específico.

Una vez hecho esto, asegúrate de guardar tu formulario para actualizar la plantilla.

Preguntas frecuentes

Estas son las respuestas a algunas de las preguntas más frecuentes sobre la personalización de plantillas de correo electrónico de notificación.

¿No veo la Plantilla HTML. ¿Cómo puedo incluirla en la biblioteca de plantillas de correo electrónico?

Si estabas utilizando la plantilla HTML antes de actualizar a WPForms versión 1.8.5 o superior, es probable que todavía tengas la plantilla HTML disponible en tu página de configuración de correo electrónico. Esta plantilla se llama Legado en la sección Plantilla.

Si no ves la plantilla Legado, puedes mostrarla añadiendo un filtro personalizado al archivo function.php de tu tema. A continuación, se muestra el fragmento de código para añadir a tu sitio.

/**
 * This code snippet forces using the Legacy email template that was called the "HTML" in v1.8.4 and below.
 */
$settings = (array) get_option( 'wpforms_settings', [] );
​
$settings['email-template'] = 'default';
​
update_option( 'wpforms_settings', $settings );

Si estás utilizando el plugin WPCode, puedes importar fácilmente el código anterior a tu sitio. Para más detalles, consulta nuestro tutorial de integración de fragmentos de código.

Dado que la plantilla HTML no es compatible por defecto en WPForms versión 1.8.5 o superior, no podrás aplicarle algunas de las opciones de estilo más nuevas.

Aún puedes actualizar el color de fondo de tu plantilla. Sin embargo, el uso de la combinación de colores y la configuración de tipografía no son compatibles con la plantilla Legado.

¡Eso es todo! Ahora sabes cómo personalizar los correos electrónicos de notificación de tus formularios.

Asegúrese de explorar nuestros otros tutoriales sobre notificaciones de formularios para aprender cómo puede sacarles el máximo provecho.