这篇文章会分享使用 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 表单 ”功能,这次比较不同的地方,是字段类型可选择“ 文档上传 ” 。
如此一来,就能制作类似上传文档的功能啰。
常见问题
Elementor Pro 可以制作什么类型的表单?
可以制作像是联络表单、电子报订阅表单、会员注册表单、作品提交表单等 ..,帮你一次解决表单上的烦恼。
Elementor Pro 还有提供其他功能吗?
Elementor 高级版,有额外 50 多个专业元素功能、300 多种高级模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder(购物网站编辑器)等 ..,有更多功能可以使用。
想使用 Elementor 制作会员登入&注册表单,要如何做?
可以试看看 Elementor 生态圈的扩充插件,像是 Ultimate Addons for Elementor、Ultimate Addons for Elementor 等 ..,都有提供会员登入 & 注册表单功能。
Elementor 跟我使用的主题有办法兼容吗?
Elementor 跟绝大多数主题都保持良好的兼容度,因为 Elementor 在 WordPress 领域是非常知名的页面编辑器,所以通常不用担心此问题。
但如果你的主题有内建自己的页面编辑器了,那会建议使用内建的即可,因为通常整合度会比较高。
原文链接:https://www.itaoda.cn/blog/11348.html,转载请注明出处。
评论0