Elementor 的可视化表单构建器是一款功能强大的工具,可帮助你在几分钟内创建完整且美观的在线表单,无需任何编码。
本文展示一个简单的订阅表单,具备以下三个功能:
访客可以输入信息订阅邮件列表
用户信息将同步到 MailChimp 等第三方邮件系统
成功提交后跳转到领取赠品页面,如电子书、工作表或白皮书
拖放表单小工具
首先,将「Form 表单」小工具拖动到页面中。该小工具默认生成一个基础表单,包括姓名、邮箱、留言,以及提交按钮。
内容 > 表单字段
在「Form 表单」面板中,「Form Fields」部分可以设置表单名称,例如“订阅表单”。
默认会生成三个字段:Full Name、Email 和 Message。
此表单不需要留言字段,点击字段右侧的 X 删除它,仅保留姓名和邮箱。如果需要添加字段,点击「Add Item」。本例中仅保留两个字段。
字段的「内容」选项卡
每个字段都可单独设置,内容包括:
Type 类型:姓名字段类型为 Text,邮箱字段类型为 Email,邮箱字段仅接收带“@”和“.”的格式。
Label 标签:建议设置标签,即使页面上不显示。标签会出现在你收到的通知邮件中。
Placeholder 占位符:作为字段中的提示文字,提示用户填写内容。
Required 必填:建议将姓名和邮箱都设置为「Yes」。
在「Form Fields」底部,可以设定是否显示星号标记必填字段,以及是否显示标签。隐藏标签时,星号也会一并隐藏。
Column Width 栏宽:若希望表单更紧凑,可将姓名和邮箱字段设置为 50%,使它们并排展示。
字段的「高级」选项卡
一般无需修改。但需注意:
字段的 ID 不能留空。若为空,请手动填写。否则表单可能出错。
短代码中包含 ID,可插入邮件中,用来调用对应字段的内容。默认使用 [all-fields] 插入所有字段信息。若不希望插入全部字段内容,可手动调用所需字段的短代码。
通常此类订阅表单保留默认设置即可。
内容 > 按钮设置
大多数基础表单只有一个按钮,即 Submit 提交按钮。若是多步骤表单,还会有其他步骤按钮。
Size 大小:可快速设定字体和按钮间距。
Width 宽度:常用值为 20%。实际设置按页面风格决定。
按钮文字:默认值为 Send,可改为 Subscribe、Get Started、Sign Up 等。
图标设置:如需按钮左侧或右侧加图标,可在此选择,并调整间距。
Button ID 可用于自定义代码调用,一般留空。
内容 > 提交后操作(Actions After Submit)
此部分可定义访客提交表单后的行为。例如发送邮件、连接 MailChimp 或跳转页面。
Email 邮件通知(默认添加)
系统默认添加了 Email 操作。通常建议保留。点击 Email 标签页可设置:
收件邮箱
邮件标题
包含哪些字段信息
邮件内容格式等
Mailchimp 接入
继续添加一个动作:Mailchimp。
在「Actions After Submit」中点击下拉框,选择 Mailchimp
出现 Mailchimp 标签页,点击进入
若尚未设置 Mailchimp 接入,会提示输入 API Key。点击提示跳转到 Elementor 设置页面,填入你的 API Key。
设置完成后,回到 Mailchimp 标签页,即可选择一个 Audience 列表。用户提交表单后,其信息将自动加入列表中。
Redirect 页面跳转
再添加一个动作:Redirect。
在「Actions After Submit」中选择 Redirect
新增 Redirect 标签页后,输入跳转地址
该页面一般是感谢页面,提供用户领取资料的说明或下载链接。
内容 > 附加选项(Additional Options)
此表单不是多步骤表单,可跳过「Steps Settings」,直接查看「Additional Options」。
Form ID:若你想通过自定义代码识别此表单,可设置唯一 ID,通常无需填写。
Custom Messages 自定义提示:启用后可设定个性化提示文字。如将默认提示改为“很抱歉,提交失败,请稍后重试”。
这些提示文字通常在浏览器未显示自身错误提示时才会出现。
样式 > Form 样式设置
功能设置完成后,可在「Style」标签页中进行样式调整。
可自定义以下部分:
表单区域(Form)
输入字段(Form Fields)
提交按钮(Submit Button)
消息提示(Messages)
步骤样式(Steps,若有)
测试你的表单
完成样式调整后,发布或更新页面。建议自行填写一次表单,确认是否正常提交。此订阅表单包含信息收集、第三方接入与重定向功能,是营销系统中不可缺少的一环。