Ajouter un formulaire de contact à un site statique est souvent le petit détail qui fait hésiter. Le site est rapide, sobre, facile à héberger, mais il n'a pas de serveur pour traiter les messages. Web3Forms résout précisément ce problème : le formulaire reste en HTML, les données partent vers une API, puis le message arrive par email.

J'ai utilisé cette configuration sur un site vitrine d'artiste, avec un formulaire destiné aux demandes d'acquisition, d'exposition, de collaboration, de presse ou de contact libre. Le principe peut être repris sur n'importe quel site statique en HTML, CSS et JavaScript.

Vous avez un site statique à finaliser, publier ou fiabiliser ?

❋ Réserver 1h de consultation ❋ Résultat obtenu ou remboursé

Pourquoi utiliser Web3Forms plutôt qu'un simple mailto ?

Un lien ou formulaire mailto: dépend du logiciel email du visiteur. Sur certains appareils, il ouvre une application inattendue ; sur d'autres, il ne fait rien de très clair. Résultat : une partie des visiteurs abandonne avant même d'avoir envoyé son message.

Avec Web3Forms, le formulaire envoie les champs vers https://api.web3forms.com/submit. Le visiteur reste sur la page, le bouton peut afficher un état d'envoi, puis un message de succès ou d'erreur apparaît directement dans le design du site.

Besoin Solution
Site HTML sans backend Web3Forms reçoit la requête et transfère le message par email.
Design existant à conserver Le formulaire reste votre HTML et votre CSS.
Limiter le spam hCaptcha peut être ajouté au formulaire.
Expérience fluide JavaScript affiche les retours sans changer de page.

Vue d'ensemble de la configuration

La configuration repose sur quatre éléments :

  1. un formulaire HTML avec un identifiant stable ;
  2. une clé d'accès Web3Forms dans un champ caché ;
  3. un bloc hCaptcha pour limiter le spam ;
  4. un script JavaScript qui envoie les données en POST.
<form class="contact-form" id="contact-form">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  ...
  <div class="h-captcha" data-captcha="true"></div>
</form>

Important : la clé d'accès Web3Forms est prévue pour être utilisée côté navigateur. Ce n'est pas un mot de passe serveur. En revanche, chaque site doit avoir sa propre clé : ne réutilisez pas celle d'un autre projet.

Étape 1 : créer une clé Web3Forms

Commencez par créer un compte Web3Forms ou générer une clé d'accès depuis l'interface du service. Cette clé associe le formulaire à l'adresse email qui recevra les messages. Vérifiez bien l'adresse de destination avant d'intégrer la clé dans le site.

Dans une documentation publique, un dépôt partagé ou un exemple d'article, gardez un placeholder comme YOUR_ACCESS_KEY_HERE. La vraie valeur doit être placée uniquement dans le fichier du site concerné.

Étape 2 : préparer le formulaire HTML

Voici une structure simple, adaptée à un formulaire de contact classique :

<form class="contact-form" id="contact-form">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

  <div>
    <label for="nom">Nom</label>
    <input type="text" id="nom" name="name" autocomplete="name" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
  </div>

  <div>
    <label for="sujet">Objet</label>
    <select id="sujet" name="subject">
      <option value="">- choisir -</option>
      <option value="Demande d'information">Demande d'information</option>
      <option value="Collaboration">Collaboration</option>
      <option value="Presse">Presse</option>
      <option value="Autre">Autre</option>
    </select>
  </div>

  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>

  <div class="h-captcha" data-captcha="true"></div>

  <button type="submit">Envoyer</button>

  <div class="form-message form-message--success" id="form-success">
    Votre message a bien été envoyé.
  </div>

  <div class="form-message form-message--error" id="form-error">
    Une erreur est survenue. Veuillez réessayer ou envoyer un email directement.
  </div>
</form>

Les noms de champs les plus utiles sont access_key, name, email, subject et message. Web3Forms accepte aussi des champs personnalisés, mais cette base suffit pour un formulaire lisible et facile à maintenir.

Étape 3 : ajouter hCaptcha

Le bloc hCaptcha se place dans le formulaire :

<div class="h-captcha" data-captcha="true"></div>

Ajoutez ensuite le script client Web3Forms avant la fermeture de </body> :

<script src="https://web3forms.com/client/script.js" async defer></script>

Dernier point souvent oublié : l'affichage du bloc ne suffit pas toujours. Vérifiez aussi dans le tableau de bord Web3Forms que la protection hCaptcha est bien activée pour le formulaire concerné.

Étape 4 : envoyer le formulaire en JavaScript

L'envoi JavaScript évite une redirection et permet d'afficher un retour dans la page. Le script intercepte l'envoi, désactive le bouton, transmet les données avec FormData, puis affiche le bon message.

<script>
  document.getElementById('contact-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const form = e.target;
    const btn = form.querySelector('button[type="submit"]');
    const successEl = document.getElementById('form-success');
    const errorEl = document.getElementById('form-error');

    btn.disabled = true;
    btn.textContent = 'Envoi en cours...';
    successEl.style.display = 'none';
    errorEl.style.display = 'none';

    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        body: new FormData(form)
      });

      const json = await res.json();

      if (json.success) {
        successEl.style.display = 'block';
        form.reset();
      } else {
        errorEl.style.display = 'block';
      }
    } catch {
      errorEl.style.display = 'block';
    }

    btn.disabled = false;
    btn.textContent = 'Envoyer';
  });
</script>

new FormData(form) est pratique parce qu'il embarque tous les champs du formulaire, y compris le token généré par hCaptcha. Cela évite de construire manuellement un objet champ par champ.

Étape 5 : garder un lien email de secours

Même avec une bonne intégration, gardez toujours une adresse email visible. C'est la solution de repli si JavaScript est désactivé, si un bloqueur empêche le captcha de se charger, ou si le service rencontre une indisponibilité temporaire.

<a href="mailto:[email protected]">[email protected]</a>

Ce lien peut être placé au-dessus du formulaire, dans le pied de page, ou dans une phrase de secours sous le bouton d'envoi.

Étape 6 : tester avant et après publication

Avant de considérer le formulaire comme terminé, testez au minimum :

Après mise en ligne, refaites un test depuis le vrai nom de domaine. C'est le seul test qui valide toute la chaîne : navigateur, scripts externes, captcha, API Web3Forms, email de destination et éventuels filtres antispam.

Étape 7 : mettre à jour la politique de confidentialité

Un formulaire de contact collecte des données personnelles. La politique de confidentialité du site doit donc expliquer clairement les données collectées, la finalité du traitement, le destinataire, le service technique utilisé et le moyen d'exercer ses droits.

Pour un formulaire simple, les données sont généralement : nom, email, objet et message. La finalité est de répondre à la demande envoyée via le site. Si Web3Forms est utilisé comme prestataire technique, il est prudent de le mentionner explicitement.

Point de vigilance RGPD : Web3Forms traite techniquement les messages avant de les transférer vers l'email configuré. Pour un site professionnel européen, vérifiez la cohérence avec votre politique de confidentialité et demandez un avis juridique si le contexte est sensible.

Variante sans JavaScript

Web3Forms peut aussi fonctionner avec un formulaire HTML classique. C'est plus simple, mais l'expérience est moins intégrée : selon la configuration, le visiteur peut quitter la page ou être redirigé vers une page de succès.

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Envoyer</button>
</form>

Je préfère généralement l'envoi JavaScript sur les sites vitrines, parce qu'il respecte mieux le design de la page et donne un retour immédiat au visiteur.

Prompt à copier-coller dans Claude Code, Codex ou un autre agent IA

L'intérêt d'un site statique, c'est aussi qu'un agent IA peut intervenir très proprement dans les fichiers : lire la page de contact, repérer le formulaire existant, modifier uniquement le HTML/CSS/JavaScript nécessaire, puis vérifier le résultat. Voici un prompt que vous pouvez copier-coller tel quel dans Claude Code, GPT Codex ou un autre agent de développement.

Tu es mon agent de développement web. Aide-moi à configurer le formulaire de contact de mon site statique HTML/CSS/JavaScript avec Web3Forms.

Contexte :
- Le site est statique, sans backend et sans framework.
- Je veux conserver le design existant du formulaire.
- Je veux recevoir les messages par email via Web3Forms.
- Je veux ajouter une protection hCaptcha.
- Je veux afficher un message de succès ou d'erreur sur la même page.
- Je veux garder un lien email de secours visible.

À faire :
1. Lis d'abord les consignes du projet si elles existent (README, AGENTS.md, CLAUDE.md, etc.).
2. Lis ensuite la page de contact du site, par exemple contact.html ou contact/index.html.
3. Repère le formulaire existant, ses champs, ses classes CSS et son système d'envoi actuel.
4. Remplace l'ancien système d'envoi si besoin, par exemple un mailto, par Web3Forms.
5. Ajoute un champ caché access_key avec la valeur YOUR_ACCESS_KEY_HERE. Si je ne t'ai pas donné ma clé, demande-la-moi ou laisse ce placeholder.
6. Utilise les champs name, email, subject et message quand c'est pertinent.
7. Ajoute le bloc hCaptcha : <div class="h-captcha" data-captcha="true"></div>.
8. Ajoute le script client Web3Forms : <script src="https://web3forms.com/client/script.js" async defer></script>.
9. Ajoute un script JavaScript qui intercepte submit, envoie new FormData(form) vers https://api.web3forms.com/submit en POST, puis affiche un message de succès ou d'erreur.
10. Désactive le bouton pendant l'envoi et réactive-le ensuite.
11. Ne casse pas le style existant et ne réécris pas inutilement le reste de la page.
12. Vérifie que la page de confidentialité ou mentions légales parle bien du formulaire, des données collectées et de Web3Forms.
13. Vérifie l'affichage sur ordinateur et mobile, ainsi que les erreurs dans la console.
14. Donne-moi ensuite la liste des fichiers modifiés et les tests à faire après mise en ligne.

Contraintes :
- N'ajoute pas de framework.
- N'ajoute pas de dépendance externe autre que Web3Forms/hCaptcha.
- Ne supprime pas le lien email de secours.
- Ne mets pas de vraie clé Web3Forms dans une documentation publique : utilise un placeholder dans les exemples.
- Ne commit pas et ne pousse pas les changements sans mon accord.
- Consulte la documentation officielle Web3Forms si un détail est incertain.

Vous pouvez remplacer YOUR_ACCESS_KEY_HERE par votre vraie clé si vous travaillez dans un projet privé. Si le dépôt est public ou partagé, demandez d'abord à l'agent où placer la clé et comment éviter de la recopier dans une page de documentation.

Checklist rapide

Vous voulez un formulaire propre, testé, sans alourdir votre site ?

❋ Me confier la configuration ❋

Sources utiles