所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

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 凭证,就会看到专业版功能已经开启,这时就拥有更强大的网站客制化能力啦!

Elementor Pro 专业版功能开启
Elementor Pro 专业版功能开启

2. 制作联络 / 问卷表单

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

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

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

Step1:表单字段设计

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

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

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

Elementor Pro 定制化表单:多种格式选项
多种格式选项

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

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

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

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

Step2:提交后的动作

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

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

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

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

Step3:电子邮件设定

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

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

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

Step4:其他选项设定

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

Elementor Pro 定制化表单:其他选项设置
其他选项设定

Step5:表单样式调整

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

Step6:测试表单

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

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

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

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

Elementor Pro 客制化表单:Elementor 的 Submissions 功能
Elementor 的 Submissions 功能

以上就是使用 Elementor Pro,制作联络 / 问卷表单的小教程:)


3. 制作电子报订阅表单

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

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

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

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

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

Step1:新增表单字段

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

Step2:提交后的动作

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

Elementor Pro 定制化表单:设定提交后的动作
设定提交后的动作

Step3:MailChimp 选项卡设定

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

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

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

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

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

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

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

以上就是使用 Elementor 制作电子报表单的教程:)

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

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

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

Ultimate Addons for Elementor 教程:多种扩充功能
Ultimate Addons for Elementor 教程:多种扩充功能

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

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

Step1:套用登入表单

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

Ultimate Addons for Elementor 教程:使用会员登入表单
Ultimate Addons for Elementor 教程:使用会员登入表单

Step2:设定表单字段

Field Label 选择 Custom(客制化),然后更改一下字段标题等 ..。

Ultimate Addons for Elementor 教程:设定表单选项
Ultimate Addons for Elementor 教程:设定表单选项

Step3:设定社群登入(注册)

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

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

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

Ultimate Addons for Elementor 教程:开启社群登录注册功能
开启社群登入注册功能
  • Send Email 寄送信件:有提供 4 个模式,分别是 No(都不寄送)、Admin(寄给管理员)、User(寄给会员)、Admin & User(管理员&会员都寄)。

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

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

Ultimate Addons for Elementor 教程:设定分隔线&按钮
Ultimate Addons for Elementor 教程:设定分隔线&按钮

Step5:设定 Additional Options 其他选项

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

Ultimate Addons for Elementor 教程:额外设定
Ultimate Addons for Elementor 教程:额外设定
  • Redirect After Login:会员登录后的跳转页面。
  • Redirect After Logout:会员注销后的跳转页面。

Step6:表单样式设定

接着,就是来设计表单样式啰!

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

Ultimate Addons for Elementor 教程:设定表单样式
设定表单样式

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

Ultimate Addons for Elementor 教程:登入表单设计成功!
登入表单设计成功!

5. 制作会员注册表单(搭配 Essential Addons Elementor)

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

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

Essential Addons For Elementor 多种可用元素(仅部分截图)
Essential Addons For Elementor 多种可用元素(仅部分截图)

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

Step1:套用注册表单&一般设定(General)

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

Essential Addons For Elementor 的会员注册&登入表单

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

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

切换为 Registration 注册表单
切换为 Registration 注册表单

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

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

注册表单相关设定
注册表单相关设定

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

Step2:注册表单字段设定(Register Form Fields)

接下来,就是来设定表单字段啦!

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

Show Required Mark 可显示必填标志。

Elementor 注册窗体相关设定
Elementor 注册窗体相关设定

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 提供的短代码形式,有下面这几个(仅列举部分,依官方提供的为主)。

Essential Addons for Elementor 教程:多种短代码类型
Essential Addons for Elementor 教程:多种短代码类型
  • [username]:用户帐号
  • [email]:电子邮件
  • [firstname]:姓名
  • [lastname]:同上(两者可二选一使用)
  • [website]:网站路径
  • [loginurl]:会员登入表单的路径
  • [sitetitle]:网站标题

Step6:Terms & Conditions (会员服务&条款)

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

Essential Addons for Elementor 教程:确认会员服务&条款
Essential Addons for Elementor 教程:确认会员服务&条款

Step7:Validation Messages(验证消息)

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

Essential Addons for Elementor 教程:验证消息
Essential Addons for Elementor 教程:验证消息

Step8:设计表单样式

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

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

Essential Addons for Elementor 教程:设计表单样式
Essential Addons for Elementor 教程:设计表单样式

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

Essential Addons for Elementor 教程:官方设计的注册表单参考
官方设计的注册表单参考

6. 制作文档提交表单

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

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

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

Elementor Pro 教程:选择文档上传类型
Elementor Pro 教程:选择文档上传类型

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


常见问题

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
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

海量独立站商城

本站拥有海量商城独立站模版,涉及各行各业产品,提供免费安装部署,免费对接支付,提供物流发货解决方案,支持多语言、多币种。更多帮助,请直接在右下角联系客服

禁止将网站用于含诈骗、赌博、色情、木马、病毒等违法违规业务,本站将暂停一切售后。

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板