Integrationen · framework

Ein SvelteKit-Kontaktformular, das adapter-static übersteht.

SvelteKit bietet gute Formularaktionen in +page.server.js, erweitert durch use:enhance und ohne JavaScript nutzbar. Der Haken: Sie brauchen eine Laufzeit. Mit adapter-static für GitHub Pages oder CDN gibt es keine Actions mehr, weil kein Server POST empfängt.

Entweder betreibst du für drei Felder einen Server oder sendest extern. Mailcontact empfängt im Projektpostfach, hält den Build statisch und funktioniert mit adapter-static, adapter-node oder adapter-vercel gleich.

empfohlene Einrichtung

Nutze das MailContact-Skript mit deinem eigenen Design.

Füge dieses HTML auf deiner Website ein oder verwende den Formulargenerator. Ersetze den Formularlink durch deinen. Das gehostete Skript fügt die verborgene Prüfung ein, übernimmt Versand und Verifizierung und bewahrt Entwürfe bei Fehlern. Du bestimmst HTML und CSS. Free-Formulare zeigen einen sichtbaren Link „Processed by mailcontact.app“, Pro und Plus nicht. Die Rückmeldung folgt der Browsersprache. Setze data-mailcontact-language="fr" am Formular, um Französisch festzulegen.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
  <input type="hidden" name="_language" value="de" />
  <fieldset>
    <legend>Kontaktiere uns</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      E-Mail
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Nachricht
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Nachricht senden</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Für Komponenten mit eigenem Submit-Handler lade dasselbe Skript und nutze MailContact.prepare(form) und MailContact.send() statt der automatischen Markierung. Siehe die Referenz für eigene Oberflächen für Laden, Rückmeldungen und Quellenhinweis bei Free.

das Snippet

Alternative: eine direkte Integration für SvelteKit.

Dieses Beispiel sendet direkt an die API. Behalte das erforderliche company_website Feld vorhanden und leer. Native Einsendungen öffnen bei Erfolg JSON oder bei Bedarf eine Prüfseite. Eigene Skripte ohne Verifizierung senden verdächtige Nachrichten zur Prüfung in Spam; deutlicher Spam wird ebenfalls ohne Benachrichtigung und Kontingentverbrauch zurückgehalten. Eine Erfolgsantwort bestätigt den Empfang einschließlich Prüfung oder das stille Verwerfen eines ausgefüllten Prüffelds. Siehe Spamschutz für das vollständige Verhalten.

src/routes/contact/+page.svelte
<script>
  // No +page.server.js. No actions. No adapter requirement.
  let sent = $state(false);

  async function submit(event) {
    await fetch("https://mailcontact.app/api/forms/your-form-id", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });
    sent = true;
  }
</script>

{#if sent}
  <p>Thanks. We'll be in touch.</p>
{:else}
  <form onsubmit={(e) => { e.preventDefault(); submit(e); }}>
    <input name="name" placeholder="Your name" required />
    <input name="email" type="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="What's on your mind?" required></textarea>
    <input name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

    <button>Send</button>
  </form>
{/if}

so funktioniert es

Drei Schritte, vom Start bis zum Ziel.

01

Postfach erstellen

Ein Postfach pro Projekt mit Endpunkt und Projektadresse, bevor du das Routenverzeichnis anfasst.

02

Route hinzufügen

Füge den Block in src/routes/contact/+page.svelte ein. Keine zugehörige +page.server.js zwingt deinem Build einen Serveradapter auf.

03

Benachrichtigt werden

Verbinde Discord, Slack, E-Mail oder Webhook für neue Nachrichten.

warum Mailcontact

Passt gut zu SvelteKit.

Deine Adapterwahl bleibt frei

Sobald eine Route eine Action braucht, entfällt adapter-static fürs ganze Projekt. Mit externem Kontaktformular kannst du alles vorab rendern und als Dateien hosten.

Kein Server für drei Felder

adapter-node bedeutet einen Prozess zu betreiben, zu aktualisieren und zu bezahlen. Viel Infrastruktur für ein selten benutztes Formular.

Ein Postfach pro Nebenprojekt

SvelteKit wird gern für die vierte Idee des Jahres genutzt. Jede erhält eigenes Postfach und Adresse statt privatem Sammelpostfach.

FAQ

SvelteKit + Mailcontact, beantwortet

Warum nicht einfach eine SvelteKit-Formularaktion?

Ja, solange du einen Server behältst. Actions brauchen adapter-node, adapter-vercel oder einen anderen Laufzeitadapter. Bei adapter-static gibt es keinen POST-Empfänger; die Action wird nicht bereitgestellt. Für eine sonst statische Website ist ein Kontaktformular kein guter Grund, das aufzugeben.

Funktioniert das mit use:enhance?

use:enhance erweitert eine SvelteKit-Action und erwartet deren interne Antwort. Es passt hier nicht. Der obige Handler erledigt Vergleichbares mit ähnlich wenig Code: Versand abfangen, FormData posten und Erfolg anzeigen.

Funktioniert es auch ohne JavaScript?

Ja. Entferne das Skript und setze action auf den Endpunkt sowie method="POST". Der Browser sendet ohne Clientcode nativ. Derzeit erscheint rohes JSON; konfigurierbare Weiterleitung gibt es noch nicht.

Funktioniert das mit Svelte 4 oder nur mit Runes?

Beides. Das Beispiel nutzt $state und die onsubmit-Eigenschaft aus Svelte 5, ist aber nicht von Runes abhängig. Nutze bei Svelte 4 stattdessen let sent = false und on:submit|preventDefault; der fetch-Aufruf bleibt identisch.

verwandt

Funktioniert auch mit

Ein Postfach für jedes deiner SvelteKit-Projekte.

Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.

Kostenloses Formular erstellen

Keine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.