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

¿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.


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.

Configuración del 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

Plantillas de correo electrónico WPForms

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.

Elija una plantilla moderna

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.

Vista previa de la plantilla moderna

Este es un ejemplo del aspecto de la plantilla de correo electrónico Modern.

Un ejemplo de correo electrónico de notificación utilizando la opción de plantilla moderna

Si prefieres cambiar a notificaciones compactas, selecciona Compacta en la sección Plantilla . A continuación, pulsa Vista previa para ver cómo queda.

Seleccionar plantilla compacta

He aquí un ejemplo de cómo quedaría un correo electrónico compactado.

Ejemplo de notificación por correo electrónico compactada

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.

Ejemplo de notificación por correo electrónico en texto sin formato

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.

Configuración de las opciones de apariencia

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.

El campo de archivo de carga de imagen de cabecera en la configuración de correo electrónico WPForms

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.

Menú desplegable del tamaño de la imagen de cabecera

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:

WPForms esquema de color de correo electrónico

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.

Color de fondo

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.

Color de la carrocería

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.

Color del texto

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.

Color del enlace

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.

Actualizar el color de fondo

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.

Configuración tipográfica

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.

Opciones desplegables de tipografía

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.

Guardar cambio

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.

Vista previa de la plantilla de correo electrónico

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.

Vista previa de plantillas de correo personalizadas

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.

Variante en modo oscuro de la plantilla de correo electrónico

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.

Haga clic en la configuración de notificaciones en el generador de formularios

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.

Configuración avanzada de notificaciones

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.

Desplegable de plantillas de correo electrónico

También puede hacer clic en el enlace ver plantillas para ver todas las plantillas disponibles.

Haga clic en ver plantillas

En la ventana superpuesta que aparece, seleccione la que desea utilizar para el formulario específico.

Elija una plantilla de la superposición

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.

El mejor plugin de WordPress para crear formularios arrastrando y soltando

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.

Active JavaScript en su navegador para rellenar este formulario.