Comment ajouter un formulaire de contact à Cloudflare Pages

Cloudflare Pages est un hébergeur statique rapide et généreux - vous poussez un dépôt, vous obtenez un déploiement mondial, terminé. Ce qu'il n'a pas, en revanche, c'est un équivalent de Netlify Forms : aucun service intégré ne scanne votre HTML à la recherche d'une balise <form> pour commencer à collecter les soumissions. Déployez un formulaire de contact HTML classique tel quel sur Cloudflare Pages, et le POST ne va nulle part. Voici pourquoi, et les deux façons d'y remédier.

Pourquoi Cloudflare Pages n'a pas de produit de formulaires natif

Cloudflare Pages est un hébergeur de fichiers statiques doté en option d'une couche Functions pour les routes dynamiques - ce n'est pas une plateforme de gestion de formulaires. La fonctionnalité de formulaires de Netlify fonctionne en analysant votre build au moment du déploiement et en provisionnant un backend caché pour chaque formulaire trouvé ; Cloudflare Pages ne fait aucune analyse de ce type. Vos artefacts de build ne sont que des fichiers sur un CDN. Si un formulaire a besoin d'un endroit où envoyer des données, c'est à vous de le construire ou de l'emprunter. Ce n'est pas une lacune que Cloudflare comblera probablement un jour - Pages est délibérément limité aux fichiers statiques plus une fine couche serverless, pas à un pipeline d'analyse de formulaires.

Option 1 : écrire votre propre Pages Function

Cloudflare Pages prend en charge les Functions - de petits gestionnaires de type Workers qui résident dans un répertoire /functions et s'exécutent en périphérie chez Cloudflare. Vous pourriez ajouter un functions/api/contact.ts qui lit le corps du POST, le valide, filtre le spam, envoie un e-mail (via l'API d'un fournisseur, puisque les Workers ne peuvent pas établir de connexions SMTP brutes), et écrit peut-être dans KV ou D1 pour le stockage. Cela fonctionne, et tout reste dans un seul projet Cloudflare. Mais c'est désormais vous qui maintenez la validation, le filtrage anti-spam, le stockage et l'envoi d'e-mails - exactement le backend qu'un hébergeur statique était censé vous éviter d'écrire.

Option 2 : pointer le formulaire vers un backend hébergé (recommandé)

La voie la plus rapide consiste à envoyer le POST à un service conçu exactement pour cela. Gardez votre balisage, ajoutez un attribut :

C'est toute l'intégration. Aucune Function, aucun Worker, aucune clé d'API e-mail à gérer. Les soumissions apparaissent dans un tableau de bord et peuvent déclencher une notification push - y compris sur iOS, une fois le site ajouté à l'écran d'accueil. La protection anti-spam est activée par défaut : un champ honeypot et une limitation de débit interceptent la majeure partie avant qu'elle ne vous atteigne, et vous pouvez ajouter Cloudflare Turnstile - le CAPTCHA respectueux de la vie privée de Cloudflare lui-même, un choix cohérent pour un formulaire hébergé sur un site Cloudflare Pages - pour tout ce qui serait plus fortement ciblé. Les soumissions et les fichiers téléversés sont stockés sur une infrastructure européenne. Rien de tout cela ne dépend de la façon dont le reste du site est construit : Astro, HTML classique, un export statique Next.js, Hugo, quel que soit le générateur du balisage, la balise de formulaire reste la même et le déploiement ne change pas.

Obtenir votre endpoint

1. Inscrivez-vous et créez un formulaire dans le tableau de bord - aucune carte requise.
2. Copiez l'URL unique du formulaire (elle ressemble à https://formhook.app/f/fh_xxxxxxxx).
3. Collez-la dans l'attribut action de votre <form> existant.
4. Committez et déployez comme d'habitude.

Le niveau gratuit couvre 250 soumissions par mois, largement suffisant pour la plupart des formulaires de contact. Consultez la page tarifs pour découvrir ce qu'offre l'offre Pro si vous avez besoin de téléversements de fichiers ou d'un domaine d'envoi vérifié plus tard.

Vous utilisez un framework ? Retrouvez le guide pas à pas pour Astro et Next.js.