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

php

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

PHPでお問い合わせフォームを作る方法を紹介します。名前・メールアドレス・お問い合わせ内容を入力し、送信されたデータをCSVファイルへ保存できるサンプルです。入力チェックやエラーメッセージ表示にも対応しているため、PHPフォーム作成の基本を学びたい場合にも利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

お問い合わせフォーム

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

<?php

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

// エラーメッセージ
$errors = [];

// 送信完了メッセージ
$success = '';

// 入力値保持
$name = '';
$email = '';
$message = '';

// フォーム送信時
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // 入力値取得
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $message = trim($_POST['message'] ?? '');

    // お名前チェック
    if ($name === '') {
        $errors[] = 'お名前を入力してください。';
    }

    // メールアドレスチェック
    if ($email === '') {
        $errors[] = 'メールアドレスを入力してください。';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'メールアドレスの形式が正しくありません。';
    }

    // お問い合わせ内容チェック
    if ($message === '') {
        $errors[] = 'お問い合わせ内容を入力してください。';
    }

    // エラーなし
    if (empty($errors)) {

        // CSVへ保存
        $fp = fopen($csv_file, 'a');

        if ($fp) {

            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);

        }

        $success = 'お問い合わせ内容を送信しました。';

        // フォーム初期化
        $name = '';
        $email = '';
        $message = '';

    }

}

?>

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

<style>

/* 全体 */
.php-contact-form_wrap{
    margin:0;
    padding:30px;
    font-family:sans-serif;
    background:#fff;
}

/* お問い合わせフォーム */
.php-contact-form_box{
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:24px;
    background:#fff;
}

/* フォームカード */
.php-contact-form_card{
    max-width:600px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f8fafc;
}

/* タイトル */
.php-contact-form_title{
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
}

/* 入力欄 */
.php-contact-form_field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

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

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

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

/* エラーメッセージ */
.php-contact-form_error{
    color:#dc2626;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

/* 成功メッセージ */
.php-contact-form_success{
    padding:14px;
    border-radius:12px;
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    color:#15803d;
    font-weight:700;
    margin-bottom:14px;
}

/* 送信ボタン */
.php-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-contact-form_wrap">

    <div class="php-contact-form_box">

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

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

            <?php if ($success !== ''): ?>
                <div class="php-contact-form_success">
                    <?= htmlspecialchars($success, ENT_QUOTES, 'UTF-8') ?>
                </div>
            <?php endif; ?>

            <?php foreach ($errors as $error): ?>
                <div class="php-contact-form_error">
                    <?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?>
                </div>
            <?php endforeach; ?>

            <!-- お問い合わせフォーム -->
            <form method="post">

                <!-- お名前入力欄 -->
                <div class="php-contact-form_field">
                    <label class="php-contact-form_label">お名前</label>
                    <input
                        class="php-contact-form_input"
                        type="text"
                        name="name"
                        value="<?= htmlspecialchars($name, ENT_QUOTES, 'UTF-8') ?>">
                </div>

                <!-- メールアドレス入力欄 -->
                <div class="php-contact-form_field">
                    <label class="php-contact-form_label">メールアドレス</label>
                    <input
                        class="php-contact-form_input"
                        type="email"
                        name="email"
                        value="<?= htmlspecialchars($email, ENT_QUOTES, 'UTF-8') ?>">
                </div>

                <!-- お問い合わせ内容入力欄 -->
                <div class="php-contact-form_field">
                    <label class="php-contact-form_label">お問い合わせ内容</label>
                    <textarea
                        class="php-contact-form_textarea"
                        name="message"><?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8') ?></textarea>
                </div>

                <!-- 送信ボタン -->
                <button class="php-contact-form_btn" type="submit">
                    送信する
                </button>

            </form>

        </div>

    </div>

</div>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ(同じ階層)へ配置してください。

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

サーバーへ設置する場合は、上記ファイルを同じフォルダ(同じ階層)へアップロードしてください。

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

data.csvが存在しない場合は、初回送信時に自動作成されます。あらかじめ作成する場合は、CSVタブの内容をdata.csvとして保存してください。

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


こちらもおすすめ


コメント