标签导航：

使用 emailjs 的联系表

本教程演示如何使用 React、Tailwind CSS 和 EmailJS 构建一个现代化的、响应式的联系表单，实现实时邮件发送功能。 完整代码及配置步骤，助您轻松创建专业的联系页面。

测试页面：https://www.php.cn/link/948ba1dc8cc4cc26e5d9d4f358660c2d

GitHub 仓库：https://www.php.cn/link/34f9679482b481012016f1f5c8b977f0

1. 项目设置与依赖安装

步骤一：克隆项目

从 GitHub 克隆项目到本地：

git clone https://www.php.cn/link/34f9679482b481012016f1f5c8b977f0
cd contact-form

步骤二：安装依赖

安装所有必要的 npm 包：

npm install

2. EmailJS 配置

步骤一：创建 EmailJS 帐户

  1. 访问 EmailJS 官网，注册一个免费帐户。
  2. 登录后，进入仪表盘。

步骤二：添加邮件服务

  1. 点击“邮件服务”>“添加邮件服务”。
  2. 选择您的邮件提供商（例如 Gmail、Outlook），并按照指引连接您的邮箱帐户。

步骤三：创建邮件模板

  1. 进入“邮件模板”，点击“创建新模板”。
  2. 使用占位符设计您的邮件模板（例如：{{name}}、{{email}}、{{message}}）。
  3. 保存模板，并记下您的模板 ID。

步骤四：获取 API 密钥

  1. 进入“集成”>“API 密钥”。
  2. 复制您的服务 ID、模板 ID 和用户 ID。

3. 环境变量配置

在项目根目录下创建一个名为 .env 的文件，并添加以下内容：

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id

请将 your_service_id、your_template_id 和 your_user_id 替换为您在 EmailJS 中获取的实际 ID。

图像说明：项目代码截图