使用者登記表提交
描述:此專案涉及建立一個 Web 表單,用於收集使用者註冊資訊。使用者輸入資訊後,表單將收到的資訊傳送到指定的電子郵件地址進行處理。
目錄
特徵:
- 一個簡單且用戶友好的網頁表單介面,用於用戶資料輸入
- 用於收集使用者資訊的字段,例如姓名、電子郵件地址和聯絡資訊
- 表單驗證以確保輸入資訊的準確性和完整性
- 電子郵件功能,將收集到的資訊傳送到指定的電子郵件地址進行處理
- 模板設置,用於以清晰且有組織的方式格式化收集的信息
技術:
- 用於開發客戶端的 HTML、CSS 和 JavaScript
- 用於表單處理和電子郵件功能的伺服器端 PHP 程式語言
- 用於 PHP 依賴管理的 Composer 函式庫
- Open Server本機伺服器用於應用程式部署和測試
- 總體而言,該計畫提供了一種簡單有效的方法來收集用戶註冊資訊並簡化註冊流程。
我們很高興向您展示我們在 Github Pages 上託管的專案的演示版本。點擊該項目演示版本的連結來查看它。
要將表格傳送到電子郵件,您需要:
- 在您的電腦上安裝 Composer。
- 檢查您的 SMTP 提供者是否阻止電子郵件發送。
- 如果您使用 Windows,請檢查您的作業系統是否阻止 SMTP 傳送。
- 安裝 Open Server 或任何其他支援電子郵件傳送的本機伺服器。
- 克隆這個儲存庫。
- 請注意,在使用該表單之前,您需要使用 mail.php 檔案中的電子郵件設定對其進行配置。
如何設定電子郵件表單提交
先決條件
在開始之前,請確保您具備以下先決條件:
- 您的電腦上安裝了 Composer
- 支援發送電子郵件的本機伺服器(例如Open Server)
- 存取您的 SMTP 提供者以檢查電子郵件發送是否被阻止
- 存取您的作業系統以檢查 SMTP 發送是否被封鎖(僅限 Windows)
安裝
若要設定電子郵件表單提交,請依照下列步驟操作:
- 將此儲存庫複製到您的本機電腦。
- 如果您尚未安裝 Composer,請安裝它。
- 檢查您的 SMTP 提供者是否阻止發送電子郵件。
- 如果您使用的是 Windows,也請檢查您的作業系統是否阻止 SMTP 傳送。
- 安裝 Open Server 或任何其他支援傳送電子郵件的本機伺服器。
- 按以下方式設定
mail.php
檔案:- 找到“try {”區塊並尋找註解“// config.php”。
- 編輯值:為
$mail->Username
設定您的電子郵件地址(例如「 [email protected] 」),並為$mail->setFrom(EMAIL_FROM)
複製它。 - 在
$mail->addAddress(EMAIL_TO)
行中,將EMAIL_TO
參數替換為您想要接收表單提交的電子郵件地址(您可以使用自己的電子郵件進行測試)。 - 最後,將
SMTP_PASSWORD
替換為您在下一步中產生的密碼。
- 在您的 Google 帳戶中產生應用程式密碼:
- 前往您的「帳戶」(不是您的 Gmail 帳戶,而是您的 Google 帳戶)。
- 在搜尋欄中,輸入「應用程式密碼」。
- 選擇任何名稱來定位自己。
- 您將獲得一個密碼,您需要複製並貼上該密碼,而不是「您的密碼」括號中的
SMTP_PASSWORD
。 - 請注意,您將無法再次查看密碼,因此在使用此瀏覽器標籤之前請勿關閉它。
電子郵件表單提交的隱私和安全措施
設定電子郵件表單提交時,隱私權是關鍵方面。為確保敏感資訊的隱私,強烈建議您採取以下預防措施:
- 不要分享您的電子郵件發送密碼:避免透過電子郵件或任何其他通訊方式(例如聊天或訊息)分享您的電子郵件發送密碼。將密碼保存在只有您有權存取的安全位置。
- 不要在公共資源上發布設定檔:切勿在 GitHub 或其他託管服務等公共資源上發布設定檔(例如 mail.php)。相反,請使用 config.php 文件,您可以在其中建立變數來儲存配置資料。也建議將
config.php
檔案新增至.gitignore
以便在上傳到 GitHub 時將其從儲存庫中排除。
遵循這些預防措施將幫助您保護您的隱私並確保您的專案免受潛在威脅。設定電子郵件表單提交時,請務必遵守這些建議。
生成並包含自動加載文件
要完成專案設置,您需要在終端機中執行命令composer dumpautoload
,該命令會產生一個新檔案vendor/autoload.php
。該檔案包含所有類別及其位置的列表,並已包含在您的程式碼 ( mail.php
) 中,以便在使用類別時自動載入這些類別。
執行此命令可讓您將composer.json
檔案中列出的所有必要的類別新增至專案。
就是這樣!現在您已準備好開始透過電子郵件接收表單提交。
Frontend Mentor - 帶有註冊表單解決方案的介紹元件
這是針對前端導師上帶有註冊表單挑戰的介紹組件的解決方案。前端導師挑戰可幫助您透過建立現實的專案來提高程式設計技能。