在前一篇文章中，我們實現了前端的聯絡表單，並展示了如何使用表單來捕獲用戶的輸入資料。今天，我們將進一步深入，展示如何使用 EmailJS 將表單資料發送到後端，並將其通過電子郵件傳遞給負責人員。EmailJS 是一個可以無需後端服務器，即可從前端直接發送電子郵件的解決方案，非常適合小型應用或簡單的聯絡表單。

EmailJS 的簡介

EmailJS 允許開發者直接從應用的前端向特定電子郵件地址發送郵件，無需搭建自己的郵件伺服器。開發者可以使用 EmailJS 提供的 API，並通過預設的模板來處理表單提交後的郵件傳送工作。這樣的方案讓我們能夠快速地實現聯絡表單功能，並將表單內容以郵件的形式發送出去。

主要步驟：

1. EmailJS 帳號設置：建立並配置 EmailJS。
2. 環境變數配置：使用 .env 來保護敏感信息，如服務 ID、模板 ID 及公開密鑰。
3. 前端實現：在 React 應用中處理表單提交，並使用 EmailJS 發送郵件。

實際演練

Step 1: 安裝 EmailJS SDK

首先，通過 NPM 安裝 EmailJS SDK：

npm install --save @emailjs/browser

Step 2: 註冊 EmailJS 帳戶並創建郵件模板

1. 註冊帳戶：前往 EmailJS 官網 註冊帳號。如果你已經擁有帳戶，可以直接登入。
2. 獲取 Public Key：前往 Account Settings，在 API Keys 中找到並保存你的 Public Key。
3. 創建服務（Service）：
   • 進入 EmailJS 後台後，點擊 Email Services 頁面。
   • 點擊 Add New Service 按鈕，選擇你希望用來發送郵件的郵件服務（如 Gmail、Outlook、Yahoo等）。
   • 連接郵件服務後，你將獲得一個 Service ID。
4. 創建模板（Template）：
   • 前往 Email Templates 頁面，點擊 Create New Template 按鈕。
   • 在模板編輯器中設計你的郵件格式。可以使用如 {from_name}、{message} 等佔位符來動態填充郵件內容。可以參考以下的模板設置：
   • 完成模板設計後，保存模板並獲取 Template ID。

Step 3: 設置環境變數

接下來，在專案根目錄中，更新 .env 文件並定義 EmailJS 的環境變數。

EMAILJS_Public_Key=your_service_id
EMAILJS_SERVICE_ID=your_service_id
EMAILJS_TEMPLATE_ID=your_template_id

Step 3: 在表單提交中整合 EmailJS

您可以在 onSubmit 函數中添加 EmailJS 的郵件發送邏輯。這裡我們會將 emailjs.send 的邏輯整合到表單提交過程中。

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import * as styles from '@/components/Form/ContactForm.module.scss';
import emailjs from '@emailjs/browser';

const ContactForm = () => {
    // 使用 useForm hook 來管理表單
    const [isSending, setIsSending] = useState(false); // 用於追蹤是否正在發送郵件
    const { register, handleSubmit, formState: { errors } } = useForm();

    // 表單提交處理
    const onSubmit = (data) => {
        setIsSending(true); // 開始發送，設置 loading 狀態

        // EmailJS 發送邏輯
        const templateParams = {
            from_name: data.name,
            from_email: data.email,
            service: data.serviceItem,
            message: data.projectDetails,
        };

        emailjs
            .send(
                process.env.EMAILJS_SERVICE_ID,  // 使用環境變數中的 Service ID
                process.env.EMAILJS_TEMPLATE_ID,  // 使用環境變數中的 Template ID
                templateParams,
                process.env.EMAILJS_PUBLIC_KEY  // 使用環境變數中的 Public Key
            )
            .then(
                (response) => {
                    console.log('Email sent successfully!', response.status, response.text);
                    alert('Your message was sent successfully!');
                    setIsSending(false); // 發送完成，重置 loading 狀態
                },
                (error) => {
                    console.log('Failed to send email...', error);
                    alert('There was an error sending your message.');
                    setIsSending(false); // 發送失敗，重置 loading 狀態
                }
            );
    };

    return (
        <form className={styles.contactForm} onSubmit={handleSubmit(onSubmit)}>
            <div className={styles.formGroup}>
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    {...register('name', { required: 'Name is required' })}
                    placeholder="Your Name"
                />
                {errors.name && <p className={styles.errorText}>{errors.name.message}</p>}
            </div>
            <div className={styles.formGroup}>
                <label htmlFor="email">Email</label>
                <input
                    type="email"
                    {...register('email', {
                        required: 'Email is required',
                        pattern: {
                            value: /\S+@\S+\.\S+/,
                            message: 'Enter a valid email',
                        },
                    })}
                    placeholder="Your Email"
                />
                {errors.email && <p className={styles.errorText}>{errors.email.message}</p>}
            </div>
            <div className={styles.formGroup}>
                <label htmlFor="serviceItem">Service Items</label>
                <select
                    {...register('serviceItem', { required: 'Please select a service item' })}
                >
                    <option value="">Select a service</option>
                    <option value="design">Design</option>
                    <option value="development">Development</option>
                    <option value="consultation">Consultation</option>
                </select>
                {errors.serviceItem && <p className={styles.errorText}>{errors.serviceItem.message}</p>}
            </div>
            <div className={styles.formGroup}>
                <label htmlFor="projectDetails">Project Details</label>
                <textarea
                    {...register('projectDetails', { required: 'Project details are required' })}
                    placeholder="Describe your project"
                ></textarea>
                {errors.projectDetails && <p className={styles.errorText}>{errors.projectDetails.message}</p>}
            </div>
            <button type="submit" className={styles.submitButton}>
                {isSending ? 'Sending...' : 'Submit'}
                <img src={require(`@/assets/icons/Submit.svg`)} alt="Submit" className={styles.submitIcon} />
            </button>
        </form>
    );
};

export default ContactForm;

說明：

1. useState：我們使用了 isSending 狀態來追蹤郵件發送過程，並在按鈕上顯示發送中的狀態。
2. emailjs.send：將用戶的表單數據（name、email、serviceItem、projectDetails）打包為 templateParams，並透過 EmailJS 發送。
3. 環境變數：確保 EmailJS 的 Service ID、Template ID 和 Public Key 都被存放在 .env 文件中，避免暴露敏感信息。

Step 4: 測試與部署

完成 EmailJS 表單集成後，依照以下步驟進行本地測試，確保表單提交與郵件發送功能正常運作：

1. 運行本地應用並進入 "Let’s Collaborate" 聯絡表單頁面。填寫姓名、電子郵件、服務類別及項目詳情，然後點擊 Submit 按鈕提交表單。
2. 檢查瀏覽器控制台，確認是否顯示成功訊息 Email sent successfully! 或錯誤訊息 Failed to send email...。
3. 確認收件郵箱是否收到來自聯絡表單的郵件。如下圖所示，郵件應包含用戶提交的資料。如果啟用了自動回覆，確認用戶也收到回覆郵件。

結語

透過 EmailJS，我們可以輕鬆地實現從前端表單提交到郵件傳送的功能，並且無需後端支援。這種實作方式適合簡單應用或 MVP 階段的聯絡表單開發。在未來的文章中，我們將進一步探討如何優化表單體驗，例如進階的表單驗證、錯誤處理以及更多後端整合。

✨ 流光館Luma<∕> ✨ 期待與你繼續探索更多技術知識！