La scelta dell’adattatore resta libera
Appena una route richiede un’action, adapter-static non è più disponibile per il progetto. Tenere il modulo fuori dal grafo server permette di prerenderizzare tutto e ospitarlo come file.
integrazioni · framework
SvelteKit offre un’ottima soluzione: action in +page.server.js, miglioramento progressivo con use:enhance e funzionamento senza JavaScript. C’è un limite che colpisce chi sceglie SvelteKit: le action devono essere eseguite da qualche parte. Passare ad adapter-static per GitHub Pages o CDN elimina tutte le action perché non resta server per ricevere POST.
Puoi tenere un server per tre campi o inviare altrove. mailcontact è quell’altrove: gli invii arrivano nella casella, la build resta statica e la pagina si comporta uguale su adapter-static, adapter-node e adapter-vercel.
configurazione consigliata
Aggiungi questo HTML al sito oppure usa generatore di moduli. Sostituisci il link del modulo con il tuo. Lo script ospitato inserisce il controllo nascosto, gestisce invio e verifica automatica e conserva la bozza in caso di errore. Tu controlli HTML e CSS. I moduli Free mostrano un link visibile “Processed by mailcontact.app”; Pro e Plus no. I messaggi seguono la lingua del browser; imposta data-mailcontact-language="fr" sul modulo per impostare il francese.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="it" data-mailcontact-language="it">
<input type="hidden" name="_language" value="it" />
<fieldset>
<legend>Contattaci</legend>
<label>
Nome (facoltativo)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Messaggio
<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>Sito web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Invia messaggio</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>Per un componente con un proprio gestore di invio, carica lo stesso script e usa MailContact.prepare(form) e MailContact.send() al posto del marcatore automatico. Consulta riferimento per interfacce personalizzate per caricamento, messaggi e attribuzione Free.
lo snippet
Questo esempio invia direttamente all’API. Mantieni il campo obbligatorio company_website presente e vuoto. Gli invii nativi aprono JSON in caso di successo o una pagina di verifica se serve. Gli script personalizzati senza supporto alla verifica inviano i messaggi sospetti in Spam per revisione; anche lo spam evidente resta lì senza notifiche né consumo di quota. Una risposta di successo conferma la ricezione, anche per revisione, oppure lo scarto silenzioso di un controllo compilato. Vedi protezione antispam per il comportamento completo.
<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}come funziona
Una casella per progetto, con endpoint ed email pronti prima di toccare la directory routes.
Incolla il blocco in src/routes/contact/+page.svelte. Nota l’assenza di +page.server.js: nulla impone un adattatore server al resto della build.
Collega Discord, Slack, email o webhook e ricevi lì gli avvisi dei messaggi consegnati.
perché mailcontact
Appena una route richiede un’action, adapter-static non è più disponibile per il progetto. Tenere il modulo fuori dal grafo server permette di prerenderizzare tutto e ospitarlo come file.
adapter-node per i contatti significa un processo da eseguire, aggiornare e pagare. Molta infrastruttura per un modulo che spesso riceve due messaggi al mese.
Molti scelgono SvelteKit per la quarta idea dell’anno. Ognuna riceve casella e indirizzo propri anziché finire tutta nella posta personale.
FAQ
Sì, mantenendo un server. Le action sono gestori server e richiedono adapter-node, adapter-vercel o un altro runtime. Con adapter-static non c’è destinazione POST e l’action non viene pubblicata. Se il resto del sito è statico, un modulo è un motivo debole per rinunciarvi.
use:enhance migliora progressivamente un’action SvelteKit e richiede la sua risposta interna, quindi qui non si applica. Il gestore sopra fa un lavoro equivalente in circa altrettante righe: intercetta l’invio, manda FormData e mostra il successo.
Sì. Rimuovi lo script e assegna al modulo action verso l’endpoint e method="POST". Il browser invia nativamente senza codice client. Oggi mostra il JSON grezzo; il reindirizzamento configurabile non è attualmente disponibile.
Entrambi. L’esempio usa $state e la proprietà onsubmit di Svelte 5, ma nulla dipende dalle rune. Su Svelte 4 usa let sent = false e on:submit|preventDefault; la chiamata fetch è identica.
correlati
Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.
Crea un modulo gratisNon serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.