WordPress表單提交，不使用插件的實現(xiàn)方法

來自：素雅營銷研究院

方知筆記

2025年05月03日 03:02

在WordPress網(wǎng)站中創(chuàng)建表單是常見的需求，但許多開發(fā)者習(xí)慣依賴插件來實現(xiàn)。本文將介紹如何在不使用任何插件的情況下，通過純代碼方式在WordPress中實現(xiàn)表單提交功能。

為什么選擇不使用插件？

提升網(wǎng)站性能：減少插件數(shù)量可以降低服務(wù)器負(fù)載
更高的安全性：避免使用可能存在漏洞的第三方插件
完全控制：自定義表單行為和樣式不受插件限制
長期維護性：不依賴插件更新，代碼完全掌握在自己手中

基本實現(xiàn)步驟

1. 創(chuàng)建HTML表單

在主題文件中（如page.php或自定義模板）添加表單HTML代碼：

<form id="my-custom-form" method="post">
<input type="text" name="user_name" placeholder="您的姓名" required>
<input type="email" name="user_email" placeholder="電子郵箱" required>
<textarea name="user_message" placeholder="留言內(nèi)容" required></textarea>
<input type="submit" value="提交">
</form>

2. 處理表單提交

在functions.php文件中添加處理邏輯：

function handle_custom_form_submission() {
if (isset($_POST['user_name']) && isset($_POST['user_email'])) {
// 驗證非空和安全檢查
$name = sanitize_text_field($_POST['user_name']);
$email = sanitize_email($_POST['user_email']);
$message = sanitize_textarea_field($_POST['user_message']);

// 處理數(shù)據(jù)（如保存到數(shù)據(jù)庫或發(fā)送郵件）
$to = get_option('admin_email');
$subject = '新的表單提交：' . $name;
$body = "姓名: $name\n郵箱: $email\n留言: $message";

wp_mail($to, $subject, $body);

// 添加成功消息
add_action('wp_footer', function() {
echo '<div class="form-success">感謝您的提交！</div>';
});
}
}
add_action('init', 'handle_custom_form_submission');

3. 添加安全防護

// 在表單中添加nonce字段
wp_nonce_field('custom_form_action', 'custom_form_nonce');

// 在處理函數(shù)中驗證nonce
if (!isset($_POST['custom_form_nonce']) ||
!wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_action')) {
die('安全驗證失敗');
}

高級功能實現(xiàn)

1. 數(shù)據(jù)存儲到自定義表

global $wpdb;
$table_name = $wpdb->prefix . 'custom_form_submissions';

$wpdb->insert($table_name, array(
'name' => $name,
'email' => $email,
'message' => $message,
'submission_date' => current_time('mysql')
));

2. 表單驗證

// 前端驗證
document.getElementById('my-custom-form').addEventListener('submit', function(e) {
let valid = true;
// 驗證邏輯...
if (!valid) e.preventDefault();
});

3. AJAX提交

// 注冊AJAX處理
add_action('wp_ajax_custom_form_submit', 'handle_ajax_form_submission');
add_action('wp_ajax_nopriv_custom_form_submit', 'handle_ajax_form_submission');

function handle_ajax_form_submission() {
// 處理邏輯...
wp_send_json_success(array('message' => '提交成功'));
}