使用 EmailJS 的聯絡表

這種現代聯絡表單採用 React、Tailwind CSS 和 EmailJS 構建，提供即時電子郵件功能。 提供的程式碼和說明將指導您為您的網站建立專業的聯絡表單。

現場示範：https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

原始碼：https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1。專案設定與安裝

第 1 步：複製儲存庫

使用 Git 從 GitHub 複製專案：

<code class="language-bash">git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form</code>

第 2 步：安裝依賴項

透過 npm 安裝所需的套件：

<code class="language-bash">npm install</code>

2。配置 EmailJS

第 1 步：建立帳戶

1. 註冊一個免費的EmailJS帳號。
2. 登入後造訪您的 EmailJS 儀表板。

第 2 步：新增電子郵件服務

1. 導覽至電子郵件服務並選擇新增電子郵件服務。
2. 選擇您的電子郵件提供者（Gmail、Outlook 等）並按照連線說明進行操作。

第 3 步：建立電子郵件範本

1. 前往電子郵件範本，然後按一下建立新範本。
2. 使用 {{name}}、{{email}} 和 {{message}} 等佔位符自訂您的電子郵件範本。
3. 儲存範本並記下範本 ID。

第4步：取得API金鑰

1. 前往整合> API 金鑰.
2. 複製服務 ID、範本 ID 和 使用者 ID。 這些對於下一步至關重要。

3。設定環境變數

在專案的根目錄中建立一個 .env 檔案並新增以下行，並將佔位符號替換為您的 EmailJS ID：

<code>VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id</code>

請記得將 your_service_id、your_template_id 和 your_user_id 替換為從 EmailJS 取得的實際值。 這樣就完成設定了。 請參閱 GitHub 儲存庫以取得更多程式碼詳細資訊。

以上是使用 EmailJS 的聯絡表的詳細內容。更多資訊請關注PHP中文網其他相關文章！