1. Astroプロジェクトの準備とNetlifyへのデプロイ
まずは、Astro CLIを使用して新しいプロジェクトを作成しましょう。端末で以下のコマンドを実行します。
# 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を利用するためには、フォームタグに特定の属性を追加する必要があります。以下は、基本的なフォームのサンプルコードです。
<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で制御することが可能です。以下は、フォーム送信時に送信中の文言を表示し、送信成功時にボタン上に完了メッセージを表示する例です。
<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の管理画面でフォーム動作の確認
-
デプロイ完了後の確認
Netlifyにプロジェクトをデプロイすると、Netlifyダッシュボードの「Forms」セクションにフォーム名（この例では「contact」）が自動的に表示されます。 -
送信内容の通知
Netlifyの「Add notification」オプションを利用すれば、フォーム送信があるたびにメール通知する設定も可能です。これにより、実運用時に送信内容の確認が容易になります[4].
6. フォーム送信フローの図解
以下は、フォーム送信からNetlifyによる処理までの流れを示すシンプルなフローチャートです。視覚的に全体のイメージを把握できます。
まとめ
-
Astroプロジェクトの作成とNetlifyへのデプロイ
Astro CLIを用いて簡単に新規プロジェクトを作成し、Netlifyにデプロイすることで、Netlify Forms機能が自動で有効化されます。 -
フォームの記述とハニーポットによるスパム対策
フォームタグにdata-netlify属性と隠しフィールド（ハニーポット）を追加するだけで、専用のサーバーサイド実装なしに問い合わせフォームが機能します。 -
送信後のフィードバック表示
JavaScriptを用いて送信中や完了後のメッセージ表示を実装することで、ユーザー体験を向上させることが可能です。
これらの手順に従えば、初心者の方でも手軽にお問い合わせフォームを構築し、無料でスパム対策を施すことができます。ぜひ実際に試して、御社のプロジェクトに役立ててください！✨
💖 ご支援いただけませんか？
このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！
暗号資産による寄付
以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。
Ethereum (ETH) （ネットワーク: ERC-20）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
BNB Chain (BNB) （ネットワーク: BEP-20）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Polygon (MATIC) （ネットワーク: Polygon）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Avalanche (AVAX) （ネットワーク: Avalanche C-Chain）
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Solana (SOL)
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
Stellar (XLM) メモ: 必要に応じて入力してください。
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
Ripple (XRP) タグ: 必要に応じて入力してください。
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
Cardano (ADA)
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
Dogecoin (DOGE)
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
資金用途
寄付金は以下の目的で活用させていただきます：
- サーバー維持費やデザインツール購入
- 学習活動（オンラインコース受講・書籍購入）
- 読者向け無料コンテンツ制作
ご協力いただいた皆さまには心より感謝申し上げます！ 🙏
補足情報
-
Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。 -
USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
-
初回送金時には少額でテスト送金することをおすすめします。