Formgong

メールを送るJavaScriptお問い合わせフォーム

Formgong team ·

JavaScriptのお問い合わせにもPOSTの宛先が要ります。fetchを呼び、項目を送り、JSONの返事を読みます。Formgongはその呼び出しを、あなたのサーバなしで受けます。ライブラリもAPI経路も要りません。無料プランではTelegramはすぐで、メールは1日1通のまとめです。

このJavaScriptフォームをコピー

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="ja">
  <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>
JSONの代わりにFormDataを送る
JSONの代わりにFormDataを送る
<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 ? "送信しました。ありがとうございます。" : "送信できませんでした。もう一度お試しください。");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "接続できませんでした。もう一度お試しください。";
    }
  });
</script>
フォームが既にあるときのfetchだけ
フォームが既にあるときのfetchだけ
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: "ja", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "送信できませんでした。もう一度お試しください。");
  return result.message; // localized "Sent. Thank you!"
}

JavaScriptでのフォームの仕組み

探すのはメールを送るJavaScriptフォームで、fetchフォームではありません。fetchはPOSTをするブラウザの呼び出しにすぎません。EmailJSもAxiosもサーバ経路も要りません。

Acceptにapplication/jsonを付けないと、素のフォームと同じく転送が返ります。失敗したfetchは例外になります。拒まれた件はsuccessがfalseで、見せられる文が返ります。

JavaScriptでの設定手順

  1. Formgongでフォームを作り、鍵をコピーします。
  2. 上のコードを貼ります。フォームと短いスクリプトです。asyncとawait、JSON、通信失敗のtry catchです。
  3. 罠の項目は空のまま、画面の外に置きます。ボットが埋めると、件は迷惑として残り、届きません。
  4. スクリプトは送信中にボタンを止め、返事の文を出します。成功するとフォームを空にします。
  5. 公開ページを開き、試験を送ります。受信箱を見て、電話に知らせるならTelegramをつなぎます。

JavaScriptフォームを送る方法

方法自分で動かすもの届くもの
mailto:サーバには何もありません。メールアプリが開きます。相手が送ったときだけ届きます。電話では壊れやすいです。
自分のAPI経路サーバ、SMTP、秘密です。自分で扱うメールです。迷惑メール、停止、コードも自分のものです。
EmailJSページ上の相手のスクリプトです。相手のサービス経由のメールです。この行に料金はありません。その日は料金を見直していません。
Formspreeなし。ブラウザがFormspreeへ送ります。メールと画面です。無料は月50件です。Personalは月15ドルです。
Formgongなし。fetchがFormgongへ送ります。Telegramはすぐです。Freeのメールは1日1通のまとめです。月300件で、データはEUです。

Formspreeの料金は2026-10-06のformspree.io/plansです。Formgongの上限はコードです。EmailJSはこの検索に出ます。料金はその日見直していません。Web3Forms.comはHTTP 403だったので表にありません。

料金 · メールを送るHTMLお問い合わせフォーム

コンポーネントパッケージ: npm install @formgong/core (npm: @formgong/core)

既存のプロジェクトに追加: npx formgong init (npm: formgong)

fetch、ライブラリ、自分のサーバ

素のJavaScript、小さな部品、または窓ならこのページです。相手はページに残ります。

JavaScriptが切れているかもしれないなら素のHTMLです。上のフォームにはactionがあるので、スクリプトがなくても動きます。

自分のアプリのデータを変えるときだけ、自分のサーバを書きます。EmailJSは自分のスクリプトで送ります。Formgongは1回のPOSTです。

よくある質問

JavaScriptはサーバなしでフォームをメールできますか

ブラウザはSMTPを話しません。項目をPOSTで受け口へ送れます。メールを送るのはその受け口です。このフォームのためにサーバは動かしません。

FormDataとJSONのどちらですか

JSONは文字の項目に向きます。FormDataはフォームが既にあるときと、ファイルを送るときに向きます。どちらも同じ受信箱です。FormDataではContent-Typeを自分で付けません。

JSONではなく転送が返るのはなぜですか

素のフォームのPOSTは転送を返します。JSONにするにはAcceptにapplication/jsonを付けます。そのあとsuccessと文を読みます。

失敗はどう扱いますか

失敗したfetchは例外です。それは通信の失敗です。拒まれた件はsuccessがfalseのJSONです。その文を出し、入力した内容は残します。

EmailJSや別のライブラリは必要ですか

不要です。fetchはブラウザにあります。既に使うライブラリでも同じ項目と同じヘッダを送れば足ります。

無料ではじめる

すべてのプラットフォーム →