💡 Astroで簡単！Netlifyで無料フォーム作成＆スパム対策⚡

## 1. Astroプロジェクトの準備とNetlifyへのデプロイ

まずは、Astro CLIを使用して新しいプロジェクトを作成しましょう。端末で以下のコマンドを実行します。

```bash
# npmの場合
npm create astro@latest

# yarnの場合
yarn create astro

# pnpmの場合
pnpm create astro@latest
```

CLIの指示に従いプロジェクトを作成したら、ローカルでの開発環境が整います。次に、GitHubなどのリポジトリにプッシュし、Netlifyにインポートしてデプロイします。NetlifyはHTML内の`<form>`タグを自動検出し、フォーム機能を有効化するため、最初のデプロイが完了していることが前提となります[1][7]。

---

## 2. お問い合わせフォームのHTMLコード記述

Netlify Formsを利用するためには、フォームタグに特定の属性を追加する必要があります。以下は、基本的なフォームのサンプルコードです。

```html
<form id="js-contactForm" name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <!-- スパム対策用：ハニーポットフィールド（ユーザーには表示されません） -->
  <input type="hidden" name="bot-field" />

  <div class="formParts">
    <dl class="item">
      <dt class="title">
        <label class="label required" for="yourName">お名前</label>
      </dt>
      <dd class="entry">
        <input type="text" id="yourName" name="お名前" placeholder="例) 山田 太郎" required />
      </dd>
    </dl>
    <dl class="item">
      <dt class="title">
        <label class="label required" for="yourEmail">ご返信先（メールアドレス）</label>
      </dt>
      <dd class="entry">
        <input type="email" id="yourEmail" name="ご返信先" placeholder="example@example.com" required />
      </dd>
    </dl>
    <dl class="item">
      <dt class="title">
        <label class="label required" for="message">お問い合わせ内容</label>
      </dt>
      <dd class="entry">
        <textarea id="message" name="お問い合わせ内容" placeholder="お問い合わせ内容をご記入ください" required></textarea>
      </dd>
    </dl>
  </div>
  <button id="js-submitButton" type="submit">送信する</button>
</form>
```

### ポイント

- **`data-netlify="true"`**  
  フォームがNetlifyにより自動認識されるための属性です。

- **`netlify-honeypot="bot-field"`**  
  ハニーポット用のフィールド名を指定しています。通常のユーザーはこの隠しフィールドに何も入力しませんが、スパムボットは全フィールドに入力してしまうため、値がある場合は不正送信として除外できます[5][6]。

---

## 3. フォーム送信後の動作（サンクスページ＆メッセージ表示）

Netlifyでは、フォーム送信後の挙動をJavaScriptで制御することが可能です。以下は、フォーム送信時に送信中の文言を表示し、送信成功時にボタン上に完了メッセージを表示する例です。

```html
<script is:inline>
  const form = document.getElementById("js-contactForm");
  const submitButton = document.getElementById("js-submitButton");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    submitButton.textContent = "送信中です…";
    
    const formData = new FormData(form);
    
    fetch("/", {
      method: "POST",
      body: formData,
      headers: {
        Accept: "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          submitButton.textContent = "お問い合わせありがとうございます。";
          form.reset();
        } else {
          submitButton.textContent = "送信エラーです。";
        }
      })
      .catch((error) => {
        submitButton.textContent = "送信エラーです。";
      });
  });
</script>
```

この方法では、フォーム送信完了時にユーザーへフィードバックを与え、場合によってはサンクスページへリダイレクトする実装も容易に行えます。👉

---

## 4. 無料スパム対策：ハニーポットの導入

### ハニーポットフィールドの活用

- **実装方法**  
  前述のフォームコードで紹介している通り、ユーザーには見えない隠しフィールド（例: `bot-field`）を追加します。

- **仕組み**  
  通常のユーザーはこのフィールドに入力せず送信しますが、スパムボットは全フィールドに値を埋めようとするため、値が入っていた場合は不正な送信として検出・無効化できます。

- **注意点**  
  CSSで `display: none;` を指定する方法もありますが、アクセシビリティを考慮して正しく実装してください。

また、必要に応じてGoogle reCAPTCHA（オプション）を導入する方法もありますが、Netlify Formsの場合はハニーポットで十分なケースが多いです[2][3]。

---

## 5. Netlifyの管理画面でフォーム動作の確認

1. **デプロイ完了後の確認**  
   Netlifyにプロジェクトをデプロイすると、Netlifyダッシュボードの「Forms」セクションにフォーム名（この例では「contact」）が自動的に表示されます。

2. **送信内容の通知**  
   Netlifyの「Add notification」オプションを利用すれば、フォーム送信があるたびにメール通知する設定も可能です。これにより、実運用時に送信内容の確認が容易になります[4].

---

## 6. フォーム送信フローの図解

以下は、フォーム送信からNetlifyによる処理までの流れを示すシンプルなフローチャートです。視覚的に全体のイメージを把握できます。

```mermaid
flowchart TD
    A[ユーザー入力] --> B[フォーム送信]
    B --> C[NetlifyがHTMLを解析]
    C --> D{ハニーポットチェック}
    D -- 値がある場合 --> E[スパムと判断、リジェクト]
    D -- 空の場合 --> F[フォーム送信受理]
    F --> G[ダッシュボードに表示]
    G --> H[メール通知（任意設定）]
```

---

## まとめ

- **Astroプロジェクトの作成とNetlifyへのデプロイ**  
  Astro CLIを用いて簡単に新規プロジェクトを作成し、Netlifyにデプロイすることで、Netlify Forms機能が自動で有効化されます。

- **フォームの記述とハニーポットによるスパム対策**  
  フォームタグに`data-netlify`属性と隠しフィールド（ハニーポット）を追加するだけで、専用のサーバーサイド実装なしに問い合わせフォームが機能します。

- **送信後のフィードバック表示**  
  JavaScriptを用いて送信中や完了後のメッセージ表示を実装することで、ユーザー体験を向上させることが可能です。

これらの手順に従えば、初心者の方でも手軽にお問い合わせフォームを構築し、無料でスパム対策を施すことができます。ぜひ実際に試して、御社のプロジェクトに役立ててください！✨

---
---
## **💖 ご支援いただけませんか？**

![スクリーンショット 2025-01-31 7.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/f9d94b4d-dbd3-ab70-6b2b-dfc289cda562.png)


このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！** 送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

---

<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum Logo" width="20">

**Ethereum (ETH)**  （ネットワーク: ERC-20）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png" alt="BNB Logo" width="20">

**BNB Chain (BNB)**  （ネットワーク: BEP-20）
```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="Polygon Logo" width="20">

**Polygon (MATIC)**   （ネットワーク: Polygon）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174  
```
<img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" alt="Avalanche Logo" width="20">

**Avalanche (AVAX)**    （ネットワーク: Avalanche C-Chain）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" width="20">

**Solana (SOL)**  
```
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
```

<img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" alt="Stellar Logo" width="20">

**Stellar (XLM)**    メモ: 必要に応じて入力してください。

```
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO 
```

<img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="Ripple Logo" width="20"> 

**Ripple (XRP)**    タグ: 必要に応じて入力してください。

```
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
```

<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="Cardano Logo" width="20">

**Cardano (ADA)**  

```
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
```

<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="Dogecoin Logo" width="20">

**Dogecoin (DOGE)**  
```
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
```

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---