Svelte (@frontmail/svelte)

npm install @frontmail/svelte

Benötigt Svelte 5. Funktioniert in SvelteKit (im Browser).

createFrontmail

Erstellen Sie eine Instanz, zum Beispiel in src/lib/frontmail.ts:

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

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

Die Instanz bietet send, sendForm, getStatus, reset und zwei Stores: state ({ status, error, result } der letzten Sendung) und status. Die zuerst erstellte Instanz wird zum Standard für die Action und die Komponente.

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

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

use:frontmailForm

Macht aus jedem Formular ein Frontmail-Formular:

<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'}>Senden</button>
</form>

Parameter: serviceId, templateId, frontmail (Instanz), turnstileSiteKey, turnstileOptions, locale, sendOptions, resetOnSuccess (Standard true), onSuccess, onError, onState. Das Formular erhält zusätzlich ein Attribut data-status, das Sie per CSS gestalten können.

locale (z. B. 'de') versendet die E-Mail in dieser Sprache der Vorlage (als Formularfeld fm_locale; ein Feld fm_locale im Formular hat Vorrang). result.locale ist die verwendete Sprache. <FrontmailForm> nimmt dieselbe Prop locale, und send / sendForm der Instanz akzeptieren sie als options.locale.

turnstileSiteKey ist der Site-Key Ihres eigenen Turnstile-Widgets (im Dashboard unter Sicherheit → Bot-Schutz (Turnstile)) – siehe Cloudflare Turnstile. Lassen Sie ihn weg, wenn die Vorlage kein CAPTCHA verlangt.

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>Senden</button>
</FrontmailForm>

Beispielprojekt: examples/svelte.