使用 EmailJS 的联系表

这种现代联系表单采用 React、Tailwind CSS 和 EmailJS 构建，提供实时电子邮件功能。 提供的代码和说明将指导您为您的网站创建专业的联系表格。

现场演示：https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

源代码：https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1。项目设置和安装

第 1 步：克隆存储库

使用 Git 从 GitHub 克隆项目：

git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form

第 2 步：安装依赖项

通过 npm 安装所需的包：

npm install

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中文网其他相关文章！