PHPでAjaxお問い合わせフォームを作る方法【サンプルコード付き】

php

PHPでAjaxお問い合わせフォームを作る方法

PHPとAjaxを使ったお問い合わせフォームの作り方を紹介します。ページを再読み込みせずに非同期通信でデータを送信し、入力内容をCSVへ保存できるサンプルコードです。快適な操作性のお問い合わせフォームを作成したい場合や、Ajaxを利用したフォーム送信の仕組みを学びたい場合に活用できます。

関連記事：
PHPでお問い合わせフォームを作る方法【サンプルコード付き】
PHPでメール送信フォームを作る方法【サンプルコード付き】
PHPで確認画面付きお問い合わせフォームを作る方法【サンプルコード付き】
PHPでサンクスページ付きお問い合わせフォームを作る方法【サンプルコード付き】
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Ajaxお問い合わせフォーム
ページを再読み込みせずに送信が完了しました。（デモ）

コードをコピーして使おう！

<?php

// CSVファイル
$csv_file = __DIR__ . '/data.csv';

// フォーム送信時のみAjax処理を実行
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    header('Content-Type: application/json; charset=UTF-8');

    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if ($name === '') {
        echo json_encode(['success' => false, 'message' => 'お名前を入力してください。']);
        exit;
    }

    if ($email === '') {
        echo json_encode(['success' => false, 'message' => 'メールアドレスを入力してください。']);
        exit;
    }

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo json_encode(['success' => false, 'message' => 'メールアドレスの形式が正しくありません。']);
        exit;
    }

    if ($message === '') {
        echo json_encode(['success' => false, 'message' => 'お問い合わせ内容を入力してください。']);
        exit;
    }

    $fp = fopen($csv_file, 'a');

    if (!$fp) {
        echo json_encode(['success' => false, 'message' => 'CSVファイルに書き込めません。']);
        exit;
    }

    if (filesize($csv_file) === 0) {
        fputcsv($fp, ['date', 'name', 'email', 'message']);
    }

    fputcsv($fp, [
        date('Y-m-d H:i:s'),
        $name,
        $email,
        $message
    ]);

    fclose($fp);

    echo json_encode([
        'success' => true,
        'message' => 'ページを再読み込みせずに送信が完了しました。'
    ]);
    exit;
}

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ajaxお問い合わせフォーム</title>

<style>
.php-ajax-contact-form_wrap{
    margin:0;
    padding:30px;
    font-family:sans-serif;
    background:#fff;
}

.php-ajax-contact-form_card{
    max-width:600px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f8fafc;
}

.php-ajax-contact-form_title{
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
}

.php-ajax-contact-form_field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

.php-ajax-contact-form_label{
    font-weight:700;
}

.php-ajax-contact-form_input,
.php-ajax-contact-form_textarea{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font:inherit;
}

.php-ajax-contact-form_textarea{
    min-height:130px;
    resize:vertical;
}

.php-ajax-contact-form_result{
    display:none;
    padding:14px;
    border-radius:12px;
    font-weight:700;
    margin-bottom:14px;
}

.php-ajax-contact-form_result.success{
    display:block;
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    color:#15803d;
}

.php-ajax-contact-form_result.error{
    display:block;
    color:#dc2626;
    background:#fff;
}

.php-ajax-contact-form_btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#0b6bff;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
</style>
</head>
<body>

<div class="php-ajax-contact-form_wrap">

    <div class="php-ajax-contact-form_card">

        <div class="php-ajax-contact-form_title">
            Ajaxお問い合わせフォーム
        </div>

        <div id="result" class="php-ajax-contact-form_result"></div>

        <form id="ajaxForm">

            <div class="php-ajax-contact-form_field">
                <label class="php-ajax-contact-form_label">お名前</label>
                <input class="php-ajax-contact-form_input" type="text" name="name">
            </div>

            <div class="php-ajax-contact-form_field">
                <label class="php-ajax-contact-form_label">メールアドレス</label>
                <input class="php-ajax-contact-form_input" type="email" name="email">
            </div>

            <div class="php-ajax-contact-form_field">
                <label class="php-ajax-contact-form_label">お問い合わせ内容</label>
                <textarea class="php-ajax-contact-form_textarea" name="message"></textarea>
            </div>

            <button class="php-ajax-contact-form_btn" type="submit">
                Ajaxで送信する
            </button>

        </form>

    </div>

</div>

<script>
document.getElementById('ajaxForm').addEventListener('submit', async function(e){

    e.preventDefault();

    const form = e.target;
    const result = document.getElementById('result');
    const formData = new FormData(form);

    result.className = 'php-ajax-contact-form_result';
    result.textContent = '';

    const response = await fetch('', {
        method: 'POST',
        body: formData
    });

    const data = await response.json();

    result.textContent = data.message;

    if (data.success) {
        result.classList.add('success');
        form.reset();
    } else {
        result.classList.add('error');
    }

});
</script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、PHPファイルとCSVファイルを使用します。PHPファイルでAjax送信を受け取り、送信されたお問い合わせ内容をCSVファイルへ保存します。 

sample/
├─ index.php
└─ data.csv

上記のファイルを同じフォルダ（同じ階層）へ配置してください。

index.phpがお問い合わせフォーム本体です。data.csvには送信されたお問い合わせ内容を保存します。

PHPはサーバー上で実行されるため、PHPファイルをダブルクリックしても動作しません。動作確認はレンタルサーバーまたはPHPが利用できるローカル環境で行ってください。

コメント