### [Cómo personalizar los estilos en la plantilla de correo electrónico](https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/) **Publicado:** 16 de diciembre de 2020 **Autor:** Equipo Editorial **Extracto:** Este tutorial te mostrará cómo personalizar los estilos en las plantillas de correo electrónico que se utilizan para todas las notificaciones por correo electrónico. **Contenido:** ¿Te gustaría personalizar los estilos de la plantilla de correo electrónico para tus notificaciones por correo electrónico? Desde la versión 1.8.5, WPForms tiene muchos estilos de plantilla diferentes para elegir para las notificaciones por correo electrónico. Puedes leer más sobre estas plantillas revisando [esta publicación de anuncio](https://wpforms.com/introducing-wpforms-1-8-5-new-email-templates/ "Presentamos WPForms 1.8.5 – NUEVAS plantillas de correo electrónico"). Sin embargo, si deseas extender el estilo de estas plantillas, este tutorial te guiará a través de la mejor manera de lograrlo. Por defecto, WPForms ya ofrece la capacidad de cambiar el esquema de colores de cada una de las plantillas, así como agregar una imagen de encabezado. Para más detalles sobre cómo hacerlo, [revisa esta documentación](https://wpforms.com/docs/how-to-add-custom-header-image-in-your-wpforms-email-template/ "Cómo agregar una imagen de encabezado personalizada en tu plantilla de correo electrónico de WPForms"). Cada plantilla, con la excepción de **Texto sin formato**, te dará la opción de establecer tu esquema de colores y cargar un logotipo de encabezado. Simplemente navega al **panel de WordPress » WPForms » Ajustes » Correo electrónico** para establecer tus preferencias sobre qué plantilla, así como personalizar el diseño de la plantilla.  ## Creación de tu formulario Para comenzar, necesitarás crear tu formulario y agregar tus campos. Si necesitas ayuda para crear tu formulario, [consulta esta documentación](https://wpforms.com/docs/creating-first-form/ "Cómo crear tu primer formulario").  ¿Buscas la plantilla **Legacy**? Esta plantilla se retiró con la versión 1.8.5, sin embargo, aún puedes habilitarla si lo deseas. Si buscas esta plantilla de correo electrónico, [revisa este tutorial](https://wpforms.com/developers/how-to-enable-legacy-email-template/ "Cómo habilitar la plantilla de correo electrónico heredada"). ## Modificación de los mensajes de correo electrónico usando HTML Si deseas agregar personalización adicional a tus notificaciones por correo electrónico simplemente poniendo en negrita las etiquetas en el texto del correo electrónico, también puedes hacerlo fácilmente editando tu formulario y en la pestaña **Ajustes » Notificaciones** dentro del constructor de formularios, cambia tu campo **Mensaje**. Puedes reemplazar `{all_fields}` en tu campo **Mensaje** por: `Nombre: {field_id="0"}Correo electrónico: {field_id="1"}Mensaje: {field_id="2"}`  Usamos Smart Tags en nuestro campo **Mensaje** para construir esta respuesta. Para obtener más ayuda sobre el uso de campos de formulario completados como Smart Tags, [revisa este tutorial](https://wpforms.com/docs/how-to-use-smart-tags-in-wpforms/#fieldid "Cómo usar Smart Tags en WPForms").  ## Personalización de la plantilla de correo electrónico Si deseas cambiar la apariencia de las plantillas de correo electrónico de WPForms pero te intimida un poco la codificación, ¡no te preocupes! Hay una forma sencilla de hacerlo sin profundizar demasiado en detalles técnicos. Imagina tus plantillas de correo electrónico como la ropa que usan tus formularios cuando envían mensajes. Podemos modificar estos atuendos ajustando los archivos de plantilla en tu tema hijo. Para obtener más información sobre cómo crear un tema hijo, ¡[revisa esta útil guía](https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ "Cómo crear un tema hijo de WordPress (Guía para principiantes)")! Digamos que quieres darle un color de fondo diferente a la plantilla **Classic**. Esto es lo que haces: **Ve al armario:** Busca el archivo `classic-style.php` en `wp-content/plugins/wpforms/templates/emails/`. **Copia y pega:** Toma ese archivo y colócalo en la carpeta `wpforms/emails/` de tu tema hijo. Es como crear un armario personalizado para tus formularios. Necesitarás crear esta carpeta en tu tema hijo. **Estilízalo:** Abre el archivo que acabas de pegar y podrás agregar los estilos que desees. Piensa en ello como elegir accesorios para el correo electrónico de tu formulario. Ahora, ¿por qué es genial esto? Cualquier estilo que agregues se transformará mágicamente en CSS en línea para cada elemento del correo electrónico. Esto asegura que tus estilos se vean bien en diferentes plataformas y dispositivos de correo electrónico. Pero aquí tienes un consejo profesional: evita usar etiquetas de estilo en el elemento `head`; es posible que no funcionen bien en todas partes. Para más información, [puedes consultar este recurso](https://www.caniemail.com/features/html-style/ "¿Puedo enviar correos electrónicos? - Compara la configuración del cliente de correo electrónico"). Recuerda, este método puede no funcionar perfectamente para algunos clientes de correo electrónico como **Outlook** y **Windows Mail**. Pueden ser un poco quisquillosos al reconocer ciertos estilos. Si te sientes con ganas y quieres modificar otras plantillas, cada una tiene su propio archivo único en el directorio `wpforms/emails/`. ¡Simplemente copia, pega y estiliza! Para las plantillas en la versión pro, encuéntralas en `wp-content/plugins/wpforms/pro/templates/emails/` y llévalas a la carpeta de correos electrónicos de tu tema hijo. ¡Eso es todo! Ahora tus formularios lucen estilos que coinciden con tu gusto, sin necesidad de un título en codificación. 🌟 ¿Te gustaría también cambiar o eliminar por completo el texto del pie de página? Hay una forma sencilla de hacerlo con un pequeño fragmento de PHP. Consulta el fragmento en [Cómo eliminar o cambiar el texto del pie de página de la notificación por correo electrónico](https://wpforms.com/developers/how-to-remove-or-change-email-notification-footer-text/ "Cómo eliminar o cambiar el texto del pie de página de la notificación por correo electrónico"). **Categorías:** Extensión **Etiquetas:** CSS, PHP ---