integrazioni · hosting platform

Un modulo di contatto su Cloudflare Pages, senza scrivere un Worker.

Cloudflare Pages distribuisce il sito da circa 300 città ma non accetta moduli per te. Non ha l’equivalente di Netlify Forms. Il tutorial ufficiale rimanda a terzi e il plugin Static Forms per Pages Functions non è un servizio moduli: intercetta il POST e lo passa a una funzione da scrivere, collegata a un namespace KV da predisporre.

Puntare action a mailcontact elimina tutto quel livello. Niente directory Functions, binding KV, configurazione wrangler o Worker da mantenere. Gli invii arrivano nella casella e ti avvisano via Discord, Slack, email o webhook.

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 Cloudflare Pages.

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.

public/contact.html
<!-- No functions/ directory. No KV namespace. No wrangler.toml. -->

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

  <!-- Bots fill this in. Humans never see it. -->
  <input type="text" name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

  <button type="submit">Send</button>
</form>

come funziona

Tre passaggi dall’inizio alla fine.

01

Crea una casella

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

02

Incolla il modulo nell’output

Qualunque cosa pubblichi su Pages, HTML, build Astro o bundle React, il modulo è semplice markup nella pagina. Il comando di build non cambia.

03

Pubblica come al solito

git push o wrangler pages deploy. Il modulo funziona dal primo deploy di anteprima, su ogni alias di branch e dominio personale, senza setup per ambiente.

perché mailcontact

Pensato per funzionare con Cloudflare Pages.

Il plugin Static Forms non è un backend per moduli

Analizza l’invio e chiama un gestore fornito da te. Devi ancora scrivere archiviazione, notifiche, antispam ed errori. È il lavoro vero e il plugin non lo fa.

Nessun limite gratuito da rispettare

Workers fattura richieste e CPU; un gestore che invia email richiede API e chiave. Un endpoint esterno non ha budget d’invocazioni da sforare né percorsi a freddo da correggere alle due di notte.

Resiste al passaggio da Pages a Workers

Cloudflare indirizza i nuovi progetti full stack verso Workers. Un modulo con markup verso URL esterno non dipende dal prodotto che ospita il sito: non ha legami di piattaforma da migrare.

FAQ

Cloudflare Pages + mailcontact: le risposte

Cloudflare Pages gestisce i moduli come Netlify Forms?

No. Netlify rileva un attributo del modulo al deploy e conserva gli invii; Cloudflare non offre questa funzione. Le soluzioni documentate sono il plugin Static Forms, che richiede di scrivere il gestore e collegare l’archiviazione, o un servizio esterno. La piattaforma non ha un’opzione senza codice.

E il plugin Static Forms per Pages Functions?

È un collegamento infrastrutturale, non un prodotto completo. Il plugin intercetta il POST di un modulo con data-static-form-name e lo passa a un gestore respondWith che implementi tu. Salvare messaggi, notificare e filtrare spam resta da costruire. Se vuoi scriverlo, il plugin aiuta; se vuoi evitarlo, un endpoint è la strada più breve.

Posso continuare a usare Pages Functions per altro?

Sì. Non ci sono conflitti. Il modulo è un action HTML verso un’altra origine: directory functions/, middleware e binding restano intatti. Sostituisce solo la parte di Functions che avresti scritto per i contatti.

Il modulo funziona nelle anteprime e negli alias dei branch?

Sì. L’endpoint accetta POST da qualsiasi dominio: anteprime *.pages.dev, alias di branch e dominio personalizzato inviano alla stessa casella senza configurazioni per ambiente o liste di autorizzazione.

correlati

Funziona anche con

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