Netlifyは、静的サイトホスティングサービスとして知られていますが、独自のフォームハンドリング機能を利用することで、サーバーレスで簡単にお問い合わせフォームを構築できます。本記事では、HTMLやJavaScriptを使ったNetlifyフォームの実装手順を詳しく解説します。
[目次を開く]
1. Netlifyフォームの基本概要
Netlifyのフォーム機能は、静的HTMLの中にフォームを記述するだけで、バックエンドのコードなしにデータを収集できます。
フォームに必要なデータは、Netlifyのダッシュボードに保存されるほか、通知機能を使ってメールや他のサービスにデータを送ることも可能です。
2. 実装手順
Step 1: HTMLでフォームを作成
Netlifyがフォームを認識するには、フォームの<form>タグに属性にdata-netlify="true"とnetlify-honeypot="bot-field"を追加します。以下は基本的なお問い合わせフォームの例です：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせ</h1>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<input type="hidden" name="form-name" value="contact">
<p>
<label for="name">お名前:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</p>
<p>
<button type="submit">送信</button>
</p>
</form>
</body>
</html>
Step 2: form-nameフィールドの設定
Netlifyがフォームを識別するため、<form>タグ内に以下のようにhiddenフィールドを追加します：
html
コードをコピーする
<input type="hidden" name="form-name" value="contact">
-
form-nameの値はフォーム名です。 - Netlifyダッシュボードでフォームを管理する際、この名前が使われます。
Step 3: フォームのテスト
作成したフォームをNetlifyにデプロイすると、自動的にフォーム機能が有効化されます。
Netlifyがフォームを認識するとSite overviewのRecent form submiionsというセクターが左から右のように変化します。
以下の手順でテストします：
- フォームにデータを入力し、「送信」ボタンをクリック。
- フォーム送信後、Netlifyのデフォルトの「Thank You」ページが表示されます。カスタムのサンクスページを作る場合は以下を参照してください。
Step 4: カスタムのサンクスページを設定
送信後のリダイレクト先を設定するには、<form>タグにaction属性を追加します：
<form name="contact" method="POST" data-netlify="true" action="/thank-you">カスタムサンクスページ例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank You</title>
</head>
<body>
<h1>送信ありがとうございました！</h1>
<p>お問い合わせ内容を確認し、折り返しご連絡いたします。</p>
</body>
</html>3. 高度な設定
1. スパム対策 (Honeypotフィールド)
スパム送信を防ぐために、目に見えないフィールドを追加することが推奨されます。Netlifyは、入力された場合に送信を無視します。
<p style="display:none">
<label>こちらには入力しないでください: <input name="bot-field"></label>
</p>2. JavaScriptでフォーム送信後の処理を追加
JavaScriptを使ってフォーム送信を非同期で行うことも可能です：
<script>
const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
event.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch("/", {
method: "POST",
body: formData,
});
if (response.ok) {
window.location.href = "/thank-you"; // リダイレクト
}
} catch (error) {
console.error("フォームの送信に失敗しました", error);
}
});
</script>3. Slackやメールへの通知
Netlifyフォームは、通知機能を使って送信されたデータをSlackやメールで受け取ることが可能です。
- Netlifyのダッシュボードにログイン。
- ターゲットのサイトを選択。
- サイドバーから「Forms」→「Notifications」を選択。
- 通知設定を追加し、Slackやメールを連携。
まとめ
Netlifyを利用すると、サーバーレスで簡単にお問い合わせフォームを構築できます。HTMLにフォームを記述するだけでバックエンドなしで運用可能なため、静的サイトに最適です。
以下を抑えると、さらに快適なフォーム運用が可能です：
- 必須の
form-nameとdata-netlify="true"の設定 - スパム対策の実施
- Slackやメール通知との連携
シンプルな実装から高度なカスタマイズまで、Netlifyのフォーム機能を活用して効率的なウェブサイト運営を行いましょう！
