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

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

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

![スクリーンショット 2025-02-21 10.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/990163a4-9eed-42b7-a7c6-390df67c612d.png)

[フォームのコード](https://codesandbox.io/p/devbox/contact-form-popup-widget-forked-s7sdkr)

---

## Web3Formsって何？🤔


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

:::note info

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

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

:::

必要なものは以下だけ：
1. **HTMLコード**（今回はポップアップ式のサンプルを用意）
2. **Web3FormsのAPIキー**（無料で取得可能）

---

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

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

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

---

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

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

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

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

---

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

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

```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の読み込み
```html
<script src="https://cdn-tailwindcss.vercel.app/"></script>
```

これで、ボタンの色や影、アニメーションが適用されます。たとえば：
- 送信ボタン: `bg-indigo-500`（青紫色）
- ポップアップ: `shadow-2xl`（立体感のある影）

---

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

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

### サンプルコード（送信処理）
```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のバリデーションを活用します。  
さらに、提供コードにはカスタムバリデーションも含まれています。

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

CSSでエラー時の見た目を調整：
```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](https://web3forms.com/faq)）。

### とはいえ、さらに安全にしたい場合
「それでもちょっと気になる…」という方は、次の方法を試してみてもいいかも：
- **環境変数を使う**: `.env`ファイルにAPIキーを保存し、ビルド時に埋め込む。（見た目だけ隠したい場合に有効）
  ```bash
  # .env
  WEB3FORMS_API_KEY=abcd1234-5678-9012-efgh-3456ijkl7890
  ```
  ※静的サイトの場合、ビルドツール（例: ViteやWebpack）で設定が必要。
- **カスタムプロキシ**: サーバー側でAPIリクエストを中継する仕組みを作る（上級者向け）。

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

---

## 完成！試してみよう 🎉

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

送信すると、登録したメールに以下のような内容が届きます：
```
件名: Web3Formsからの新しい送信
お名前: 山田 太郎
メールアドレス: you@company.com
メッセージ: こんにちは、お元気ですか？
```

---

## カスタマイズアイデア 💡

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

---

## まとめ

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

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

---

*参考リンク*:  
- [Web3Forms公式](https://web3forms.com/)  
- [Tailwind CSSドキュメント](https://tailwindcss.com/docs)  
- [Alpine.js公式](https://alpinejs.dev/)


![スクリーンショット 2025-02-21 10.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/990163a4-9eed-42b7-a7c6-390df67c612d.png)

[フォームのコード](https://codesandbox.io/p/devbox/contact-form-popup-widget-forked-s7sdkr)

---

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

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

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

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)