📬 Web3Forms完全ガイド！初心者でも作れるポップアップフォーム 🌟

Posted at 2025-02-21

Web3Formsで簡単にお問い合わせフォームを作ってみよう！✨

こんにちは、現役エンジニアでテックブロガーの@YushiYamamotoです！
今回は、Web3Formsという無料で使えるサービスを利用して、サーバーレスでお問い合わせフォームを作る方法を初心者にも分かりやすく解説します。
コードを書くのが初めての方でも、この記事を読めば30分以内にカッコいいポップアップ式フォームを自分のサイトに埋め込めるようになりますよ！🎉
では、さっそく始めましょう！

フォームのコード

Web3Formsって何？🤔

Web3Formsは、サーバーサイドのコードを書かずにHTMLだけでお問い合わせフォームを作れる便利なツールです。

フォームに入力されたデータを指定したメールアドレスに送信してくれるAPIを提供しており、特に以下のような人におすすめです：

静的サイト（HTML/CSS/JSのみ） を使っている人
サーバーの管理が面倒だと感じる人
簡単かつ無料でフォームを導入したい人

必要なものは以下だけ：

HTMLコード（今回はポップアップ式のサンプルを用意）
Web3FormsのAPIキー（無料で取得可能）

完成イメージをチェック！👀

この記事で作るのは、画面右下に浮かぶポップアップ式のお問い合わせフォーム。
ボタンを押すとスライドインし、名前やメールアドレス、メッセージを入力できます。
送信すると、指定したメールアドレスに内容が届く仕組みです。
こんな感じ↓：

[画面右下に丸いボタン] → クリック → [ポップアップでフォームが表示]

ステップ1: Web3FormsのAPIキーを取得する 🚀

まずはAPIキーを手に入れましょう。手順は超簡単です！

Web3Formsの公式サイトにアクセス。
「Get Started」をクリックし、アカウントを作成（メールアドレスだけでOK）。
ダッシュボードで「Access Key」を生成。
→ 例: abcd1234-5678-9012-efgh-3456ijkl7890

このキーは後でコードに埋め込むので、コピーしておいてくださいね。

ステップ2: 基本のHTMLコードを準備する 📝

今回は、提供されたコードをベースに、日本語対応のポップアップフォームを作ります。
以下がそのコードの概要です（細かい部分は後で解説します）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>
  <!-- ポップアップウィジェット -->
  <div id="web3forms__widget" x-data="{ open: false }">
    <!-- フォーム本体 -->
    <div id="w3f__widget--content" x-show="open" class="fixed ...">
      <form action="https://api.web3forms.com/submit" method="POST">
        <input type="hidden" name="access_key" value="YOUR_API_KEY">
        <input type="text" name="name" placeholder="山田 太郎" required>
        <input type="email" name="email" placeholder="you@company.com" required>
        <textarea name="message" placeholder="メッセージを入力"></textarea>
        <button type="submit">送信</button>
      </form>
    </div>
    <!-- 開閉ボタン -->
    <button @click="open = !open">お問い合わせ</button>
  </div>

  <!-- 必要なライブラリ -->
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</body>
</html>

ポイント解説

<form>タグ: action属性でWeb3FormsのAPIエンドポイントを指定。
access_key: 先ほど取得したAPIキーをここに貼り付け。
Alpine.js: 軽量なJavaScriptライブラリで、ポップアップの開閉を簡単に実現。

ステップ3: デザインを整える 🎨

素っ気ないフォームじゃつまらないですよね？
そこで、Tailwind CSSを使ってモダンな見た目に仕上げます。
提供されたコードにはすでにTailwindが組み込まれているので、そのまま使えます。

Tailwindの読み込み

<script src="https://cdn-tailwindcss.vercel.app/"></script>

これで、ボタンの色や影、アニメーションが適用されます。たとえば：

送信ボタン: bg-indigo-500（青紫色）
ポップアップ: shadow-2xl（立体感のある影）

ステップ4: フォーム送信を動かす ⚙️

フォームが送信されると、Web3FormsのAPIがデータを処理し、登録したメールに送信します。
その処理をJavaScriptでカスタマイズしましょう。

サンプルコード（送信処理）

<script>
  document.getElementById('form').addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトの送信をキャンセル
    const formData = new FormData(this);
    fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      document.getElementById('result').innerHTML = '送信成功！🎉';
    })
    .catch(error => {
      document.getElementById('result').innerHTML = 'エラー発生 😢';
    });
  });
</script>

フローチャートで仕組みを理解

[ユーザーがフォーム入力] → [送信ボタンクリック] → [fetchでAPIにデータ送信] → [成功/失敗メッセージ表示]

ステップ5: バリデーションを追加する ✅

入力漏れやメールアドレスの形式ミスを防ぐため、HTML5のバリデーションを活用します。
さらに、提供コードにはカスタムバリデーションも含まれています。

コード例

<input type="email" name="email" required>
<div class="invalid-feedback text-red-400">
  有効なメールアドレスを入力してください。
</div>

CSSでエラー時の見た目を調整：

.was-validated :invalid {
  border-color: #dc3545; /* 赤枠 */
}

これで、空欄や無効な入力があると赤い枠とエラーメッセージが表示されます。

注意点: APIキーのセキュリティ 🔒

通常、<input type="hidden" name="access_key" value="YOUR_API_KEY">のようにAPIキーをHTMLに直接書くと、ブラウザの「開発者ツール」などで誰でも見れてしまうため、セキュリティが心配になりますよね。
でも、Web3Formsの場合は特別！
実は、Web3FormsのAPIキーは公開されても大丈夫なように設計されています。具体的には：

送信先が固定: APIキーにはあらかじめ登録したメールアドレスが紐づけられており、第三者が勝手に別の送信先にデータを送ることはできません。
スパム対策済み: CAPTCHAやレート制限が裏側で働いているため、悪用されにくい仕組みになっています。

つまり、初心者でも安心してそのままコードに埋め込んじゃってOK！🎉
公式サイトでも「APIキーをHTMLに直接書いても問題ない」と明記されています（参考: Web3Forms FAQ）。

とはいえ、さらに安全にしたい場合

「それでもちょっと気になる…」という方は、次の方法を試してみてもいいかも：

環境変数を使う: .envファイルにAPIキーを保存し、ビルド時に埋め込む。（見た目だけ隠したい場合に有効）
```
# .env
WEB3FORMS_API_KEY=abcd1234-5678-9012-efgh-3456ijkl7890
```
※静的サイトの場合、ビルドツール（例: ViteやWebpack）で設定が必要。
カスタムプロキシ: サーバー側でAPIリクエストを中継する仕組みを作る（上級者向け）。

でも、Web3Formsの基本的な用途（個人サイトや小規模プロジェクト）なら、そのまま使うのが手軽で十分です。安心してフォーム作りを楽しんでくださいね！😊

完成！試してみよう 🎉

上記のコードをindex.htmlとして保存。
APIキーをvalue="YOUR_API_KEY"に書き換え。
ブラウザで開いてテスト！

送信すると、登録したメールに以下のような内容が届きます：

件名: Web3Formsからの新しい送信
お名前: 山田 太郎
メールアドレス: you@company.com
メッセージ: こんにちは、お元気ですか？

カスタマイズアイデア 💡

デザイン変更: bg-indigo-500をbg-green-500に変えて色を調整。
多言語対応: <html lang="en">にして英語版も作ってみる。
追加フィールド: <input name="phone" placeholder="電話番号">を追加。

まとめ

Web3Formsを使えば、サーバーレスで簡単にフォームを作れます。
HTMLと少しのJavaScriptで、初心者でもプロっぽいUIが実現可能！
ぜひ自分のプロジェクトに取り入れて、ユーザーからの声を集めてみてくださいね。

質問があればコメント欄で気軽に聞いてください！
次回は「フォームデータをGoogleスプレッドシートに保存する方法」を紹介するかも？お楽しみに！👋

参考リンク:

フォームのコード

最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up