Malla文档
首页快速入门打开 Malla

带邮件通知的联系表单

构建联系表单，防止垃圾提交，查看提交记录，并为每条提交收到邮件。

用户指南
入门15 分钟

你将构建： 一个包含姓名、邮箱、主题、留言和同意字段的联系表单，会保存提交记录，并为每条提交给你发邮件

请先阅读： 编辑器导览构建落地页

在本教程中，你将在页面上添加一个联系表单，设置它的字段，设计访客提交后看到的内容，发布表单，并在 Forms 工作区中查看提交记录。然后为每条新留言开启邮件通知。你需要一个可编辑的站点，例如落地页教程中的那个。

带邮件通知的联系表单视频即将推出。下面的文字步骤已涵盖全部内容。
带邮件通知的联系表单· 7 分钟

添加表单

  1. 插入表单

    打开要放置表单的页面，选中表单所在的框架。在 Layers 标签页中点击 +，在 Forms 分组中选择 Form。表单自带三个字段和两个隐藏的框架。在 Layers 标签页中，它们是 Email（输入框）、Textarea（标签为 Message）、Submit（Send 按钮）、Success 和 Error。

  2. 为表单命名

    在检查器的 Form 分区中，把 Name 设为 Contact。Forms 工作区会以这个名称列出表单。保持 Action 为 Store submissions，Redirect 为 Stay on page。

设置字段

  1. 添加姓名字段

    选中表单，点击 + 并选择 Input。新字段会放在表单末尾，所以要在 Layers 标签页中把输入框拖到 Email 上方。在 Field 分区中，把 Name 设为 name，Label 设为 Name，并打开 Required。

  2. 检查邮箱字段

    选中 Email。它的 Type 为 Email，Required 已打开，所以浏览器会在提交前检查邮箱地址。Name 是提交记录保存时使用的键；请保持简短，并在表单内唯一。

  3. 添加主题下拉框

    选中表单，点击 + 并选择 Select，然后把它拖到 Textarea 上方。把 Name 设为 topic，Label 设为 Topic。在 Options 下，把两行改为 Sales 和 Support（每行一个标签和一个值），再点击 Add option 添加第三个选项 Other。

  4. 限制留言长度

    选中留言字段 Textarea。Required 已经打开。把 Max length 设为 2000，免得有人贴进来一整部小说。

  5. 添加同意复选框

    用同样的方法添加一个 Checkbox，并把它拖到 Submit 上方。把 Label 设为 I agree to be contacted about my message，并打开 Required。

  6. 检查按钮

    选中 Submit。在 Button 分区中，Type 为 Submit：正是它负责提交表单。如果不想用 Send 作为按钮文字，可以修改 Text。表单内的按钮总是提交表单，所以它的 Link 分区没有目标。

检查点

表单依次显示 Name、Email、Topic、Message、同意复选框和 Send 按钮。

设计成功和错误状态

  1. 显示成功状态

    选中表单，在 Form 分区中把 Show 设为 Success。画布会显示 Success 框架，而不是字段。编辑其中的文字，例如 Thanks, we will reply within one working day.，并让它的样式与页面其他部分保持一致。

  2. 显示错误状态

    把 Show 设为 Error，写一段提交失败时显示的信息，例如访客连续发送太多留言时。完成后把 Show 改回 Form。

发布并测试

  1. 发布到预发布环境

    点击工具栏中的 Publish，保持选中 Staging，然后点击 Publish to staging。表单只在已发布的站点上接收提交。

  2. 发送一条测试留言

    打开预发布链接并填写表单。按钮上方会出现 Cloudflare Turnstile 验证，通常会自动通过。点击 Send：字段会被你的成功信息取代。

查看提交记录

  1. 打开 Forms 工作区

    回到编辑器，点击侧边栏标签页下方的 Forms。把列表顶部的开关切换到 Staging：测试提交永远不会与 Production 中的真实提交混在一起。

  2. 打开一条提交记录

    选择 Contact。Submissions 标签页列出每条留言及其到达时间。点击一行即可查看所有字段以及提交来源页面。点击 Export CSV 可下载这些记录。

检查点

在 Staging 下，Contact 的 Submissions 标签页显示了你的测试留言。

每条留言都收到邮件

  1. 把自己加入通知

    打开 Contact 的 Settings 标签页。在 Notifications 下添加你的邮箱，然后点击 Save。只能添加站点或其工作区的成员。

  2. 选择要保留的内容

    在 Storage 下保持 Store submissions 打开。用 Keep for 让旧的提交记录在一段时间后自动删除。只有在你只想收邮件、不保存任何内容时，才关闭 Store submissions。

  3. 发布到生产环境

    通知邮件只针对生产环境的提交发送。点击 Publish，选择 Production，然后点击 Publish to production。这需要站点管理员权限。

完成

在生产站点上发送一条留言：它会出现在 Forms 工作区的 Production 下，你还会收到一封标题为“New submission: Contact”、带有站点名称的邮件。

你学到了什么

  • 表单包含字段；每个字段的 Name 是其值保存时使用的键，Required、Type 和长度会在提交前检查。
  • Show 控件让你在画布上设计成功和错误状态。
  • 提交记录按环境分开保存，生产环境的提交可以通过邮件通知站点成员。

继续学习后面的教程，或阅读本教程背后的指南：

表单表单元素、垃圾信息防护、按环境区分的提交记录和邮件通知。发布预发布和生产环境、即时发布，以及页面如何渲染和缓存。客户端工作流在浏览器中运行的可视化逻辑，响应点击、提交、页面加载和变量变化。团队与角色工作区成员、站点成员，以及所有者、管理员、编辑者和内容编辑者各自能做什么。