WordPressでお問い合わせフォームをAjax化する方法【初心者向け】

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.php でも十分実用的です。

まとめ

WordPressのAjax化を行うことで、フォームのUXを大きく改善できます。

今回のポイント：

• admin-ajax.php を利用する
• action を必ず送る
• wp_ajax_ / wp_ajax_nopriv_ を設定
• sanitize と nonce を忘れない
• エラー処理を丁寧に行う

特に独自テーマ開発では、Ajax実装はかなり頻繁に使うので、早めに慣れておくと開発効率が上がります。