Svelte (@frontmail/svelte)

npm install @frontmail/svelte

Requiere Svelte 5. Funciona en SvelteKit (en el navegador).

createFrontmail

Crea una instancia, por ejemplo en src/lib/frontmail.ts:

import { createFrontmail } from '@frontmail/svelte';

export const frontmail = createFrontmail({ publicKey: 'pk_4f2a…', blockHeadless: true });

La instancia tiene send, sendForm, getStatus, reset y dos stores: state ({ status, error, result } del último envío) y status. La primera instancia que se crea pasa a ser la instancia por defecto de la acción y del componente.

<script>
  import { frontmail } from '$lib/frontmail';
  const { status } = frontmail;
</script>

<button onclick={() => frontmail.send('svc_01J9…', 'tpl_ping', { note: 'Hola' })}>Enviar</button>
<p>{$status}</p>

use:frontmailForm

Convierte cualquier formulario en un formulario de Frontmail:

<script>
  import { frontmailForm } from '@frontmail/svelte';
  let status = $state('idle');
</script>

<form
  use:frontmailForm={{
    serviceId: 'svc_01J9…',
    templateId: 'tpl_contact',
    turnstileSiteKey: 'YOUR_TURNSTILE_SITE_KEY',
    onState: (s) => (status = s.status),
  }}
>
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button disabled={status === 'sending'}>Enviar</button>
</form>

Parámetros: serviceId, templateId, frontmail (instancia), turnstileSiteKey, turnstileOptions, locale, sendOptions, resetOnSuccess (por defecto true), onSuccess, onError, onState. El formulario recibe además un atributo data-status al que puedes dar estilo.

locale (p. ej. 'de') envía el correo en ese idioma de la plantilla (como campo de formulario fm_locale; un campo fm_locale dentro del formulario tiene prioridad). result.locale es el idioma usado. <FrontmailForm> acepta la misma prop locale, y send / sendForm de la instancia la aceptan como options.locale.

turnstileSiteKey es la site key de tu propio widget de Turnstile (Seguridad → Protección contra bots (Turnstile) en el panel): consulta Cloudflare Turnstile. Omítela si la plantilla no exige CAPTCHA.

FrontmailForm.svelte

<script>
  import { FrontmailForm } from '@frontmail/svelte';
</script>

<FrontmailForm serviceId="svc_01J9…" templateId="tpl_contact" turnstileSiteKey="YOUR_TURNSTILE_SITE_KEY">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button>Enviar</button>
</FrontmailForm>

Proyecto de ejemplo: examples/svelte.