Wix Velo：无需SendGrid，自定义元素表单提交触发邮件如何实现？

云上老周

2026-6-13

问题

在Wix中使用自定义表单元素，点击「提交」按钮后无法触发邮件通知。不想用SendGrid或Wix内置文本输入元素，希望保留自定义元素的样式和逻辑控制权。已知可以将数据存入集合后通过监听集合变化发邮件，但找不到相关示例，也不清楚如何直接用Wix邮件模板ID触发邮件。

自定义元素代码：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        form {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
        input {
          padding: 8px;
          font-size: 14px;
          margin-bottom: 8px;
          width: 100%;
          box-sizing: border-box;
        }
        button {
          padding: 8px;
          font-size: 14px;
          cursor: pointer;
        }
      </style>
      <form id="simple-form">
        <input type="text" id="text-input" placeholder="Enter text" required />
        <button type="submit">Submit</button>
      </form>
    `;

    this.shadowRoot
      .querySelector('#simple-form')
      .addEventListener('submit', (e) => {
        e.preventDefault();
        const value = this.shadowRoot.querySelector('#text-input').value;
        // 补充bubbles和composed参数，确保事件能穿透shadow DOM被页面脚本捕获
        this.dispatchEvent(
          new CustomEvent('formSubmitted', { detail: { value }, bubbles: true, composed: true })
        );
        alert('Form submitted successfully!');
      });
  }
}

customElements.define('my-custom-element', MyCustomElement);

首页原有脚本：

$w.onReady(() => {
  const ce = $w('#myCustomElement');
});

解决方案

第一步：监听自定义元素的提交事件

先在首页脚本里监听自定义元素抛出的formSubmitted事件，才能获取用户输入的数据：

import { sendFormSubmissionEmail } from 'backend/email.jsw'; // 方案一会用到
import wixData from 'wix-data'; // 方案二用到

$w.onReady(() => {
  const customForm = $w('#myCustomElement');
  
  // 监听自定义表单的提交事件
  customForm.addEventListener('formSubmitted', async (event) => {
    const userInput = event.detail.value;
    
    // 选择以下两种方案之一执行
    // 方案一：直接调用后端接口发邮件
    await sendFormSubmissionEmail(userInput);
    
    // 方案二：存入集合触发自动邮件
    // await wixData.insert('FormSubmissions', { userInput: userInput });
  });
});

方案一：直接用Wix邮件模板发送（无需集合）

1. 后台创建邮件模板

进入Wix后台「客户管理」→「邮件」→「模板」，新建一个邮件模板（比如「表单提交通知」），模板内可以用{{userInput}}作为占位符。创建完成后，复制模板ID（模板详情页URL末尾的字符串）。

2. 编写后端邮件函数

在Wix编辑器点击「代码」→「后端」→「新建文件」，命名为email.jsw，写入：

import { sendEmail } from 'wix-email-backend';

export async function sendFormSubmissionEmail(userInput) {
  try {
    const emailTemplateId = '你的邮件模板ID'; // 替换为实际模板ID
    const senderEmail = '站点绑定的发送邮箱'; // 比如你的Wix站点关联邮箱
    const recipientEmail = '接收通知的邮箱'; // 你要收到通知的邮箱
    
    await sendEmail({
      templateId: emailTemplateId,
      from: senderEmail,
      to: recipientEmail,
      substitutions: {
        'userInput': userInput // 对应模板里的{{userInput}}占位符
      }
    });
    console.log('邮件发送成功');
  } catch (error) {
    console.error('邮件发送失败:', error);
  }
}

用户提交表单时，会直接调用该函数发送邮件。

方案二：通过集合触发器发送邮件

1. 创建数据集合

进入Wix后台「数据库」→「新建集合」，命名为FormSubmissions，添加一个文本类型字段userInput（存储用户输入内容）。

2. 设置集合触发器

在集合的「触发器」选项卡，点击「添加触发器」→「当创建项目时」→「发送邮件」。选择之前创建的邮件模板，将模板占位符与集合的userInput字段关联，设置接收邮箱后保存。

3. 前端插入数据

取消首页脚本中方案二代码的注释，用户提交时数据会插入集合，触发器自动触发邮件发送。

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