Votre choix d’adaptateur reste libre
Une seule action rend adapter-static impossible pour le projet. Sortir le formulaire du serveur permet de tout pré-générer et héberger en fichiers.
intégrations · framework
SvelteKit gère bien les formulaires : action dans +page.server.js, use:enhance et fonctionnement sans JavaScript. Mais les actions ont besoin d’un serveur. Avec adapter-static pour GitHub Pages ou CDN, elles disparaissent : rien ne reçoit le POST.
Gardez un serveur pour trois champs, ou envoyez ailleurs. mailcontact reçoit dans la boîte et garde le site statique, avec le même comportement sur adapter-static, adapter-node et adapter-vercel.
configuration recommandée
Ajoutez ce HTML à votre site, ou utilisez le générateur de formulaires. Remplacez le lien du formulaire par le vôtre. Le script hébergé injecte le contrôle caché, gère l’envoi et la vérification automatique, et conserve le brouillon en cas d’erreur. Vous contrôlez le HTML et le CSS. Les formulaires Free affichent un lien visible « Traité par mailcontact.app » ; Pro et Plus ne l’affichent pas. Les messages de retour suivent la langue du navigateur ; définissez data-mailcontact-language="fr" sur le formulaire pour imposer le français.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="fr" data-mailcontact-language="fr">
<input type="hidden" name="_language" value="fr" />
<fieldset>
<legend>Contactez-nous</legend>
<label>
Nom (facultatif)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Message
<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>Site web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Envoyer le message</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>Pour un composant doté de son propre gestionnaire d’envoi, chargez le même script et utilisez MailContact.prepare(form) et MailContact.send() au lieu du marqueur automatique. Voir la référence des interfaces personnalisées pour le chargement, les messages de retour et l’attribution Free.
l’extrait
Cet exemple appelle directement l’API. Gardez le champ requis company_website champ présent et vide. Les envois natifs ouvrent du JSON en cas de succès ou une page de vérification si nécessaire. Les scripts personnalisés sans vérification envoient les messages suspects dans les spams pour examen ; les spams manifestes y sont aussi retenus sans notification ni consommation du quota. Un succès confirme la réception, y compris pour examen, ou l’abandon silencieux d’un contrôle rempli. Voir protection antispam pour le comportement complet.
<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}fonctionnement
Une boîte par projet, URL et adresse prêtes avant de modifier les routes.
Collez dans src/routes/contact/+page.svelte. Aucun +page.server.js voisin : rien n’impose un adaptateur serveur au reste du site.
Connectez Discord, Slack, email ou webhook pour les alertes.
pourquoi mailcontact
Une seule action rend adapter-static impossible pour le projet. Sortir le formulaire du serveur permet de tout pré-générer et héberger en fichiers.
adapter-node pour une page contact implique processus, mises à jour et coût. Beaucoup d’infrastructure pour un formulaire souvent utilisé deux fois par mois.
SvelteKit sert souvent à lancer plusieurs idées. Donnez à chacune sa boîte et son adresse, sans tout mélanger dans votre email.
FAQ
Oui, avec un serveur. Les actions nécessitent adapter-node, adapter-vercel ou un autre runtime. Avec adapter-static, rien ne reçoit le POST et l’action n’est pas déployée. Un simple formulaire justifie mal d’abandonner un site entièrement statique.
use:enhance améliore progressivement une action SvelteKit et attend une réponse interne : il ne s’applique pas ici. Le gestionnaire ci-dessus fait l’équivalent en quelques lignes : intercepter l’envoi, transmettre FormData et afficher le succès.
Oui. Retirez le script et ajoutez action vers le point de réception et method="POST". Le navigateur envoie nativement sans code client. Cela affiche actuellement le JSON brut ; pas de redirection configurable.
Les deux. L’exemple utilise $state et la propriété onsubmit de Svelte 5, mais rien ne dépend des runes. Avec Svelte 4, utilisez let sent = false et on:submit|preventDefault ; l’appel fetch reste identique.
voir aussi
Formulaires et vraie adresse email, ensemble, avec des notifications dans vos outils. Commencez gratuitement.
Créer mon formulaireAucune carte bancaire requise. Free comprend un projet et 50 messages de formulaire par mois.