Formulaire de contact JavaScript qui envoie le courriel

Formgong team · Updated 2026-10-06

Un formulaire de contact JavaScript a quand même besoin d'une adresse pour le POST. Appelez fetch, envoyez les champs et lisez la réponse JSON. Formgong accepte cet appel sans votre serveur. Il ne faut ni bibliothèque ni route API. Au plan gratuit, Telegram est immédiat et le courriel est un résumé du jour.

Copier ce formulaire JavaScript

Langue du formulaireLibellés, exemples, bouton et messages Formgong pour les visiteurs (_lang).

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="fr">
  <label>Nom <input type="text" name="name" autocomplete="name" placeholder="Votre nom" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="vous@exemple.com" required></label>
  <label>Message <textarea name="message" placeholder="Comment pouvons-nous vous aider ?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Laissez ce champ vide<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Envoyer</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Envoyé. Merci !" : "Échec de l’envoi. Veuillez réessayer.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "Connexion impossible. Veuillez réessayer.";
    } finally {
      button.disabled = false;
    }
  });
</script>

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" placeholder="आपका नाम" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">भेजें</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result.success) form.reset();
    } catch {
      status.textContent = "कनेक्शन विफल। कृपया फिर से कोशिश करें।";
    } finally {
      button.disabled = false;
    }
  });
</script>

Envoyer FormData au lieu de JSON

Envoyer FormData au lieu de JSON

<script>
  const form = document.querySelector("#fg-contact");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = form.querySelector("[role=status]");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Envoyé. Merci !" : "Échec de l’envoi. Veuillez réessayer.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "Connexion impossible. Veuillez réessayer.";
    }
  });
</script>

Seul l'appel fetch, si le formulaire est déjà sur la page

Seul l'appel fetch, si le formulaire est déjà sur la page

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "fr", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Échec de l’envoi. Veuillez réessayer.");
  return result.message; // localized "Sent. Thank you!"
}

Comment fonctionnent les formulaires dans JavaScript

On cherche un formulaire JavaScript qui envoie le courriel, pas un formulaire fetch. fetch est seulement l'appel du navigateur qui fait le POST. EmailJS, Axios et une route serveur ne sont pas nécessaires.

Envoyez un en-tête Accept avec application/json, sinon le point répond par une redirection, comme un formulaire simple. Un fetch raté lance une erreur. Une demande refusée revient avec success à false et un texte à montrer.

Mise en place dans JavaScript

Créez un formulaire dans Formgong et copiez la clé.
Collez le code ci-dessus. C'est un formulaire et un court script : async et await, JSON et try catch pour les erreurs réseau.
Laissez le champ leurre vide et hors de l'écran. Si un robot le remplit, la demande est gardée comme spam et n'est pas livrée.
Le script coupe le bouton pendant la requête, puis montre le texte de la réponse. Le succès vide le formulaire.
Ouvrez la page réelle et envoyez un essai. Vérifiez la boîte, puis reliez Telegram si vous voulez un signal sur le téléphone.

Façons d'envoyer un formulaire JavaScript

Option	Ce que vous tenez	Ce que vous recevez
mailto:	Rien sur un serveur. Le logiciel s'ouvre.	Un message seulement si le visiteur envoie. Sur téléphone, cela casse vite.
Votre route API	Un serveur, SMTP et un secret.	Un courriel que vous contrôlez. Le spam, les pannes et le code sont aussi à vous.
EmailJS	Leur script dans la page.	Le courriel par leur service. Cette ligne ne donne pas de prix. Il n'a pas été revu ce jour-là.
Formspree	Aucun. Le navigateur envoie à Formspree.	Courriel et tableau de bord. Gratuit : 50 envois par mois. Personal coûte 15 dollars par mois.
Formgong	Aucun. fetch envoie à Formgong.	Telegram tout de suite. Au plan Free, le courriel est un résumé du jour. 300 envois par mois, données dans l'UE.

Les prix Formspree viennent de formspree.io/plans le 2026-10-06. Les limites Formgong viennent du code. EmailJS sort sur cette recherche. Son prix n'a pas été revu ce jour-là. Web3Forms.com a répondu HTTP 403, donc il n'est pas dans le tableau.

Tarifs · Formulaire de contact HTML qui envoie le courriel

Paquet de composants: npm install @formgong/core (npm: @formgong/core)

Ajouter à un projet existant: npx formgong init (npm: formgong)

fetch, une bibliothèque ou votre serveur ?

Prenez cette page pour du JavaScript simple, un petit widget ou une fenêtre. Le visiteur reste sur la page.

Prenez du HTML simple si JavaScript peut être coupé. Le formulaire ci-dessus a quand même un action, donc il marche sans le script.

Écrivez votre serveur seulement si la demande doit changer des données dans votre app. EmailJS envoie par son script. Formgong est un POST.

Questions et réponses

JavaScript peut-il envoyer un formulaire sans serveur ?

Le navigateur ne parle pas SMTP. Il peut envoyer les champs en POST à un backend. Ce backend envoie le courriel. Vous ne tenez pas de serveur pour ce formulaire.

Faut-il envoyer FormData ou JSON ?

JSON convient aux champs de texte. FormData convient si le formulaire est déjà là et si vous envoyez des fichiers. Les deux arrivent dans la même boîte. Ne mettez pas Content-Type vous-même sur FormData.

Pourquoi une redirection au lieu de JSON ?

Un POST de formulaire simple renvoie une redirection. Pour du JSON, envoyez un en-tête Accept avec application/json. Puis lisez success et le texte.

Comment traiter les erreurs ?

Un fetch raté lance une erreur. C'est une erreur réseau. Une demande refusée renvoie du JSON avec success à false. Montrez ce texte et gardez ce que la personne a écrit.

Faut-il EmailJS ou une autre bibliothèque ?

Non. fetch est dans le navigateur. Une bibliothèque va bien si vous l'avez déjà. Envoyez les mêmes champs et les mêmes en-têtes.

Commencer gratuitement

Toutes les plateformes →