WordPressでお問い合わせフォームを作ると、送信時にページがリロードされることがあります。
しかし、Ajaxを使えばページ遷移なしでフォーム送信が可能になり、UXを改善できます。
今回は、WordPressでAjax通信を利用したフォーム送信を実装する基本的な方法を解説します。
完成イメージ
- フォーム送信時にページ遷移しない
- バリデーションエラーをその場で表示
- 成功時にメッセージ表示
- 管理画面に依存しない独自実装
フォームHTMLを作成
まずはフォームを作成します。
<form id="contact-form">
<div>
<label>名前</label>
<input type="text" name="username">
</div>
<div>
<label>メールアドレス</label>
<input type="email" name="email">
</div>
<div>
<label>お問い合わせ内容</label>
<textarea name="message"></textarea>
</div>
<button type="submit">送信</button>
</form>
<p id="result-message"></p>
JavaScriptでAjax送信
次にJavaScriptを実装します。
const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
const data = await response.json();
document.getElementById('result-message').textContent = data.message;
} catch (error) {
console.error(error);
}
});
actionパラメータを追加する
WordPressのAjaxでは action が必須です。
formData.append('action', 'contact_form');
最終的には以下のようになります。
const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
formData.append('action', 'contact_form');
try {
const response = await fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
const data = await response.json();
document.getElementById('result-message').textContent = data.message;
} catch (error) {
console.error(error);
}
});
functions.phpでAjax処理を書く
WordPress側でAjaxリクエストを受け取ります。
function contact_form_ajax() {
$username = $_POST['username'] ?? '';
$email = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';
if (empty($username)) {
wp_send_json([
'status' => 'error',
'message' => '名前を入力してください'
]);
}
if (empty($email)) {
wp_send_json([
'status' => 'error',
'message' => 'メールアドレスを入力してください'
]);
}
wp_send_json([
'status' => 'success',
'message' => '送信が完了しました'
]);
}
add_action('wp_ajax_contact_form', 'contact_form_ajax');
add_action('wp_ajax_nopriv_contact_form', 'contact_form_ajax');
セキュリティ対策も重要
Ajax実装時は以下も必須です。
sanitizeする
$username = sanitize_text_field($_POST['username']);
$email = sanitize_email($_POST['email']);
nonceチェック
check_ajax_referer('contact_nonce', 'nonce');
JavaScript側：
formData.append('nonce', contactData.nonce);
よくあるハマりポイント
admin-ajax.php が404になる
パーマリンク設定更新で解決する場合があります。
JSON.parse エラー
PHPのwarningやnoticeが混ざっている可能性があります。
ini_set('display_errors', 0);
ただし本番環境では適切なログ管理を行いましょう。
REST APIとの違い
最近は admin-ajax.php よりもREST APIを利用するケースも増えています。
| 比較 | admin-ajax | REST API |
|---|
| 学習コスト | 低い | やや高い |
| WordPressらしさ | 高い | API寄り |
| パフォーマンス | やや重い | 比較的軽い |
| 将来性 | 普通 | 高い |
小規模フォームなら admin-ajax.php でも十分実用的です。
まとめ
WordPressのAjax化を行うことで、フォームのUXを大きく改善できます。
今回のポイント：
admin-ajax.php を利用するaction を必ず送るwp_ajax_ / wp_ajax_nopriv_ を設定- sanitize と nonce を忘れない
- エラー処理を丁寧に行う
特に独自テーマ開発では、Ajax実装はかなり頻繁に使うので、早めに慣れておくと開発効率が上がります。
