這裡為您設計一套單一檔案（Single File）架構的 PHP 志工意願調查表。為了方便測試與部署，網頁表單與後端資料處理邏輯都整合在同一個 volunteer_survey.php 檔案中，並附帶基礎的 CSS 樣式讓介面美觀易讀。
volunteer_survey.php<?php
// 初始化提示訊息與狀態
$message = "";
$status_class = "";
// 檢查是否有 POST 請求提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 接收並清理表單輸入資料，防止基本 XSS 攻擊
$name = htmlspecialchars(trim($_POST['name'] ?? ''));
$phone = htmlspecialchars(trim($_POST['phone'] ?? ''));
$email = htmlspecialchars(trim($_POST['email'] ?? ''));
$time_slots = $_POST['time_slots'] ?? [];
$interests = $_POST['interests'] ?? [];
$note = htmlspecialchars(trim($_POST['note'] ?? ''));
// 後端基本欄位驗證
if (empty($name) || empty($phone) || empty($email)) {
$message = "❌ 請填寫所有必填欄位（姓名、電話、Email）！";
$status_class = "error";
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$message = "❌ Email 格式不正確！";
$status_class = "error";
} elseif (empty($time_slots)) {
$message = "❌ 請至少選擇一個可以服務的時段！";
$status_class = "error";
} else {
// --- 這裡可以加入資料庫儲存邏輯 (例如 MySQL) 或 寄送 Email 傳達通知 ---
// 範例：將資料組合成文字格式
$time_slots_str = implode(", ", $time_slots);
$interests_str = !empty($interests) ? implode(", ", $interests) : "未勾選";
/*
// MySQL 儲存範例參考：
$conn = new mysqli("localhost", "username", "password", "database");
$stmt = $conn->prepare("INSERT INTO volunteers (name, phone, email, time_slots, interests, note) VALUES (?, ?, ?, ?, ?, ?)");
$stmt->bind_param("ssssss", $name, $phone, $email, $time_slots_str, $interests_str, $note);
$stmt->execute();
*/
// 成功提示
$message = "🎉 感謝您的填寫！我們已收到您的志工參與意願，將盡快與您聯繫。";
$status_class = "success";
// 成功後可清除表單變數，避免重複顯示
$_POST = array();
}
}
?>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>志工意願調查表</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans GB", "Microsoft JhengHei", sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 30px auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
}
p.intro {
text-align: center;
color: #7f8c8d;
font-size: 14px;
margin-bottom: 30px;
}
.alert {
padding: 12px;
border-radius: 4px;
margin-bottom: 20px;
font-weight: bold;
font-size: 15px;
}
.alert.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #34495e;
}
.form-group label .required {
color: #e74c3c;
margin-left: 4px;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.form-control:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52,152,219,0.3);
}
.checkbox-group, .radio-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.checkbox-label {
display: flex;
align-items: center;
font-weight: normal !important;
cursor: pointer;
}
.checkbox-label input {
margin-right: 6px;
transform: scale(1.1);
}
.btn-submit {
display: block;
width: 100%;
padding: 12px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
.btn-submit:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div class="container">
<h2>志工意願調查表</h2>
<p class="intro">感謝您撥冗填寫此表單，請提供您的基本資料與可服務時間，我們將會盡快與您媒合。</p>
<!-- 顯示處理訊息 -->
<?php if (!empty($message)): ?>
<div class="alert <?php echo $status_class; ?>">
<?php echo $message; ?>
</div>
<?php endif; ?>
<!-- 表單開始 -->
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<!-- 姓名 -->
<div class="form-group">
<label for="name">姓名<span class="required">*</span></label>
<input type="text" id="name" name="name" class="form-control" required placeholder="請輸入完整姓名" value="<?php echo $_POST['name'] ?? ''; ?>">
</div>
<!-- 聯絡電話 -->
<div class="form-group">
<label for="phone">聯絡電話<span class="required">*</span></label>
<input type="tel" id="phone" name="phone" class="form-control" required placeholder="例如：0912345678" value="<?php echo $_POST['phone'] ?? ''; ?>">
</div>
<!-- 電子郵件 -->
<div class="form-group">
<label for="email">電子郵件 (Email)<span class="required">*</span></label>
<input type="email" id="email" name="email" class="form-control" required placeholder="[email protected]" value="<?php echo $_POST['email'] ?? ''; ?>">
</div>
<!-- 可服務時段 -->
<div class="form-group">
<label>可服務時段 (複選)<span class="required">*</span></label>
<div class="checkbox-group">
<?php
$slots = ["平日上午", "平日下午", "平日晚上", "假日上午", "假日下午", "假日晚上"];
$selected_slots = $_POST['time_slots'] ?? [];
foreach ($slots as $slot) {
$checked = in_array($slot, $selected_slots) ? "checked" : "";
echo "<label class='checkbox-label'><input type='checkbox' name='time_slots[]' value='{$slot}' {$checked}> {$slot}</label>";
}
?>
</div>
</div>
<!-- 有興趣的服務領域 -->
<div class="form-group">
<label>有興趣的服務領域 (複選)</label>
<div class="checkbox-group">
<?php
$fields = ["行政後勤", "活動策劃", "現場引導", "弱勢關懷", "環境保護", "資訊技術"];
$selected_fields = $_POST['interests'] ?? [];
foreach ($fields as $field) {
$checked = in_array($field, $selected_fields) ? "checked" : "";
echo "<label class='checkbox-label'><input type='checkbox' name='interests[]' value='{$field}' {$checked}> {$field}</label>";
}
?>
</div>
</div>
<!-- 備註/特殊專長 -->
<div class="form-group">
<label for="note">備註 / 特殊專長說明</label>
<textarea id="note" name="note" class="form-control" rows="4" placeholder="若您有其他特殊專長（如攝影、語文、手語等）或注意事項，請在此說明..."><?php echo $_POST['note'] ?? ''; ?></textarea>
</div>
<!-- 提交按鈕 -->
<button type="submit" class="btn-submit">送出意願調查表</button>
</form>
</div>
</body>
</html>
htmlspecialchars() 過濾使用者輸入，並用 filter_var() 驗證 Email 格式，防止簡單的惡意 XSS 注入。$_POST['name'] ?? ''），能讓使用者在點擊送出失敗後，自動保留原本已經填好的內容，不需全部重填。time_slots[]），當表單提交後，PHP 能以陣列形式接手處理。max-width: 600px 與 viewport 標籤，讓這張問卷在手機、平板及電腦上都能完美適應排版。如果您需要將這些填寫後的資料串接到 MySQL 資料庫儲存，或是想要在填寫後自動寄送 Email 通知信給管理者，請告訴我，我可以為您提供進一步的擴充程式碼！
為了滿足您的需求，我們需要將架構拆分為兩個部分：前台公開網頁（顯示不具隱私的名單）與後台管理系統（需登入才能查看包含電話、Email 等個資的完整資料）。
這裡為您設計實作方案。為了安全儲存資料，我們將改用 SQLite 資料庫。SQLite 是 PHP 內建支援的輕量資料庫，不需安裝 MySQL，會自動在同一個資料夾產生一個檔案，非常適合快速部署與測試。
請在同一個資料夾下建立以下三個檔案：
index.php：前台（問卷填寫 + 公開名單顯示）admin.php：後台（管理者登入 + 觀看含個資的完整名單）db.php：資料庫初始化與連線設定（共用元件）