Editor de plantillas

Una plantilla es el correo que Frontmail renderiza y envía: asunto, destinatarios, cuerpo HTML y de texto, más un esquema de los parámetros que rellena tu formulario o tu código. Esta página recorre la lista de plantillas y cada parte del editor. Los conceptos de fondo están en Plantillas HTML, Handlebars y Parámetros y tipos.

Para crear y editar plantillas necesitas el rol Propietario, Administrador o Desarrollador. Los lectores y los miembros de facturación abren las plantillas en modo Solo lectura: pueden verlo todo y usar Exportar (.json), pero no pueden modificarlas ni enviarlas.

La lista de plantillas

Abre Plantillas en la barra lateral.

Cada fila muestra el Nombre (con la descripción debajo), el ID de la plantilla (tpl_…, lo necesitas en tu código), el Idioma, el número de Parámetros y cuándo se Actualizó, con la versión actual (p. ej. hace 2 horas · v3).

Límite de plantillas y plantillas congeladas

El número de plantillas depende de tu plan: Free 3, Starter 10, Pro y Business ilimitado. Cuando llegas al límite, la lista indica Usas 3 de las 3 plantillas de tu plan. y los botones para crear plantillas nuevas se desactivan. Los propietarios y los miembros de facturación ven ahí mismo un botón Mejorar plan.

Tras bajar de plan, las plantillas que superan el nuevo límite quedan Congeladas (las que llevan más tiempo sin actualizarse). Una plantilla congelada conserva su contenido y sus versiones, pero los envíos con ella fallan hasta que vuelvas a mejorar el plan. Consulta Mejorar, bajar de plan y cancelar.

Cómo crear una plantilla

Encima de la lista hay tres botones.

Nueva plantilla (desde cero)

1. Haz clic en Nueva plantilla.
2. Escribe un Nombre y elige el Idioma (p. ej. English o Español).
3. Haz clic en Crear.

Ese será el idioma predeterminado de la plantilla. Más adelante puedes cambiarlo por cualquier idioma en Ajustes → General → Idioma predeterminado y añadir más idiomas en la barra Idiomas.

La plantilla nueva empieza como un sencillo correo de formulario de contacto: parámetros name, email y message, Para con tu propia dirección y Reply-To con {{email}}. La CAPTCHA viene activada si tu organización ya ha añadido sus claves de Turnstile; si no, empieza desactivada. Adáptala a lo que necesites.

Desde la galería

1. Haz clic en Desde la galería.
2. Cambia el idioma arriba a la derecha (p. ej. a Español) y filtra por Categoría (Formularios, Negocios, Reservas, Comercio electrónico, …).
3. Haz clic en Vista previa para ver una plantilla a tamaño completo.
4. Haz clic en Usar plantilla. Se crea una copia en tu organización y se abre en el editor.

Las plantillas de la galería son adaptables (responsive), admiten el modo oscuro e incluyen datos de ejemplo. Consulta Galería de plantillas.

Importar

1. Haz clic en Importar.
2. Elige un Archivo (un archivo .html o una plantilla exportada desde Frontmail en .json) o pega el HTML en O pega HTML. Los archivos pueden ocupar hasta 2 MB.
3. Revisa el Nombre y haz clic en Importar.

Una exportación .json trae el contenido, los parámetros, las variantes de idioma y la mayoría de los ajustes. El servicio, el servicio de respaldo y la plantilla de respuesta automática no forman parte de la exportación, así que vuelve a configurarlos en Ajustes. Si importas HTML sin más, abre Parámetros y haz clic en Detectar en la plantilla.

El editor de un vistazo

La cabecera muestra el nombre de la plantilla, su versión (p. ej. v3) y unas etiquetas: Cambios sin guardar mientras tienes ediciones pendientes, y Congelada y Solo lectura cuando corresponde. A la derecha:

• Enviar prueba: consulta Correos de prueba,
• Guardar: consulta Guardar,
• Más acciones (⋯): Exportar (.json), Sustituir HTML y Eliminar.

Debajo de la cabecera está la barra Idiomas y después cuatro pestañas: Contenido, Ajustes, Fragmentos y Versiones.

Idiomas

La barra Idiomas muestra el idioma predeterminado de la plantilla (marcado como Predeterminado) y una etiqueta por cada traducción. Haz clic en un idioma para editarlo: todo lo que hay en las pestañas de debajo se aplica entonces a ese idioma. Una traducción puede llevar las etiquetas Desactualizada (el idioma predeterminado cambió desde que se guardó) o Automática (traducida automáticamente).

• Añadir idioma: añade una traducción, ya sea una copia del idioma predeterminado, una traducción automática con la clave API propia de tu organización o una vacía.
• Con una traducción seleccionada: Traducir de nuevo, Marcar como actualizada (si está desactualizada) y Eliminar idioma.

Solo se traducen el asunto, el HTML, el texto y el nombre del remitente; los destinatarios, los parámetros y los ajustes son comunes a todos los idiomas. Consulta Traducciones de plantillas.

Contenido

A la izquierda editas y a la derecha ves la vista previa en directo y las comprobaciones. El campo Asunto está arriba; debajo hay cinco subpestañas.

HTML

Un editor de código completo para el cuerpo HTML con resaltado de Handlebars. Escribe {{ para ver sugerencias de tus parámetros, helpers como #if y #each y variables del sistema. Consulta la guía de Handlebars.

Visual

Un editor de texto enriquecido sencillo para plantillas que son sobre todo texto: Negrita, Cursiva, Título 1, Título 2, listas, Cita, Enlace, Deshacer/Rehacer e Insertar parámetro. Solo edita el contenido de <body>; la cabecera y los estilos se quedan como están.

Muchas plantillas son demasiado ricas para él. Si el HTML usa tablas de maquetación, estilos en línea, divs o imágenes, bloques de Handlebars (#if, #each) o clases CSS, verás Esta plantilla es demasiado compleja para el editor visual con los motivos. Puedes:

• Seguir editando el HTML: volver al editor de código (recomendado),
• Editar de todos modos (simplificar): abrir el editor visual; al guardar desde él se pierde la maquetación y solo se conserva el formato sencillo.

Texto

La versión de texto sin formato que se envía junto al HTML. De forma predeterminada se genera automáticamente a partir del HTML (La versión de texto se genera automáticamente a partir del HTML.). Haz clic en Escribirla yo para editarla a mano: el texto generado en ese momento sirve de punto de partida. Puedes volver a activar la generación automática en Ajustes → Mensaje → Generar la versión de texto automáticamente.

Datos de ejemplo

Un formulario generado a partir de tus parámetros. Los valores se usan para la vista previa y los correos de prueba; nunca se envían con los correos reales. Las listas tienen Añadir elemento, Subir, Bajar y Quitar elemento. Si un valor incumple una regla (demasiado largo, tipo incorrecto, falta un valor obligatorio), el campo muestra el error igual que lo haría la API.

Parámetros

El esquema de parámetros: el Nombre y el Tipo de cada parámetro y si es Obligatorio.

Cómo detectar los parámetros de la plantilla

1. Usa tus parámetros en el HTML, el asunto o los destinatarios, p. ej. {{name}}.
2. Haz clic en Detectar en la plantilla.

Frontmail añade todos los parámetros que encuentra y te dice cuántos son nuevos (Se han encontrado 2 parámetros nuevos.). Deduce el tipo de cada uno por su nombre y por cómo se usa (por ejemplo, un parámetro usado en {{#each}} se convierte en una lista): revisa después los tipos y las reglas.

Cómo añadir o editar un parámetro

1. Haz clic en Añadir parámetro o en el lápiz junto a uno existente.
2. Rellena:
   • Nombre: letras, dígitos, _ y -; debe ser único,
   • Tipo: Texto (una línea), Texto (varias líneas), Correo electrónico, URL, Número, Sí / no, Fecha, Opción, HTML (saneado) o Lista,
   • Etiqueta y Descripción: se muestran en el formulario de datos de ejemplo,
   • Obligatorio,
   • las reglas del tipo: Longitud mín., Longitud máx. y Patrón (regex) para los tipos de texto, Mínimo/Máximo para los números, Valores permitidos para una opción (separados por comas), Campos del elemento y Mín. elementos/Máx. elementos para las listas (p. ej. name:string!, qty:number; ! significa obligatorio),
   • Valor predeterminado y Valor de ejemplo (JSON para las listas).
3. Haz clic en Guardar.

Para quitar un parámetro, usa el icono de la papelera. Los tipos y las reglas se explican en Parámetros y tipos.

Vista previa en directo

La vista previa renderiza la plantilla exactamente igual que el remitente, con tus datos de ejemplo, mientras escribes. Encima puedes cambiar:

• Escritorio / Móvil: el ancho de la vista previa,
• Claro / Oscuro: simula una app de correo en modo oscuro (tus estilos prefers-color-scheme),
• HTML / Texto: la versión HTML o la versión de texto sin formato.

Sobre el correo ves el Asunto, Para y Reply-To ya renderizados. Si la plantilla no se puede renderizar (por ejemplo, por un {{#if}} sin cerrar), verás No se puede renderizar la plantilla con el error. En el plan Free la vista previa incluye el pie Enviado con Frontmail, igual que los correos reales. Más información en Vista previa y envíos de prueba.

Comprobaciones

Bajo la vista previa, Comprobaciones enumera los problemas mientras escribes: por ejemplo, parámetros usados pero no definidos, definidos pero sin usar, Handlebars no válido, falta de texto alt o un correo demasiado grande. Cada elemento es un Error o una Advertencia, a menudo con el número de línea. La pestaña Contenido muestra el número de problemas en una etiqueta. Todo tiene buena pinta. significa que no hay nada que corregir.

Los errores impiden guardar los cambios de contenido (Corrige los errores de las comprobaciones antes de guardar.); las advertencias no.

Ajustes

General

• Nombre y Descripción: para ti y tu equipo.
• Idioma predeterminado: el idioma del contenido principal, que se envía cuando quien envía no pide ningún idioma o pide uno que la plantilla no tiene. Sirve cualquier idioma. También determina el formato de fechas y números y el pie del plan Free de los correos en ese idioma.

Mensaje

Todos los campos pueden contener parámetros, p. ej. {{name}}.

• Asunto (el mismo campo que en la pestaña Contenido).
• Para: separa varias direcciones con comas.
• Nombre del remitente y Correo del remitente: debe ser un remitente que tu servicio pueda usar. Deja Correo del remitente vacío para usar el remitente predeterminado del servicio.
• Reply-To, CC, CCO.
• Incrustar CSS al guardar: mueve los estilos a atributos style, porque muchos clientes de correo ignoran <style>.
• Generar la versión de texto automáticamente: recomendado; la versión de texto se crea a partir del HTML cada vez que guardas.

Entrega

• Servicio: qué servicio de correo envía esta plantilla. Servicio predeterminado sigue al servicio que sea el predeterminado en cada momento.
• Servicio de respaldo: se usa automáticamente cuando falla el servicio principal. Elige Ninguno si no quieres respaldo. Consulta Servicio de respaldo.
• Plantilla de respuesta automática: otra plantilla que se envía a la persona que envió el formulario, después de enviar este correo. Consulta Respuesta automática.

Protección

• Exigir CAPTCHA (Turnstile): recomendado para formularios públicos; bloquea los bots antes de que te cuesten créditos. Las plantillas nuevas la traen activada en cuanto tu organización añade sus propias claves de Turnstile en Seguridad → Protección contra bots (Turnstile). Sin claves, el interruptor no se puede activar y una nota enlaza a la página Seguridad. Si Permitir apps móviles está activado, sí puedes activarlo: el editor te avisa de que las apps móviles funcionarán (usan la clave compartida de Frontmail), pero las solicitudes desde sitios web fallarán con captcha_not_configured hasta que añadas las claves. Consulta Turnstile.
• Permitir destinatario dinámico: permite que los parámetros definan Para/CC/CCO. Con la clave pública, el contenido de una plantilla así queda bloqueado: la CAPTCHA es obligatoria, el remitente, el nombre del remitente y el Reply-To deben ser fijos, no se aceptan parámetros HTML, los textos se limitan a 500 caracteres y los enlaces solo pueden apuntar a dominios permitidos. Sin CAPTCHA, el editor muestra una advertencia con un enlace para configurar Turnstile; la alternativa es enviar la plantilla desde tu servidor con una clave privada.
• Permitir solo enlaces a dominios permitidos: aplica la lista de dominios de enlaces permitidos a todas las solicitudes, incluidos los envíos con clave privada. Viene activado de forma predeterminada en las plantillas de la galería con destinatario dinámico.
• Permitir archivos adjuntos desde el formulario: acepta archivos enviados con la solicitud. El límite de tamaño depende de tu plan.
• Archivos adjuntos fijos: archivos que se adjuntan a todos los correos de esta plantilla. Consulta Archivos adjuntos.

Recogida de contactos

Marca Recoger contactos de esta plantilla para guardar en Contactos a todas las personas que envían el formulario. Después elige el Parámetro del correo, opcionalmente el Parámetro del nombre, y enumera los Campos adicionales (nombres de parámetros separados por comas) que quieres guardar con el contacto. Consulta Contactos.

Fragmentos

Código listo para pegar en HTML / JS, React, Vue, Svelte, React Native, Node.js y cURL, ya rellenado con tu clave pública, el servicio y el ID de la plantilla y todos sus parámetros.

Si la plantilla exige CAPTCHA, los fragmentos web incluyen el widget de Turnstile con la clave de sitio de tu organización (YOUR_TURNSTILE_SITE_KEY como marcador si aún no has añadido las claves), y el fragmento de React Native usa <TurnstileWebView> con la clave móvil compartida de Frontmail, sin necesidad de clave de sitio.

Si la plantilla tiene traducciones, elige el Idioma encima del código para añadir la opción locale; sin ella, los correos se envían en el idioma predeterminado.

La clave pública se puede usar sin riesgo en el navegador. Los fragmentos de Node.js y cURL son para servidores, donde usas una clave privada; consulta Claves públicas y privadas.

Cómo enviar un correo de prueba

1. Haz clic en Enviar prueba.
2. Escribe la dirección en Enviar a (viene rellenada con la tuya).
3. Si la plantilla tiene traducciones, elige el Idioma (viene preseleccionado el que tienes abierto en el editor).
4. Si quieres, elige otro Servicio; Servicio de la plantilla usa el de Ajustes.
5. Haz clic en Enviar prueba.

La prueba usa el contenido actual, sin guardar, con tus datos de ejemplo, así que puedes probar los cambios antes de guardarlos. El asunto empieza por [Test]. Los correos de prueba son gratis: hasta 20 por organización y día (contados en UTC), lo que se muestra como Te quedan N de 20 correos de prueba hoy. Aparecen en el Historial marcados como prueba.

Versiones

Cada vez que guardas el contenido de la plantilla se crea una versión nueva. La pestaña Versiones las enumera con la Versión, el Autor, cuándo se Guardó y la Nota; la actual está marcada como actual.

• Cambios: qué cambió respecto a la versión anterior.
• Comparar con la actual: diferencias entre esa versión y la actual.

La comparación se abre debajo de la lista. Cambia entre HTML, Texto, Asunto, Parámetros y Destinatarios para ver cada parte.

Cómo restaurar una versión anterior

1. Haz clic en Restaurar junto a la versión.
2. Confirma. Si tienes cambios sin guardar, se sustituyen.

Al restaurar se crea una versión nueva con el contenido antiguo: no se pierde nada. Los ajustes de la plantilla (servicio, protección, recogida de contactos) no tienen versiones. Consulta Versiones, diferencias y reversión.

Con una traducción seleccionada en la barra Idiomas, la pestaña muestra en su lugar las versiones de esa traducción, con las columnas Basada en (la versión del idioma predeterminado sobre la que se guardó) y Origen (Manual o Automática).

Guardar y versiones

• Haz clic en Guardar o pulsa Ctrl + S (⌘ + S en Mac). Verás Guardada como versión N.
• Los cambios en el contenido (asunto, HTML, texto, destinatarios, parámetros) crean una versión nueva; los cambios de nombre y de ajustes se guardan sin crearla.
• Si intentas salir del editor con cambios sin guardar, el navegador te pide confirmación.

Cuando otra persona guarda mientras tanto

Si un compañero guardó la plantilla mientras la editabas, Frontmail no sobrescribe su trabajo sin avisar. El diálogo Otra persona ha guardado esta plantilla ofrece:

• Comparar HTML: muestra su HTML junto al tuyo,
• Recargar su versión: carga su versión; tus cambios se pierden,
• Conservar la mía: guarda tu versión encima de la suya.

Consejo

Los mensajes siempre registran la versión de la plantilla con la que se renderizaron. Los correos que esperan en la cola de correos retenidos se envían con la versión que era la actual cuando se aceptaron.

Sustituir HTML, exportar y eliminar

Las tres acciones están en el menú Más acciones (⋯).

• Sustituir HTML: sube un archivo .html o pega HTML para sustituir el cuerpo de esta plantilla. Los parámetros no cambian: revísalos (o usa Detectar en la plantilla) y guarda.
• Exportar (.json): descarga la plantilla, con sus traducciones, como archivo .frontmail.json que puedes importar en otra organización.
• Eliminar: elimina la plantilla con todas sus versiones y traducciones. Los correos ya enviados se quedan en el Historial.