Elementor Pro 教程：如何制作+设计客制化表单（多种类型）？

这篇文章会分享使用 Elementor Pro 的「 Form 表单 」功能，协助你定制设计多种表单类型。

可以制作像是联络表单、电子报订阅表单、会员注册表单、作品提交表单等 ..，帮你一次解决表单上的烦恼。

顺利掌握这个功能，就不用再额外安装其他表单插件（除非还是无法满足你，再考虑安装即可），这样也能让网站轻量一点。

好啰，来看一下这篇的大纲。

• 1. 安装+启用 Elementor Pro 功能
• 2. 制作联络 / 问卷表单
• 3. 制作电子报订阅表单
• 4. 制作会员登入表单（搭配 Ultimate Addons for Elementor）
• 5. 制作会员注册表单（搭配 Essential Addons Elementor）
• 6. 制作文档提交表单
• 常见问题
• WordPress 学习资源

---

1. 安装+启用 Elementor Pro 功能

这篇文章提到的Form表单功能，属于 Elementor Pro 进阶版功能之一，如果你是用 Elementor 免费版 的，需进行升级才有办法使用。

当顺利购买完成+激活 Elementor Pro 凭证，就会看到专业版功能已经开启，这时就拥有更强大的网站客制化能力啦！

---

2. 制作联络 / 问卷表单

这章节，来示范使用 Elementor Pro 制作很常见的联络表单或是「 问卷表单 」，协助你搜集访客讯息。

首先，选择表单 Form 元素，并拖曳到页面里面，就会显示默认的版型了。

接下来，我分成简单几个步骤，带大家熟悉 Elementor 的表单功能。

Step1：表单字段设计

首先，可帮表单取个名字，方便未来做辨认。

点“ 添加项目 ”就会出现字段，然后在“ 类型 ”挑选自己需要的格式，最后在右侧的视觉编辑区，就会出现！

有关于类型的字段，有非常多种格式可使用（如下图），只要按照自己的需求选择，就可以设计出各种类型的表单啰！

再来，可以切换到「高级」标签，这里的「 ID 」和「 短码」是连动的（下图）。

「 ID 」的功用，是当访客提交表单后，网站会发送信件给站长，而系统会针对「 ID」进行字段辨认，并把访客在各字段输入的内容，分别写到信件中提交给站长。

所以有关ID的命名，请记得在当前表单中，不能跟其他字段的ID有重复（否则系统会不知道抓哪一个显示到信件中）。

再来，可以新增其他字段，像是电话、电子邮件、详细需求等 ..，就依照自己的需求调整啦。

Step2：提交后的动作

当表格字段、按钮样式都调整完成，就可以设定表单「提交后的动作」啰。

这功能简单理解，就是当访客提交表单后，你希望 Elementor 能帮你做哪些动作处理（下面挑选部分说明）。

• Collect Submissions（收集提交）： Elementor 会帮你把表单提交后的资料，存放在 Elementor > Submissions 里面，方便你做查询。
• 电子邮件：访客提交表单后，WordPress 会寄送表单内的讯息，到你的指定信箱。
• MailChimp：这里提交的资料，部分会传到 MailChimp 里面，协助你整合电子报名单。
• 弹出式窗口：访客提交表单后，会跳出指定的弹出式窗口。

这里我先选择 Collect Submissions、 电子邮件 这两个动作。

Step3：电子邮件设定

到电子邮件的选项卡，可设置收件人信箱、标题、消息等 ..，收件人信箱可任意指定（默认是 WordPress 管理员信箱）。

至于讯息的字段，默认值是 Elementor 提供的短代码，这短代码作用会抓取表单的所有字段，并放进要寄送的信件内容中。[all-fields]

至于其他的字段，大多是显示文字的差别而已，这里就不多提起。

Step4：其他选项设定

如果想修改提交表单后的显示文字，可以把自定义信息打开，里面可以做相关调整，或维持预设值也行。

Step5：表单样式调整

点击“ 样式 ” 可调整表单的间距、颜色、按钮、消息文字等 .. 相关的样式调整，就调为自己喜爱的样子吧！

Step6：测试表单

最后来看一下表单成品、表单留言内容，还有储存在 Elementor 的 Submissions 功能的表单资料。

首先，是设计完成的表单。 恩~感觉还不错！

再来，检查一下刚设定的信箱，会发现有多了一封表单留言的信件啰。

最后是 Elementor 的相关功能，我们前往 Elementor > Submissions（提交），会看到多了一笔内容的资料。

以上就是使用 Elementor Pro，制作联络 / 问卷表单的小教程：）

---

3. 制作电子报订阅表单

这章节，跟大家分享如何使用 Elementor Pro，制作电子报订阅表单。

因为电子报订阅表单的制作，跟上一章流程大致上是一样的，只是新增的字段不同而已，所以这章节会分享不同的。

也就是，教大家如何把订阅表单，和 MailChimp 这款知名的电子报营销软件，进行串接。 更多 MailChimp 电子报教程。

这样当访客提交表单后，相关资料就会传到 MailChimp 建档，方便站长做 Email 的统一管理。

备注： Elementor 也有跟其他的电子报营销软件整合，像是 MailerLite、ConvertKit、Drip 等 .. （依照自己状况选择即可），串接流程都大同小异，也能参考这章节的示范。

Step1：新增表单字段

首先，一样新增「Forms 表单」功能，这次分别新增姓名 &电子信箱。

Step2：提交后的动作

在提交后的动作选项，这次额外新增 MailChimp 的标签，会看到多了一个 MailChimp 选项卡。

Step3：MailChimp 选项卡设定

切换到 MailChimp 选项卡，API 密钥选择 Custom，然后输入自己的 MailChimp API。 有关 MailChimp API 位置，可参考 这篇说明。

MailChimp API 正确输入后，Elementor 会自动抓取你的 MailChimp 账户，就能进行指派。

有关字段对应的 Email & 姓名，分别选择自己表单的字段，就能进行绑定（下图）。

Step4：表单测试&确认 MailChimp 订阅者列表

当表单制作完成后，我们输入另一个信箱测试一下，看是否能顺利订阅成功。

顺利的话，在信箱应该会收到相关通知信，还有 Elementor > Submissions 也会有资料。

最后前往+登入 MailChimp，前往 Audience > All contacts，就会发现新的 Email 资料，也被整合进来

---

4. 制作会员登入表单（搭配 Ultimate Addons for Elementor）

Astra 是一款轻量快速的多功能主题，可搭建多种类型网站，像是 Blog 建立、公司网站设计、搭建购物网站 等 ..，并完美的支持 Elementor。

而这章节提到的Ultimate Addons for Elementor，是属于Astra Pro进阶版的功能之一，提供多达40多种Elementor元素、100+个网站模板、200+个区块模板，让网站定制能力变的更强。

Ultimate Addons for Elementor 的 Login Form（登入表单）、User Registration Form（注册表单），可用来制作会员登入 & 注册表单。

这章节，我会使用 Login Form（登入表单）进行示范，至于注册表单的操作流程也差不多，同样都能参考。

Step1：套用登入表单

首先，选择 Login Form 登入表单，并拖曳到编辑区里面。

Step2：设定表单字段

Field Label 选择 Custom（客制化），然后更改一下字段标题等 ..。

Step3：设定社群登入（注册）

Ultimate Addons for Elementor 有提供 Google、FB 社群注册+登入功能，可依自己需求选取。

这里先示范 Facebook 社群登入功能，如果不知该如何做，也能参考 Astra 的 这篇教程。

Send Email（寄送信件）可选 User（给注册会员），就是当访客注册为会员后，会收到 WordPress 寄送的欢迎+资料信件。

• Send Email 寄送信件：有提供 4 个模式，分别是 No（都不寄送）、Admin（寄给管理员）、User（寄给会员）、Admin & User（管理员&会员都寄）。

Step4：设定 Separator 分割线 & Button 按钮

可以开启分割线功能，也可帮按钮取个名字修改样式。

Step5：设定 Additional Options 其他选项

可设定会员登入登出后，是否跳转到指定页面。 还有相关注册、忘记密码的设定调整。

• Redirect After Login：会员登录后的跳转页面。
• Redirect After Logout：会员注销后的跳转页面。

Step6：表单样式设定

接着，就是来设计表单样式啰！

点击 Elementor 的样式（或进阶），这边能修改间距、表单字段、社群登入、网站按钮等 ..，就依照自己的喜爱调整即可。

如此一来，登入表单就完成啰！ 如果想了解更多，也能参考官方介绍。

---

5. 制作会员注册表单（搭配 Essential Addons Elementor）

Essential Addons Elementor 是 Elementor 生态圈强大的合作伙伴之一，算是非常知名的 Elementor 扩充插件。

它提供了非常多可用的元素功能，补足 Elementor 免费版可用元素较少的缺陷，所以如果你预算有限，也能搭配这款插件架站。

因为会员登入&注册表单的设计，流程其实差不多，下面我就用 注册表单 示范（登入表单也是差不多流程），那就开始吧！

Step1：套用注册表单&一般设定（General）

首先，搜寻 Register Form（注册表单），会看到元素右上角有一个 EA 的标志，把功能拖曳到视觉编辑器里面。

表单类型选择 Registration（如果是登入表单就选 Login），编辑区就会自动切换成注册表单。

Hide all Forms from Logged-in Users，这是如果处于已登入状态，注册表单会自动隐藏，不让访客看到。

Show Login Link 可看是否要显示「 登录 」按钮，如果有开启可取个名字（下图）。

Login Link Action 是点了登录链接，系统会做的动作，下图是选 Show Login Form 会自动跳转到会员登录页面。

上图 Enable Google reCAPTCHA 是 Google 的资安验证功能，可防范黑客用机器人注册（依自己需求开启，但需到 Google 申请凭证）。 可参考 这篇文章，有完整设定流程。

Step2：注册表单字段设定（Register Form Fields）

接下来，就是来设定表单字段啦！

点新增项目可新增字段，然后可设定字段种类、是否显示必填、字段宽度等..，就依自己需求选取。

Show Required Mark 可显示必填标志。

Step3：表格注册后的行动（Register Form Options）

Register Actions 是表单送出后的行动，这里我把 3 个类型都选起来，分别是 Redirect（导向）、Auto Login（自动登入）、Notify User By Email（通过电子邮件通知客户），下面有详细介绍。

New User Role 建议选择Subscriber 订阅者，这是权限最低的等级，不用怕会影响到网站资安性，订阅者只能修改自己个人资料。 更多角色权限详解，可参考 WordPress 教程 相关章节。

• Redirect 导向：会员注册后，会自动导向到指定网址（需填写网址），可依照自己需求设定。
• Auto Login（自动登录）：会员注册后，会直接处于登入状态。
• Notify User By Email（通过电子邮件通知客户）：会员注册后，WordPress 会寄送通知信给会员。

备注：以上的设定，可依照自己需求调整，这里因为教程示范，所以功能都有选进去。

Step4：注册成功后，会员收到的欢迎信件（Register User Email Options）

默认的注册成功信件，里面都是英文，我们可做个调整。

首先，在 Email Template Type（模板类型） 选择 Custom（客制化），可更改信件标题，还有信件内容。

模板默认里面会有短代码，像是、 等 ..，这是系统的动态文字，传到会员那边会自动改成它们填写的数据。[username][password]

Step5：注册成功后，管理员信箱会收到信件。

一样可改为 Custom 自定义信件模板，更改信件标题&信件内容。

有关 Essential Addons for Elementor 提供的短代码形式，有下面这几个（仅列举部分，依官方提供的为主）。

• [username]：用户帐号
• [email]：电子邮件
• [firstname]：姓名
• [lastname]：同上（两者可二选一使用）
• [website]：网站路径
• [loginurl]：会员登入表单的路径
• [sitetitle]：网站标题

Step6：Terms & Conditions （会员服务&条款）

可开启同意会员服务&条款字段，并设定相关文字&网址路径。

Step7：Validation Messages（验证消息）

Essential Addons for Elementor 在不同字段，有完整的验证功能，我们只需把预设英文字改为中文即可。

Step8：设计表单样式

最后就是设计表单样式啰，Essential Addons for Elementor 有很多可调整的选项。

像是整体背景、表格样式、登入/注册按钮等 ..，都可依照自己需求调整。

如此一来，注册表单就完成啰！ 我们也能参考一下 官方表单设计 感觉，打造自己的注册表单！

---

6. 制作文档提交表单

如果打算让访客上传文档，像是图片文件之类的，Elementor 也有提供这样的字段。

因为表单制作流程，跟前几个章节的流程差不多，这边就只挑重点功能介绍。

首先，一样添加“ Forms 表单 ”功能，这次比较不同的地方，是字段类型可选择“ 文档上传 ” 。

如此一来，就能制作类似上传文档的功能啰。

---

常见问题

原文链接：https://www.itaoda.cn/blog/11348.html，转载请注明出处。