# WordPress Elementor RWD 聯絡表單與條件下載功能（WordPress後端版） ## 完整HTML代碼（直接粘貼到Elementor HTML小工具中） ```html ``` ## WordPress 後端配置 ### 1. 在主題的 functions.php 文件中添加以下代碼： ```php admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('contact_form_nonce') )); } add_action('wp_enqueue_scripts', 'enqueue_contact_form_scripts'); // 處理聯絡表單AJAX請求（登入用戶） add_action('wp_ajax_send_contact_email', 'handle_contact_form_submission'); // 處理聯絡表單AJAX請求（未登入用戶） add_action('wp_ajax_nopriv_send_contact_email', 'handle_contact_form_submission'); function handle_contact_form_submission() { // 驗證安全令牌 if (!wp_verify_nonce($_POST['nonce'], 'contact_form_nonce')) { wp_send_json_error('安全驗證失敗'); return; } // 清理和驗證輸入資料 $name = sanitize_text_field($_POST['name']); $phone = sanitize_text_field($_POST['phone']); $email = sanitize_email($_POST['email']); $timestamp = sanitize_text_field($_POST['timestamp']); $download_file = sanitize_text_field($_POST['download_file']); $user_agent = sanitize_text_field($_POST['user_agent']); $page_url = esc_url_raw($_POST['page_url']); // 基本驗證 if (empty($name) || empty($phone) || empty($email)) { wp_send_json_error('必填欄位不能為空'); return; } if (!is_email($email)) { wp_send_json_error('電子郵件格式不正確'); return; } if (!preg_match('/^09\d{8}$/', $phone)) { wp_send_json_error('手機號碼格式不正確'); return; } // 防止垃圾郵件 - 簡單的頻率限制 $user_ip = $_SERVER['REMOTE_ADDR']; $transient_key = 'contact_form_' . md5($user_ip); if (get_transient($transient_key)) { wp_send_json_error('提交太頻繁，請稍後再試'); return; } // 設置5分鐘的限制 set_transient($transient_key, time(), 5 * MINUTE_IN_SECONDS); // 準備郵件內容 $to = 'eddie.chen@ect.com.tw'; $subject = '新的資料下載申請 - ' . $name; // HTML格式的郵件內容 $message = ' '; // 設置郵件標頭 $headers = array( 'Content-Type: text/html; charset=UTF-8', 'From: 研丞科技網站 ', 'Reply-To: ' . $email ); // 發送郵件 $mail_sent = wp_mail($to, $subject, $message, $headers); if ($mail_sent) { // 可選：記錄到資料庫 $this->log_contact_submission($name, $phone, $email, $timestamp, $download_file, $user_ip, $page_url); wp_send_json_success('郵件發送成功'); } else { wp_send_json_error('郵件發送失敗，請稍後再試或聯繫管理員'); } } // 記錄聯絡表單提交到資料庫（可選） function log_contact_submission($name, $phone, $email, $timestamp, $download_file, $ip, $page_url) { global $wpdb; $table_name = $wpdb->prefix . 'contact_submissions'; // 創建表格（如果不存在） $charset_collate = $wpdb->get_charset_collate(); $sql = "CREATE TABLE IF NOT EXISTS $table_name ( id mediumint(9) NOT NULL AUTO_INCREMENT, name tinytext NOT NULL, phone varchar(20) NOT NULL, email varchar(100) NOT NULL, download_file varchar(255) DEFAULT '', ip_address varchar(45) DEFAULT '', page_url text DEFAULT '', submit_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) $charset_collate;"; require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); dbDelta($sql); // 插入資料 $wpdb->insert( $table_name, array( 'name' => $name, 'phone' => $phone, 'email' => $email, 'download_file' => $download_file, 'ip_address' => $ip, 'page_url' => $page_url, 'submit_time' => current_time('mysql') ), array('%s', '%s', '%s', '%s', '%s', '%s', '%s') ); } // 添加管理選單來查看提交記錄（可選） function add_contact_submissions_menu() { add_management_page( '聯絡表單記錄', '聯絡表單記錄', 'manage_options', 'contact-submissions', 'display_contact_submissions' ); } add_action('admin_menu', 'add_contact_submissions_menu'); function display_contact_submissions() { global $wpdb; $table_name = $wpdb->prefix . 'contact_submissions'; // 分頁處理 $per_page = 20; $current_page = isset($_GET['paged']) ? max(1, intval($_GET['paged'])) : 1; $offset = ($current_page - 1) * $per_page; $total_items = $wpdb->get_var("SELECT COUNT(*) FROM $table_name"); $total_pages = ceil($total_items / $per_page); $results = $wpdb->get_results($wpdb->prepare( "SELECT * FROM $table_name ORDER BY submit_time DESC LIMIT %d OFFSET %d", $per_page, $offset )); echo '

'; echo '

聯絡表單提交記錄

'; echo '

總共 ' . $total_items . ' 筆記錄

'; if ($results) { echo ''; echo ''; echo ''; foreach ($results as $row) { echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; } echo ''; echo '

提交時間	姓名	手機	電子郵件	下載檔案	IP地址
' . esc_html($row->submit_time) . '	' . esc_html($row->name) . '	' . esc_html($row->phone) . '	' . esc_html($row->email) . '	' . esc_html($row->download_file) . '	' . esc_html($row->ip_address) . '

'; // 分頁導航 if ($total_pages > 1) { echo '

'; echo paginate_links(array( 'base' => add_query_arg('paged', '%#%'), 'format' => '', 'prev_text' => '«', 'next_text' => '»', 'current' => $current_page, 'total' => $total_pages )); echo '

'; } } else { echo '

尚無提交記錄

'; } echo '

'; } // 確保WordPress郵件功能正常運作 function configure_wp_mail() { // 如果需要使用SMTP，可以在這裡配置 // 或者安裝像 WP Mail SMTP 這樣的插件 } add_action('init', 'configure_wp_mail'); ?> ``` ## 使用說明 ### 1. 安裝步驟： #### A. 在Elementor中部署前端代碼： 1. 進入WordPress後台，編輯目標頁面 2. 點擊"使用Elementor編輯" 3. 從左側小工具面板搜索"HTML"小工具 4. 將HTML小工具拖拽到適當位置 5. 將完整的HTML代碼複製並粘貼到HTML代碼框中 6. 點擊"更新"保存變更 #### B. 配置WordPress後端： 1. 進入WordPress後台的「外觀」→「佈景主題編輯器」 2. 選擇當前使用的主題 3. 找到並編輯 `functions.php` 檔案 4. 將提供的PHP代碼完整複製並粘貼到檔案末尾 5. 點擊「更新檔案」保存 ### 2. 功能特點： **郵件發送系統**： - 使用WordPress內建的`wp_mail()`函數 - 自動發送HTML格式郵件到：`eddie.chen@ect.com.tw` - 包含完整的用戶資料和技術資訊 - 具備防垃圾郵件機制（5分鐘內限制重複提交） **安全性保護**： - CSRF保護（使用WordPress nonce） - 輸入資料清理和驗證 - IP地址記錄和頻率限制 - SQL注入防護 **資料管理**： - 可選的資料庫記錄功能 - 後台管理介面查看提交記錄 - 分頁顯示和搜索功能 **檔案下載**： - 直接下載指定PDF檔案：`https://ect.com.tw/wp-content/uploads/2025/08/CIS-2B.pdf` - 自動重命名為：`研丞科技-CIS-2B.pdf` - 支援Google Analytics和Facebook Pixel追蹤 ### 3. 郵件服務優化建議： 如果WordPress預設郵件服務不穩定，建議： 1. 安裝「WP Mail SMTP」插件 2. 配置SMTP服務（如Gmail、Outlook等） 3. 或使用專業郵件服務（如SendGrid、Mailgun） ### 4. 故障排除： **如果郵件未收到**： 1. 檢查WordPress郵件功能是否正常 2. 查看垃圾郵件資料夾 3. 確認`eddie.chen@ect.com.tw`郵箱存在且可收信 4. 檢查主機商是否限制郵件發送 **如果表單無法提交**： 1. 確認functions.php代碼已正確添加 2. 檢查瀏覽器控制台是否有JavaScript錯誤 3. 確認WordPress AJAX功能正常 這個完整解決方案使用WordPress原生功能，無需第三方服務，提供穩定可靠的郵件發送和資料管理功能。