【初心者必見】静的サイトにフォームを簡単に追加する方法 - Web3Formsの使用方法

はじめに

静的サイトでフォーム機能を実装したいけど、簡単な方法がなくて悩んでいませんか？

「お問い合わせフォームを設置したいのに、複雑な手順が多すぎる…」
「HTMLサイトなのに簡単にフォームを追加したい」

そんな悩みを抱えている方は多いと思います。

「Web3Forms」を使えば、普通のHTMLの知識だけで、簡単にフォーム機能を静的サイトに追加できるんです。

この記事では、Web3Formsの使い方から応用テクニックまで、実際に私が使って分かった情報をすべてシェアします

この記事を読めば、あなたも10分程度で静的サイトに使いやすいフォーム機能を実装できるようになりますので、ぜひ参考にしてみてください。

無料プランでは月間250件という制限がありますので、もっとお問い合わせが見込まれるサイトの場合は、有料プランにするか、以下の記事の「PHP工房」を使用してみてください。

Web3Formsとは？

Web3Forms公式サイト

Web3Formsは、バックエンドサーバーを必要とせずにウェブサイトにコンタクトフォームを実装できるサービスです。

特にJAMstackウェブサイト（静的サイト）向けに設計されています。

主な特徴は以下のとおりです：

サーバーレスのフォーム処理
スパム保護機能
メールでの通知
カスタムリダイレクト
ファイル添付機能
APIキー（アクセスキー）による認証

基本的な使い方としては、HTMLフォームにWeb3Formsのエンドポイントを設定し、アクセスキーを含めることで、フォーム送信時にWeb3Formsがデータを処理してメールで通知を送信します。

静的サイトジェネレーター（NextJS、Gatsby、Nuxt、Astroなど）や、WordPressなどのCMSと組み合わせて使用できます。

フロントエンドのみのウェブサイトでコンタクトフォームを実装する際の簡便なソリューションとして人気があります。

無料プランでは月間250件という制限がありますが、個人サイトや小規模サイトであれば十分な数です。

基本的な実装手順

実装方法を解説していきます。

アクセスキーの取得

公式サイトにアクセスし、「Create your Access Key」を押下してください。

「Create your Access Key」を押下

Create Access Keyのセクションで、メールアドレスを入力して「Create Access Key」ボタンを押下してください。

メールアドレスを入力して「Create Access Key」ボタンを押下

入力したアドレス宛にアクセスキーが届いているので、確認してください。

HTMLの記述

以下のコードをコピペしてください。

この例では、シンプルなスタイリングも含めていますが、もちろんCSSは自由にカスタマイズできます。

項目もご自身の環境に合わせて修正してください。

<!DOCTYPE html>
<html>
<head>
  <title>お問い合わせフォーム</title>
  <style>
    /* 簡単なスタイリング */
    form {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    label, input, textarea, button {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
    input, textarea {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>お問い合わせフォーム</h1>

  <form action="https://api.web3forms.com/submit" method="POST">
    <!-- アクセスキー（必須） -->
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

    <!-- 名前フィールド -->
    <label for="name">お名前:</label>
    <input type="text" id="name" name="name" required>

    <!-- メールフィールド -->
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>

    <!-- 件名フィールド -->
    <label for="subject">件名:</label>
    <input type="text" id="subject" name="subject">

    <!-- メッセージフィールド -->
    <label for="message">メッセージ:</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <!-- 送信ボタン -->
    <button type="submit">送信する</button>
  </form>
</body>
</html>

YOUR_ACCESS_KEY_HEREの部分を先程取得したアクセスキーに置き換えてください。

これで実装基本のフォームが完成です！

フォーム送信テストの方法

コードを実装したら、実際にフォームが機能するかテストしましょう。

HTMLファイルをブラウザで開く（ローカル環境でもOK）
フォームに必要事項を入力する
送信ボタンをクリックする

正しく設定されていれば、送信後に「Form submitted successfully!」というページが表示されます。

デフォルトのサンクスページ

ローカル環境でもテストできるのが嬉しいポイントです！

メールもちゃんと届いているのを確認してください。

受信したお問い合わせメール

カスタマイズ

Web3Formsには様々な便利機能があります。

よく使う代表的なカスタマイズを紹介します。

カスタムリダイレクトの設定

フォームを送信した後、ユーザーをどこに誘導するかを自由に設定できます。

例えば「thanks.html」というページに誘導したい場合は、次のコードをformタグの中に追加するだけです。

<input type="hidden" name="redirect" value="https://あなたのサイト.com/thanks.html">

サンクスページを実装することには以下のようなメリットがあります：

ユーザー体験の向上 - 問い合わせが正常に送信されたという明確な確認をユーザーに提供します
不安の軽減 - 「通常24時間以内に返信します」といった情報を表示することで、ユーザーの期待値を適切に設定できます
コンバージョン計測 - アナリティクスツールと連携させることで、フォーム完了率を正確に測定できます
次のアクションの提案 - 関連コンテンツやSNSフォローの案内など、次のステップをユーザーに促すことができます
ブランド認知の強化 - 企業のメッセージやブランドの個性を伝える追加の機会となります

効果的なサンクスページの内容は以下のようなものがあります。

お礼のメッセージと送信確認
返信までの目安時間
問い合わせ内容の自動返信メールについての案内
よくある質問へのリンク
SNSアカウントへの誘導
関連する製品・サービス情報
サイト内の人気コンテンツへの誘導

サンクスページは単なる確認画面ではなく、ユーザーエンゲージメントを高め、ビジネス目標達成に貢献する重要な要素です。

メールの件名設定

受信するメールの件名をカスタマイズしたい場合は、次のコードをformタグの中に追加するだけです。

<input type="hidden" name="subject" value="新しいお問い合わせがありました">

スパム対策

Web3Formsには、簡単なスパム対策機能も備わっています。

<input type="checkbox" name="botcheck" style="display: none;">

formタグの中に追加するだけで、スパムボットからの自動送信をある程度防ぐことができます。

JavaScriptを使った実装

基本的なフォームでも十分機能しますが、ページ遷移なしでフォームを送信したい場合や、送信成功・失敗時のメッセージをカスタマイズしたい場合は、JavaScriptを使うとより柔軟に実装できます。

ページ遷移なしでフォームを送信する方法

以下が、JavaScriptを使ったフォーム送信の基本的な実装例です。

  <form id="form">
    <input type="hidden" name="access_key" value="71ad5f04-aeae-4d22-b85a-6119b410c162">

    <label for="name">お名前:</label>
    <input type="text" name="name" id="name" required>

    <label for="email">メールアドレス:</label>
    <input type="email" name="email" id="email" required>

    <label for="message">メッセージ:</label>
    <textarea name="message" id="message" required></textarea>

    <button type="submit">送信</button>

    <div id="result"></div>
  </form>

  <script>
    const form = document.getElementById('form');
    const result = document.getElementById('result');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(form);
      const object = Object.fromEntries(formData);
      const json = JSON.stringify(object);

      result.innerHTML = "送信中...";

      fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: json
      })
        .then(async (response) => {
          let json = await response.json();
          if (response.status == 200) {
            result.innerHTML = "<div class='success'>お問い合わせありがとうございます！ 24時間以内に返信いたします。</div>";
            result.classList.add('success');
          } else {
            result.innerHTML = "<div class='error'>エラーが発生しました: " + json.message + "</div>";
            result.classList.add('error');
          }
        })
    });
  </script>

基本的には、フォームの送信イベントを拾って、AjaxでWeb3FormsのAPIにデータを送る仕組みになっています。

ページ変移をすることなく、サンクスメッセージを出すことが可能

この実装をすることでページ変移をすることなく、サンクスメッセージを出すことが可能です。

Web3Formsのアクセスキー管理について

公式ではアクセスキーは隠す必要が無いとの回答がでていますので、そのままでも問題ないかと思います。

アクセスキーについて公式の回答

以下のような方法でアクセスキーの管理もできますので、参考にしてみてください。

1. 設定ファイルを使用する方法

// config.js
const config = {
  web3formsKey: "YOUR_ACCESS_KEY_HERE"
};

設定ファイル（config.js）を作成し、JavaScriptでキーを読み込む：

<!-- HTMLファイル -->
<script src="config.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('input[name="access_key"]').value = config.web3formsKey;
  });
</script>

config.jsファイルを.gitignoreに追加してリポジトリに含めないようにします。

2. 環境変数ファイルを使用する方法

// .env.js (Gitで管理しない)
window.ENV = {
  WEB3FORMS_KEY: "YOUR_ACCESS_KEY_HERE"
};

<script src=".env.js"></script>
<script>
  // フォーム送信時にキーを設定
  const form = document.getElementById('form');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(form);
    formData.append('access_key', window.ENV.WEB3FORMS_KEY);

    fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // 成功時の処理
    });
  });
</script>

3. 静的サイトジェネレーターを使用している場合

Astroなどの静的サイトジェネレーターを使用している場合は、ビルド時に環境変数からキーを注入できます。

# .env (Gitで管理しない)
WEB3FORMS_KEY=your_access_key

ビルド時に環境変数の値がHTMLに埋め込まれるため、環境変数ファイル自体は公開されません。

さいごに

Web3Formsは、静的サイトにフォーム機能を追加するための非常にシンプルかつ効果的なツールです。

この記事でご紹介した方法を使えば、HTMLの基本知識があるだけで、サーバーサイドのコードを書かずにフォーム機能を実装できます。

シンプルな設定で機能するため、開発時間を短縮でき、メンテナンスも簡単ですので、ぜひ実装してみてください。