integrazioni · framework

Un modulo di contatto SvelteKit che funziona con adapter-static.

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

Usa lo script MailContact con il tuo design.

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.

contact.html
<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

Alternativa: integrazione diretta per SvelteKit.

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.

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}

come funziona

Tre passaggi dall’inizio alla fine.

01

Crea una casella

Una casella per progetto, con endpoint ed email pronti prima di toccare la directory routes.

02

Aggiungi la route

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.

03

Ricevi notifiche

Collega Discord, Slack, email o webhook e ricevi lì gli avvisi dei messaggi consegnati.

perché mailcontact

Pensato per funzionare con SvelteKit.

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.

Nessun server per tre campi

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.

Una casella per ogni progetto personale

Molti scelgono SvelteKit per la quarta idea dell’anno. Ognuna riceve casella e indirizzo propri anziché finire tutta nella posta personale.

FAQ

SvelteKit + mailcontact: le risposte

Perché non posso usare un’azione modulo SvelteKit?

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.

Funziona con use:enhance?

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.

Può funzionare anche senza JavaScript?

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.

Funziona in Svelte 4 o solo con le rune?

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

Funziona anche con

Una casella per ogni progetto SvelteKit che pubblichi.

Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.

Crea un modulo gratis

Non serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.