¿Desea aumentar el compromiso de sus clientes con notificaciones por correo electrónico personalizadas para su sitio de WordPress? Con solo unos pasos, puedes crear notificaciones por correo electrónico personalizadas que dejen una impresión duradera en tu audiencia.
Este tutorial le mostrará cómo personalizar sus correos electrónicos de notificación WPForms.
En este artículo
Antes de empezar, tendrás que crear un nuevo formulario o editar uno existente para acceder al generador de formularios. A continuación, asegúrate de completar la configuración básica de notificación de formularios.
Acceso a la configuración de personalización del correo electrónico
Para personalizar sus notificaciones por correo electrónico, primero deberá ir a WPForms " Configuración y hacer clic en la pestaña Correo electrónico.
Personalización de las notificaciones por correo electrónico
Luego de hacer click en la pestaña Email, encontrará todas las configuraciones que le permiten personalizar las notificaciones por email enviadas a través de WPForms. Cubriremos cada una de las opciones de personalización en las siguientes secciones.
Nota: Las configuraciones de las siguientes secciones se aplican a todos los correos de notificación de WPForms de su sitio, no sólo a los de un formulario individual.
Elegir una plantilla de correo electrónico
WPForms proporciona muchas plantillas que puede utilizar para personalizar el aspecto de sus correos electrónicos de notificación.
En la sección Plantilla, encontrará todas las plantillas disponibles que WPForms soporta. Cada una de las plantillas de email tiene su estilo y características únicas. A continuación, hemos resumido las plantillas disponibles.
- Clásico
- Compacto
- Moderno
- Elegante
- Tecnología
- Texto sin formato
Nota: Necesitará una licencia válida de WPForms para utilizar las plantillas Modern, Elegant y Tech.
Por defecto, todos los correos electrónicos utilizan el formato Clásico. Pero puedes actualizar la plantilla y la combinación de colores para adaptarlas a los estilos de tu marca.
Nota: Si previamente configuró la plantilla HTML antes de actualizar a WPForms versión 1.8.5 o superior, verá la plantilla Legacy seleccionada por defecto. Esta plantilla no soporta algunas de las opciones modernas de estilo como establecer un esquema de colores o cambiar la familia de fuentes. Vea nuestra sección de FAQ para más detalles.
Para seleccionar una plantilla, simplemente pasa el ratón por encima de la plantilla que quieras utilizar y haz clic en el botón Elegir. En este ejemplo, elegiremos la plantilla Modern, pero puedes elegir la que quieras.
En cualquier momento, puede hacer clic en el botón Vista previa para ver cómo quedaría cada una de las plantillas en la bandeja de entrada de su usuario.
Este es un ejemplo del aspecto de la plantilla de correo electrónico Modern.
Si prefieres cambiar a notificaciones compactas, selecciona Compacta en la sección Plantilla . A continuación, pulsa Vista previa para ver cómo queda.
He aquí un ejemplo de cómo quedaría un correo electrónico compactado.
La opción Texto sin formato elimina todos los estilos del correo electrónico de notificación. Así es como se ve cuando se previsualiza la plantilla.
Ajuste de la apariencia
WPForms le permite personalizar sus notificaciones de correo electrónico con un tema claro u oscuro para que coincida con el estilo de su marca. Para cambiar el tema visual de sus correos electrónicos, simplemente seleccione la opción Claro u Oscuro de la sección Apariencia. Esto asegura que sus correos electrónicos se verán muy bien y se mantendrán consistentes con su marca en las bandejas de entrada de sus usuarios.
Una vez que elija su modo de apariencia preferido, puede establecer su propia imagen de encabezado, esquema de color único y tipografía para ese modo, asegurando una apariencia cohesiva y atractiva para sus correos electrónicos tanto en temas claros como oscuros.
Nota: La apariencia del correo electrónico puede variar según la configuración del modo oscuro de tu dispositivo. Para obtener una vista previa precisa, asegúrate de que la configuración de tu dispositivo coincide con la opción de apariencia elegida.
Establecer una imagen de cabecera de correo electrónico
Si desea añadir una imagen de cabecera o un logotipo a sus correos electrónicos de notificación, desplácese hasta la sección Imagen de cabecera. A continuación, haz clic en Cargar imagen para seleccionar tu archivo de imagen de cabecera.
Para obtener la mejor experiencia de visualización en todos los tamaños de pantalla, recomendamos utilizar una imagen de 300 píxeles de ancho y 100 píxeles de alto.
Después de subir la imagen, verás un menú desplegable para seleccionar el tamaño de la imagen que deseas utilizar para las notificaciones por correo electrónico. Los tamaños disponibles son Pequeño, Mediano y Grande. Al seleccionar cualquiera de estos tamaños, la resolución de la imagen se ajustará al tamaño elegido.
La imagen también se ajusta a la pantalla del usuario. Esto significa que si estás viendo el correo de notificación desde un dispositivo móvil, se ajustará al tamaño de la pantalla.
Para más detalles, consulte nuestro tutorial sobre cómo añadir una imagen de cabecera a los correos electrónicos de notificación.
Cambiar la combinación de colores
WPForms provee una sección de Esquema de Colores que le permite personalizar los colores de los elementos en el email de notificación. A continuación explicamos todos los esquemas de color disponibles:
Fondo
Este color controla la apariencia externa 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. Esta es una imagen de ejemplo con un esquema de color blanco para el cuerpo del contenedor.
Texto
Este es el color que se utilizará para todos los textos en el correo electrónico de notificación. El esquema de color por defecto es un color de texto oscuro como se ve en la imagen de abajo.
Enlaces
Este es el esquema de color para todos los enlaces en el correo electrónico de notificación. En la imagen siguiente, 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, puede introducir el valor HEX en el campo de color o hacer clic sobre él para abrir el selector de color.
Con el selector de color, puedes ajustar el color a tu gusto.
Actualizar la tipografía del correo electrónico
Tipografía controla qué familia de fuentes se utilizará para los correos electrónicos de notificación de su sitio. WPForms actualmente soporta fuentes Sans Serif y Serif.
Para actualizar la familia de fuentes de su plantilla de correo electrónico, haga clic en el menú desplegable Tipografía y seleccione la fuente que desea utilizar.
Cuando 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 los cambios.
Vista previa de la plantilla de correo electrónico
Después de guardar los cambios, puede previsualizarla para ver cómo quedaría en la bandeja de entrada de su usuario. Para ello, haga clic en el enlace Vista previa de la plantilla de correo electrónico en el menú desplegable Tipografía.
Esto abrirá una vista previa de su 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 utilizar el modo oscuro, el correo electrónico de notificación se ajustará automáticamente a la apariencia del dispositivo del usuario.
Personalización de notificaciones para formularios individuales
Si lo desea, puede 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ácese hacia abajo y haga clic en Avanzado para acceder a la configuración avanzada. Debería ver un menú desplegable Plantilla de correo electrónico.
Por defecto, esta opción está configurada como Plantilla predeterminada para todos los formularios de su sitio. Esto significa que sus formularios utilizarán la configuración global que configuró desde la página de configuración.
Para anular la plantilla predeterminada, haga clic en el menú desplegable Plantilla de correo electrónico y seleccione la plantilla que desee utilizar.
También puede hacer clic en el enlace ver plantillas para ver todas las plantillas disponibles.
En la ventana superpuesta que aparece, seleccione la que desea utilizar para el formulario específico.
Una vez hecho esto, asegúrese de guardar el formulario para actualizar la plantilla.
Nota: Al elegir una plantilla desde el constructor de formularios se aplicarán los estilos por defecto de la plantilla. No podrás personalizar los colores ni la tipografía de la plantilla desde el generador de formularios.
Preguntas frecuentes
Estas son las respuestas a algunas de las preguntas más frecuentes sobre la personalización de las 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 estaba usando la plantilla HTML antes de actualizar a WPForms versión 1.8.5 o superior, es probable que aún tenga la plantilla HTML disponible en su página de configuración de Email. Esta plantilla se llama Legacy en la sección Template.
Si no ve la plantilla Legacy, puede mostrarla añadiendo un filtro personalizado al archivo function.php de su tema. A continuación se muestra el fragmento de código para agregar a su sitio.
/** * Este fragmento de código fuerza el uso de la plantilla de correo electrónico Legacy que se llamaba "HTML" en v1.8.4 e inferiores. */ $settings = (array) get_option( 'wpforms_settings', [] ); $settings['email-template'] = 'default'; update_option( 'wpforms_settings', $settings );
Nota: Consulte nuestra guía sobre la adición de código PHP personalizado para WPForms si necesita orientación adicional.
Si utilizas 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.
Debido a que la plantilla HTML no es soportada por defecto en WPForms versión 1.8.5 o superior, no podrá aplicarle algunas de las nuevas opciones de estilo.
Aún puede actualizar el color de fondo de su plantilla. Sin embargo, el uso de la combinación de colores y la configuración de la tipografía no es compatible con la plantilla heredada.
Ya está. Ahora ya sabes cómo personalizar tus correos electrónicos de notificación de formularios.
No dejes de explorar nuestros otros tutoriales sobre notificaciones de formularios para aprender a sacarles el máximo partido.