Edit Content

微信扫码

备注 「 谷歌广告 」 

朋友圈更多干货实时分享

免费分享干货

2024 超详细 Elementor 表单功能全解析-Elementor 教程

本文目录

学习了 Elementor 容器的使用后,也要学会使用重要的表单功能。

Elementor表单作为WordPress中一款领先的页面构建插件的重要组成部分,不仅提供了无限的创造可能性,还极大地简化了网站构建过程。在这篇文章中,我们将深入探讨Elementor表单的各项功能,目的是帮助初学者和有经验的用户完全理解和有效使用Elementor的表单功能。
但是Elementor Pro 的表单功能非常非常多,但是 1/2 才是大多数人常用的功能,本教程会对所有功能都进行解析、对比,常用的功能会重点拿出来讲,篇幅较长,可以点击导航栏按需查看

一、 Elementor 表单功能使用的前提

已购买Elementor Pro,Elementor Pro 购买注意事项及激活

Elementor Pro 插件已经安装启用

放入表单组件可以看到基本的三个功能:名称、邮箱、消息。

(点击查看大图)

可以发现初始的信息有三个:名称、邮箱、信息,如果要增加新增项目可以直接增加

(点击查看大图)

表单内容类型可以增加什么功能

Elementor表单提供了丰富的字段类型,包括但不限于文本输入框、电子邮件字段、下拉菜单、复选框和单选按钮等。用户可以轻松拖放这些元素来构建自定义表单,并实时预览。我们将通过具体的示例和截图来展示如何利用这些功能创建各种表单,从简单到复杂。

打勾是常用的功能

字段类型用途备注
文本(Text)输入一行简短文本填写姓名、地址或任何简短信息
邮箱(Email)输入电子邮件地址具有自动验证电子邮件格式的功能。
文本域(Textarea)输入多行文本留言、评论、详细描述
网址(URL)输入网页链接提交个人网站、社交媒体链接等
电话(Tel)输入电话号码联系信息表单,如预约或注册
单选(Radio)在多个选项中选择一个性别选择、是/否问题等
选择(Select)从下拉列表中选择一个选项选择国家、服务类型等
复选框(Checkbox)选择多个选项选择兴趣爱好、技能、条款和条件同意等
接受(Acceptance)确认同意某些条款同意隐私政策、服务条款等
数字(Number)输入数字年龄、数量、价格等
日期(Date)选择日期预定、预约、事件日期选择
时间(Time)选择时间确定具体时间,如会议或预约的时间
文件上传(File Upload)上传文件提交文档、照片、简历等
密码(Password)输入密码,显示为星号或点用户注册、登录时的密码输入
HTML显示自定义HTML内容显示文本、图片、链接等
隐藏(Hidden)提交不显示给用户的数据存储用户ID、表单标识等
reCAPTCHA谷歌官方防止自动化和垃圾邮件提交任何需要安全保护的表单
reCAPTCHA V3高级版的reCAPTCHA,更隐蔽同上,但对用户界面干扰更小
Honeypot防垃圾邮件的隐蔽技术提高表单安全性,不干扰用户体验
步骤(Steps)将表单分成多个步骤长表单或需要分步完成的表单,如调查或详细注册过程
重置按钮(Reset Button)清空表单中的所有输入任何需要用户有重新开始输入选项的表单

二、 常用内容类型的设置

先来了解下通用设置,建议所有要使用表单的必须都看一下。

2.1 表单的命名

我们会有很多表单,在首页、产品页面、联系页面,那么如何区分是哪个页面来的询盘或者确定某个页面的表单出问题,对表单名称命名是非常有用的。

命名格式可以是页面+ 位置+Forms,比如Home-End-Forms

2.2 标签和占位符

在Elementor表单设置中,”标签”(Label)和”占位符”(Placeholder)是两个不同的但都很重要的概念。它们的作用如下:

  1. 标签(Label):
    • 定义:标签是紧挨着表单字段的文本,用来告诉用户这个字段是用来输入什么信息的。
    • 作用:标签为用户提供了明确的指示,比如“姓名”、“电子邮件地址”、“留言”等。这些标签帮助用户理解每个字段的目的,确保正确地填写表单。
  2. 占位符(Placeholder):占位符是直接显示在表单输入字段内部的灰色文本,当用户开始输入时,这些文本会消失。
    • 作用:占位符提供了额外的指示或示例,引导用户如何填写字段。例如,在电子邮件字段中,占位符可能是“example@domain.com”。

不想要标签关闭下面的按钮即可

2.3 调整内容类型的顺序和宽度

按住拖拽即可

先选中要编辑的项目,找到宽度选择百分比即可,相邻两个各 50%就可以并排

2.4 文本

填写姓名、地址或任何简短信息

2.5 邮箱

专用于输入电子邮件地址,具有自动验证电子邮件格式的功能,我们可以选择必填。

2.5 文本域

客户可以输入多行文本

2.6 电话

具有自动验证电话的功能,我们可以选择,因为有些时候浏览器会自动记住一些信息帮助填写表单,可以拿到这类客户的电话。

2.7 reCAPTCHA V3

第三版reCAPTCHA,提供更高级的机器人检测,对用户更不显眼,教程待定中

2.8 Honeypot

一种隐蔽的防垃圾邮件技术,对用户不可见,用于诱捕机器人自动化的表单提交,是 Elementor 的自带功能,这里可以选择后就不需要设置

除了以上常规必备的内容,以下的内容按需设置,可以浮光掠影的看一遍,知道 Elementor 能做什么功能即可

3.1 单选、选择、复选框、接受条款

以上都可以选择的选项类型

单选:输入的文本回车就可以是单独的选项

选择:多选功能不建议使用,无法多选,和单选比就是样式不一样,多选功能选择复选框☑️

复选框:可以打勾多选,文本回车就可以是单独的选项

接受条款:一般可以作为接受隐私条款的勾选

3.2 数字、日期和时间

数字:这个设置告诉客户这个字段是用来输入他们想要订购的货物数量的。通过在占位符中添加例如 “请输入您想要订购的货物数量,例如 ‘100’”,你为客户提供了一个明确的例子,这样的占位符有助于防止混淆,确保客户正确填写表单。

日期和时间:这两个功能看下样式即可

3.3 文件上传

Elementor表单构建器中的文件上传功能允许用户上传各种类型的文件,但出于安全和实用性的考虑,你可能需要限制可上传的文件类型。在Elementor中,你可以设置文件上传字段,以接受特定类型的文件。常见的文件类型限制包括:

  1. 图像文件:如.jpg、.jpeg、.png、.gif。
  2. 文档:如.pdf、.doc、.docx、.xls、.xlsx、.ppt、.pptx。
  3. 音频:如.mp3、.wav。
  4. 视频:如.mp4、.mov、.avi。
  5. 文本文件:如.txt、.csv。
  6. 压缩文件:如.zip、.rar。

文件类型限制通常包括:

  • 设置文件类型:在该字段的设置选项中,指定哪些文件类型是被允许的。这通常通过输入文件扩展名来完成,例如“jpg,png,pdf”等。
  • 设置文件大小:你也可以设置文件大小限制,以防止过大的文件被上传。

正确设置文件上传字段可以帮助保护你的网站免受不安全或不适当文件的上传,并确保用户仅上传你需要的文件类型,一般不太建议使用这个功能,容易被上传病毒文件等。

选择文件的中文不用管,因为这里的语言会随着浏览器语言变化

3.4 密码

用于用户注册、登录账号时输入密码,输入内容会被隐藏,一般 2B 都不需要这个内容类型。

HTML:Elementor表单中的HTML字段非常灵活,它允许你在表单内部添加自定义HTML代码,但是2B 使用不需要怎么复杂的功能,了解下就可以。

这个功能可以用于多种用途,包括:

  1. 添加文本或说明:你可以用HTML字段来添加额外的文本、说明或任何HTML支持的内容。这对于向用户提供额外信息或指导非常有用。
  2. 格式化和布局:通过HTML字段,你可以使用HTML和CSS来改进和自定义表单的外观和布局。这对于创建视觉上更吸引人的表单很有帮助。
  3. 嵌入链接:如果你需要在表单中包含链接,如隐私政策或服务条款的链接,HTML字段是一个很好的选择。
  4. 插入图片或视频:HTML字段允许你在表单中嵌入图片或视频,这可以使表单更互动和吸引用户。
  5. 添加自定义脚本:虽然这更高级一些,但你可以使用HTML字段来添加小段JavaScript或其他脚本,用于增强表单的功能性或用户体验。
  6. 创建分隔符或空间:使用HTML字段,你可以添加分隔线或者空白空间,以便更好地组织和分隔表单的不同部分。

总之,HTML字段提供了额外的灵活性,使你能够进一步定制和增强Elementor表单的功能和外观。正确使用此字段可以显著提升表单的用户体验和效果。

3.5 步骤

可以将一个长表单分割成多个较小的部分,每个部分代表一个步骤,一般 2B 都很简单,不需要长如填信息表、简历、户口调查一样的信息,可忽略。

四、 Elementor 表单的按钮

这里不需要改动太多,直接改文案

如果想加上图标可以直接点击图标库添加

按钮的长度调整列宽度

五、 提交后的操作

这里的功能非常多,这里也分为常用和不常用,重点掌握常用功能即可

5.1 常用功能

5.1.1 Collect Submission

主要用途:保存提交的表单数据到Elementor数据库

5.1.2 邮箱👉🏻收客户询盘非常重要的功能

下图很直观,可以直接看表单的功能

发送到:收询盘的邮箱

主题:收询盘时询盘的标题

消息:不需要修改,客户填写的什么东西就会被直接转发

来自邮箱、来自名字、回复到:一般都可以不更改

抄送、密送:按需填写即可

下图可放大查看

5.1.3 邮箱 2👉🏻自动回复客户的重要功能

在客户发送询盘后,会收到一封感谢邮件

感谢邮件在客户服务和营销策略中扮演着重要角色。其主要作用包括:
1. 确认和安心:感谢邮件确认客户的操作已成功,例如表单提交或订单处理。这提供了即时反馈,让客户知道他们的请求或订单正在被处理。
2. 建立信任和专业形象:及时的感谢邮件显示出你的业务注重客户服务和细节,有助于建立客户对品牌的信任。
3. 提供额外信息:感谢邮件是传达额外信息的好机会,比如下一步怎么做、联系方式、常见问题解答或其他相关资源。
4. 营销机会:感谢邮件可以用来介绍其他产品或服务,提供特别优惠,或邀请客户关注社交媒体,从而促进进一步的销售和客户参与。
5. 客户反馈:通过感谢邮件,你可以邀请客户提供对服务的反馈,或参与调查,这对改进产品或服务非常有用。
6. 维持联系:这类邮件有助于与客户保持联系,即使在交易或互动完成后。它为未来的互动铺平了道路。
7. 个性化体验:定制化的感谢邮件(例如使用客户的名字)可以提升客户体验,使客户感觉更被重视。
8. 作为数据转化的埋点,关联 GA,在 GA 中标记感谢页面为转化。

总之,客户提交表单后收到的感谢邮件不仅是良好客户服务的标志,也是一种有效的营销工具,可以增强客户满意度、促进品牌忠诚度,并有可能带来额外的业务机会。下面教授如何设置这个功能。

找到 提交后操作,点击 +号 , 添加 email2/邮箱2

点击 Email -> ADVANCED -> 复制这串短码

(Name 同理)

5.1.4 邮箱2设置要点总结

下图很直观,可以直接看表单的功能

发送到:客户每次填写邮箱的短码,客户填写什么邮箱会自动被抓取过来填写

主题:客户收到询盘时的感谢页标题

消息:需要修改使用下面推荐的工具(https://www.osgeo.cn/app/sc901),可以带格式的给客户感谢邮件

来自邮箱、来自名字:客户收到这封邮件看到的发件人和发件邮箱

回复到:客户点击回复后回复的邮箱,必须填写正确

发给客户的信息参考

使用工具 https://www.osgeo.cn/app/sc901

转化后的内容直接复制粘贴,客户就会收到带格式的邮件

小熊猫公众号

微信关注“小熊猫独立站”公众号

回复:网站密码

或 点击菜单栏网站密码

付费文章限时免费看

例如:

<p>Dear,[field id="name"]</p>
<p>Thank you for reaching out to us regarding our B2B product offerings at xxxxx. Your inquiry has been successfully received, and we appreciate your interest.</p>

<p>To explore further and discover more about our products and services, please visit our official website at xxxxx.com. There, you'll find comprehensive information to assist you in making informed decisions.</p>

<p>We're excited to inform you about our latest product release, &quot;xxxxx,&quot; which showcases our commitment to innovation and excellence in B2B solutions.</p>

<p>Feel free to explore our website, and should you have any specific questions or need assistance, please don't hesitate to reach out.</p>

<p>Best Regards,</p>

效果一览

下图可放大查看

5.1.4 跳转

跳转功能是一个多用途的工具,它可以根据你的特定需求和目标来提升用户体验和优化业务流程

一些跳转功能的主要用途:

  1. 确认和反馈:在用户提交表单后,你可以将他们重定向到一个“感谢”页面,这样可以向用户确认他们的提交已成功,并提供进一步的信息或指示,可以防止他们意外地通过刷新页面重复提交表单。
  2. 特定内容展示:基于用户的选择或提交的信息,你可以重定向他们到最相关的页面,比如特定的产品页面、资源下载页面个性化的内容页面
  3. 测量转化和追踪:通过将用户重定向到特定页面,你可以更容易地追踪转化率和衡量表单效果,尤其是在使用分析工具时。
  4. 营销和促销活动:在营销活动中,你可以利用跳转功能将用户导向特别促销或有限时间优惠的页面。
  5. 合作伙伴和第三方服务:如果你的表单与外部服务或合作伙伴网站集成,你可以在用户完成表单后将他们重定向到这些外部资源。

5.2 其他不常用功能👉🏻集成其他功能

主要是集成功能相关,需要先在 Elementor 设置→设置中填入 API 密钥才可以使用

1. 邮件营销集成(MailChimp, Drip, ActiveCampaign, GetResponse, Convertkit, MailerLite):

  • 用途:将表单提交者的信息直接添加到你的邮件营销列表中。
  • 场景:用于订阅表单,将用户的信息添加到邮件营销工具,以便进行后续的营销和沟通。

2. 通道(Slack, Discord等):

  • 用途:将表单提交的通知发送到指定的通信平台,如Slack或Discord。
  • 场景:当你希望在团队的通信渠道中收到即时通知时使用。

3. 不调和(Do Nothing):

  • 用途:不执行任何操作。
  • 场景:当你仅仅需要表单作为一个输入界面,而不需要对提交的数据进行任何处理时。

4. 弹窗(Pop-up):

  • 用途:提交表单后显示一个弹窗。
  • 场景:用于在用户提交表单后显示确认信息、促销信息或任何其他重要通知。

5.3 其他选项👉🏻客户操作的反馈

比如提交表单成功的消息通知都可以按需设计

六、Elementor 表单的设计和样式

一个成功的表单不仅仅是功能性的,还需要有吸引人的设计。Elementor pro (购买👉🏻)提供了丰富的样式选项,允许用户自定义字体、颜色、布局和其他设计元素。

Elementor Pro 有很多模板可以使用,在样式上不需要花太久的时间

操作:点击灰色文件夹,在左上方选择 contact,选择想要的插入即可

或者使用 Envato 插件的免费模板

小熊猫公众号

微信关注“小熊猫独立站”公众号

回复:网站密码

或 点击菜单栏网站密码

付费文章限时免费看

微信扫码

备注 「 谷歌广告  」 

朋友圈更多干货实时分享

免费分享干货