Svelte (@frontmail/svelte)

npm install @frontmail/svelte

Nécessite Svelte 5. Fonctionne dans SvelteKit (dans le navigateur).

createFrontmail

Créez une instance, par exemple dans src/lib/frontmail.ts :

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

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

L’instance possède send, sendForm, getStatus, reset et deux stores : state ({ status, error, result } du dernier envoi) et status. La première instance créée devient l’instance par défaut de l’action et du composant.

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

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

use:frontmailForm

Transforme n’importe quel formulaire en formulaire 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'}>Envoyer</button>
</form>

Paramètres : serviceId, templateId, frontmail (instance), turnstileSiteKey, turnstileOptions, locale, sendOptions, resetOnSuccess (par défaut true), onSuccess, onError, onState. Le formulaire reçoit aussi un attribut data-status que vous pouvez styliser.

locale (p. ex. 'de') envoie l’e-mail dans cette langue du modèle (sous la forme du champ de formulaire fm_locale ; un champ fm_locale dans le formulaire est prioritaire). result.locale est la langue utilisée. <FrontmailForm> accepte la même prop locale, et les méthodes send / sendForm de l’instance l’acceptent sous la forme options.locale.

turnstileSiteKey est la clé de site de votre propre widget Turnstile (Sécurité → Protection contre les bots (Turnstile) dans le tableau de bord) – voir Cloudflare Turnstile. Omettez-la si le modèle n’exige pas de 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>Envoyer</button>
</FrontmailForm>

Projet d’exemple : examples/svelte.