integrazioni · framework

Un modulo di contatto per Astro: senza isole, adattatori o backend.

Un modulo Astro non richiede adattatore SSR, endpoint API o island. Astro produce HTML semplice e basta un modulo HTML: punta action all’endpoint mailcontact e gli invii arrivano nella casella, con avvisi Discord, Slack, email o webhook.

Non invia JavaScript, funziona con output Astro statico su ogni hosting e continua se aggiungi un adattatore, perché è markup in una pagina .astro, non plugin o route server.

Crea un account Leggi la documentazione

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 Astro.

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/pages/contact.astro

---
// No frontmatter needed: the form is plain HTML.
---

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

come funziona

Tre passaggi dall’inizio alla fine.

Crea una casella

Una casella per progetto. Chiamala come il sito e ottieni subito endpoint modulo ed email di progetto.

Incolla il modulo

Inserisci il markup sopra in pagine o componenti .astro: src/pages/contact.astro, piè di pagina o layout. È il tuo HTML: stilizzalo come vuoi.

Ricevi notifiche

Aggiungi Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già.

perché mailcontact

Pensato per funzionare con Astro.

Nessun JavaScript, nessuna isola

Niente client:load, componenti framework o costo d’idratazione. Il modulo è HTML statico, ciò che Astro distribuisce più velocemente.

Nessun adattatore SSR richiesto

Gli endpoint server Astro richiedono adattatore e server. Inviare all’esterno mantiene la build statica. astro build, caricamento, fatto.

Una casella per ogni sito che pubblichi

Astro facilita siti marketing, documentazione e progetti personali. Dai a ciascuno casella e indirizzo propri invece di accumulare tutto nella posta personale.

FAQ

Astro + mailcontact: le risposte

Astro può gestire gli invii dei moduli senza server?

Non da solo. Un sito Astro statico non ha processi che ricevono POST. Puntare action a un endpoint mailcontact risolve: i server mailcontact accettano l’invio e il sito resta statico.

Funziona su Netlify, Vercel, GitHub Pages o Cloudflare Pages?

Sì. L’endpoint accetta POST da qualsiasi dominio: funziona ovunque sia ospitato l’output statico. Niente adattatori, funzioni o moduli specifici dell’hosting.

Come mostro una conferma senza lasciare la pagina?

Usa lo script MailContact ospitato per invio, verifica automatica e messaggi in linea o MailContact.send() nel tuo gestore. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

Posso usare Tailwind o gli stili locali di Astro per il modulo?

Yes. It's your markup in your page, so scoped <style> blocks, Tailwind classes, or global CSS all apply as usual. mailcontact only cares about the field names: email and message are required, name and subject are optional; company_website must also be present and empty.

correlati

Funziona anche con

Una casella per ogni progetto Astro 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.