如何在Strapi中实现用户提交React表单后发送邮件回复

一、前端（React）表单提交逻辑 #

先在React项目里写表单组件，收集用户输入后，把数据提交到Strapi的接口。示例代码如下：

import axios from 'axios';
import { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 替换成你的Strapi服务地址
      await axios.post('http://localhost:1337/api/submissions', {
        data: formData
      });
      alert('表单提交成功，确认邮件已发送！');
      // 重置表单
      setFormData({ name: '', email: '', message: '' });
    } catch (err) {
      console.error('提交失败:', err);
      alert('提交出错，请稍后重试');
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '300px' }}>
      <input
        type="text"
        placeholder="姓名"
        name="name"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        required
      />
      <input
        type="email"
        placeholder="邮箱"
        name="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        required
      />
      <textarea
        placeholder="留言内容"
        name="message"
        value={formData.message}
        onChange={(e) => setFormData({...formData, message: e.target.value})}
        rows="4"
        required
      />
      <button type="submit">提交表单</button>
    </form>
  );
};

export default ContactForm;

二、Strapi端配置与实现 #

1. 创建表单提交内容类型 #

在Strapi后台操作：

• 进入内容类型生成器，点击创建新的内容类型
• 命名为Submission，添加以下字段：
  • name：文本类型（必填）
  • email：邮箱类型（必填）
  • message：文本区类型（必填）
• 保存并发布这个内容类型

2. 配置邮件插件 #

Strapi自带邮件插件，先在config/plugins.js里配置邮件服务（以SMTP为例，也可以用SendGrid、Gmail等）：

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST', 'smtp.example.com'),
        port: env('SMTP_PORT', 587),
        auth: {
          user: env('SMTP_USERNAME'),
          pass: env('SMTP_PASSWORD'),
        },
      },
      settings: {
        defaultFrom: 'your-service-email@example.com',
        defaultReplyTo: 'your-service-email@example.com',
      },
    },
  },
});

然后在项目根目录的.env文件里填写SMTP参数：

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USERNAME=your-email@gmail.com
SMTP_PASSWORD=your-app-specific-password

3. 添加自动发邮件逻辑 #

推荐用生命周期钩子，当新的表单提交数据被创建后自动触发邮件发送：
在src/api/submission/content-types/submission/lifecycles.js文件中添加代码：

module.exports = {
  async afterCreate(event) {
    const { result } = event;
    const { strapi } = require('@strapi/strapi');

    try {
      await strapi.plugins['email'].services.email.send({
        to: result.email,
        subject: '表单提交确认',
        text: `您好${result.name}，感谢您提交表单！我们已经收到您的信息，会尽快与您取得联系。`,
        html: `<div style="padding: 20px; border-radius: 8px; background: #f5f5f5;">
                <h3>您好${result.name}，</h3>
                <p>感谢您提交表单！我们已经收到您的信息，会尽快与您取得联系。</p>
                <p>您提交的留言内容：${result.message}</p>
              </div>`
      });
      console.log('确认邮件已发送至:', result.email);
    } catch (err) {
      console.error('发送邮件失败:', err);
    }
  },
};

4. 配置公共权限 #

在Strapi后台的设置→角色与权限→公共里，找到Submission内容类型，开启创建权限，这样前端可以匿名提交表单。

三、测试验证 #

1. 启动Strapi服务：npm run develop
2. 启动React前端项目，填写表单并提交
3. 检查Strapi后台的Submissions列表，确认数据已保存
4. 查看用户填写的邮箱，确认收到确认邮件

内容的提问来源于stack exchange，提问作者Lakshya Varshney