はじめに
静的サイトでフォーム機能を実装したいけど、簡単な方法がなくて悩んでいませんか？
「お問い合わせフォームを設置したいのに、複雑な手順が多すぎる…」
「HTMLサイトなのに簡単にフォームを追加したい」
そんな悩みを抱えている方は多いと思います。
「Web3Forms」を使えば、普通のHTMLの知識だけで、簡単にフォーム機能を静的サイトに追加できるんです。
この記事では、Web3Formsの使い方から応用テクニックまで、実際に私が使って分かった情報をすべてシェアします
この記事を読めば、あなたも10分程度で静的サイトに使いやすいフォーム機能を実装できるようになりますので、ぜひ参考にしてみてください。
無料プランでは月間250件という制限がありますので、もっとお問い合わせが見込まれるサイトの場合は、有料プランにするか、以下の記事の「PHP工房」を使用してみてください。
Web3Formsとは？
Web3Formsは、バックエンドサーバーを必要とせずにウェブサイトにコンタクトフォームを実装できるサービスです。
特にJAMstackウェブサイト（静的サイト）向けに設計されています。
主な特徴は以下のとおりです：
- サーバーレスのフォーム処理
- スパム保護機能
- メールでの通知
- カスタムリダイレクト
- ファイル添付機能
- APIキー（アクセスキー）による認証
基本的な使い方としては、HTMLフォームにWeb3Formsのエンドポイントを設定し、アクセスキーを含めることで、フォーム送信時にWeb3Formsがデータを処理してメールで通知を送信します。
静的サイトジェネレーター（NextJS、Gatsby、Nuxt、Astroなど）や、WordPressなどのCMSと組み合わせて使用できます。
フロントエンドのみのウェブサイトでコンタクトフォームを実装する際の簡便なソリューションとして人気があります。
無料プランでは月間250件という制限がありますが、個人サイトや小規模サイトであれば十分な数です。
基本的な実装手順
実装方法を解説していきます。
アクセスキーの取得
公式サイトにアクセスし、「Create your Access Key」を押下してください。
Create Access Keyのセクションで、メールアドレスを入力して「Create Access Key」ボタンを押下してください。
入力したアドレス宛にアクセスキーが届いているので、確認してください。
HTMLの記述
以下のコードをコピペしてください。
この例では、シンプルなスタイリングも含めていますが、もちろんCSSは自由にカスタマイズできます。
項目もご自身の環境に合わせて修正してください。
<!DOCTYPE html>
<html>
<head>
<title>お問い合わせフォーム</title>
<style>
/* 簡単なスタイリング */
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
label, input, textarea, button {
display: block;
width: 100%;
margin-bottom: 15px;
}
input, textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="https://api.web3forms.com/submit" method="POST">
<!-- アクセスキー（必須） -->
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<!-- 名前フィールド -->
<label for="name">お名前:</label>
<input type="text" id="name" name="name" required>
<!-- メールフィールド -->
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<!-- 件名フィールド -->
<label for="subject">件名:</label>
<input type="text" id="subject" name="subject">
<!-- メッセージフィールド -->
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<!-- 送信ボタン -->
<button type="submit">送信する</button>
</form>
</body>
</html>YOUR_ACCESS_KEY_HEREの部分を先程取得したアクセスキーに置き換えてください。
これで実装基本のフォームが完成です！
フォーム送信テストの方法
コードを実装したら、実際にフォームが機能するかテストしましょう。
- HTMLファイルをブラウザで開く（ローカル環境でもOK）
- フォームに必要事項を入力する
- 送信ボタンをクリックする
正しく設定されていれば、送信後に「Form submitted successfully!」というページが表示されます。
ローカル環境でもテストできるのが嬉しいポイントです！
メールもちゃんと届いているのを確認してください。
カスタマイズ
Web3Formsには様々な便利機能があります。
よく使う代表的なカスタマイズを紹介します。
カスタムリダイレクトの設定
フォームを送信した後、ユーザーをどこに誘導するかを自由に設定できます。
例えば「thanks.html」というページに誘導したい場合は、次のコードをformタグの中に追加するだけです。
<input type="hidden" name="redirect" value="https://あなたのサイト.com/thanks.html">
サンクスページを実装することには以下のようなメリットがあります：
- ユーザー体験の向上 – 問い合わせが正常に送信されたという明確な確認をユーザーに提供します
- 不安の軽減 – 「通常24時間以内に返信します」といった情報を表示することで、ユーザーの期待値を適切に設定できます
- コンバージョン計測 – アナリティクスツールと連携させることで、フォーム完了率を正確に測定できます
- 次のアクションの提案 – 関連コンテンツやSNSフォローの案内など、次のステップをユーザーに促すことができます
- ブランド認知の強化 – 企業のメッセージやブランドの個性を伝える追加の機会となります
効果的なサンクスページの内容は以下のようなものがあります。
- お礼のメッセージと送信確認
- 返信までの目安時間
- 問い合わせ内容の自動返信メールについての案内
- よくある質問へのリンク
- SNSアカウントへの誘導
- 関連する製品・サービス情報
- サイト内の人気コンテンツへの誘導
サンクスページは単なる確認画面ではなく、ユーザーエンゲージメントを高め、ビジネス目標達成に貢献する重要な要素です。
メールの件名設定
受信するメールの件名をカスタマイズしたい場合は、次のコードをformタグの中に追加するだけです。
<input type="hidden" name="subject" value="新しいお問い合わせがありました">スパム対策
Web3Formsには、簡単なスパム対策機能も備わっています。
<input type="checkbox" name="botcheck" style="display: none;">formタグの中に追加するだけで、スパムボットからの自動送信をある程度防ぐことができます。
JavaScriptを使った実装
基本的なフォームでも十分機能しますが、ページ遷移なしでフォームを送信したい場合や、送信成功・失敗時のメッセージをカスタマイズしたい場合は、JavaScriptを使うとより柔軟に実装できます。
ページ遷移なしでフォームを送信する方法
以下が、JavaScriptを使ったフォーム送信の基本的な実装例です。
<form id="form">
<input type="hidden" name="access_key" value="71ad5f04-aeae-4d22-b85a-6119b410c162">
<label for="name">お名前:</label>
<input type="text" name="name" id="name" required>
<label for="email">メールアドレス:</label>
<input type="email" name="email" id="email" required>
<label for="message">メッセージ:</label>
<textarea name="message" id="message" required></textarea>
<button type="submit">送信</button>
<div id="result"></div>
</form>
<script>
const form = document.getElementById('form');
const result = document.getElementById('result');
form.addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(form);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
result.innerHTML = "送信中...";
fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: json
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
result.innerHTML = "<div class='success'>お問い合わせありがとうございます！ 24時間以内に返信いたします。</div>";
result.classList.add('success');
} else {
result.innerHTML = "<div class='error'>エラーが発生しました: " + json.message + "</div>";
result.classList.add('error');
}
})
});
</script>基本的には、フォームの送信イベントを拾って、AjaxでWeb3FormsのAPIにデータを送る仕組みになっています。
この実装をすることでページ変移をすることなく、サンクスメッセージを出すことが可能です。
Web3Formsのアクセスキー管理について
公式ではアクセスキーは隠す必要が無いとの回答がでていますので、そのままでも問題ないかと思います。
以下のような方法でアクセスキーの管理もできますので、参考にしてみてください。
1. 設定ファイルを使用する方法
// config.js
const config = {
web3formsKey: "YOUR_ACCESS_KEY_HERE"
};設定ファイル（config.js）を作成し、JavaScriptでキーを読み込む：
<!-- HTMLファイル -->
<script src="config.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('input[name="access_key"]').value = config.web3formsKey;
});
</script>config.jsファイルを.gitignoreに追加してリポジトリに含めないようにします。
2. 環境変数ファイルを使用する方法
// .env.js (Gitで管理しない)
window.ENV = {
WEB3FORMS_KEY: "YOUR_ACCESS_KEY_HERE"
};<script src=".env.js"></script>
<script>
// フォーム送信時にキーを設定
const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
formData.append('access_key', window.ENV.WEB3FORMS_KEY);
fetch('https://api.web3forms.com/submit', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// 成功時の処理
});
});
</script>3. 静的サイトジェネレーターを使用している場合
Astroなどの静的サイトジェネレーターを使用している場合は、ビルド時に環境変数からキーを注入できます。
# .env (Gitで管理しない)
WEB3FORMS_KEY=your_access_keyビルド時に環境変数の値がHTMLに埋め込まれるため、環境変数ファイル自体は公開されません。
まとめ
Web3Formsは、静的サイトにフォーム機能を追加するための非常にシンプルかつ効果的なツールです。
この記事でご紹介した方法を使えば、HTMLの基本知識があるだけで、サーバーサイドのコードを書かずにフォーム機能を実装できます。
シンプルな設定で機能するため、開発時間を短縮でき、メンテナンスも簡単ですので、ぜひ実装してみてください。
関連記事
