如何使用Elementor的联系表单功能

如何使用Elementor的表单功能

如何使用Elementor的联系表单功能

      同学们做外贸独立站的目的我猜都是为了转化客户获得询盘,那么当访客在浏览了你的网站页面内容,对你的产品或者服务很感兴趣,想要进一步和你们沟通的时候。那么问题就来了—客户用什么样的方式能够直接的联系到你们?!最简单的办法就是在线沟通功能,Elementor编辑器没有提供在线沟通功能,所以这里不展开这方面的内容。其次就是询盘表单功能,通过网站上预设的联系表单,客户会提交他们的姓名、邮箱和其他相关信息,然后通过我们事先设置好的接收邮箱进行询盘的传递。所以同学们现在明白了询盘表单对于一个外贸独立站的重要性了吧!

接下来我们重点对Elementor编辑器的表单元素(Form)进行细致的操作和讲解:

第一步:将Elementor编辑器的表单元素添加到内容编辑版块

 

将Elementor编辑器的Form元素添加到内容编辑版块

在Elementor编辑器的左边找到“Form”元素,然后在箭头1所指的地方按住鼠标左键不松开拖动到右边箭头2所指的内容编辑版块,等到内容编辑版块外部的灰色虚线边框变成浅蓝色的时候,再松开鼠标左键,这样同学们就成功的将Form(联系表单)功能添加到了内容编辑版块,接下来就是我们对他的相关操作。

第二步:对Elementor编辑器的Form表单主体功能进行设置

 

2.1“Form Field

FORM的form fields功能设置

首先是“Form Name”:就是自定义该表单的名称,阿猫阿狗都没关系,随你自己的心情。Jack老师还是建议同学们认真填写,以免多个表单出现混乱

下面是Form Fields的表单项目,Elementor编辑器预设了3个项目,分别是用户姓名Name,用户邮箱Email和用户的提交信息Message。我们点开每个项目可以对它们进行相应的修改

联系表单的内容设置

这三个默认选项的内置功能设置都是差不多的,所以Jack老师把这三个内容放在一起进行讲解。

“Type”:指的是表单项目类型,这是一个下拉选项框,有Text、Email、Textarea、Url、Tel、Radio、Select、CheckBox、Accpetance、Number、data、Time、FileUpload、Password、HTML、Hidden、Step、reCAPTCHA、reCAPTCHA V3 、Honeypot。这些项目都能够为你实现自定义表单功能和样式做出卓越的贡献。

“Label”:指的是某个表单功能的名称,比方说Name功能的名字就可以预设显示为Name,或者你也可以改成Your Name

“PlaceHoolder”:指的是文字占位符,也就是内容框中的事先显示文字,当你输入新的文字之后,这个预设文章就会消失

“Required”:指的是该项目是否为必填项,如果是非必填选项,那么不要点击该项目即可

“Column Width”:指的是某个表单功能占据该行内容宽度的百分比值,默认情况下是100%。注意这个表单功能内容宽度不是随意调整了,只能用Elementor编辑器预设的宽度占比值进行调整

如果系统预设的3个表单项目不能够满足你的表单需要,同学们还想增加更多的表单功能的话,比方说你想设置一个访客提交文件的功能。因为在B2B商业中,有时候客户想提交自己的产品初步设计图稿给工厂看看能不能有机会生产。所以我们就可以使用form fields中的“新增项目”功能进行添加。

form表单的大小设置

 

“Input Size”:指的就是表单的尺寸大小,有5个层级大大小选项可供我们操作

“Label”:指的是某个表单功能的项目名称,比方说你不想在name表单功能选项中出现Name这个词,那么就不要点击Label后面对应的蓝色“Show”按钮

“Required Mark”:指的是必填项的显示效果,如果你点了“show”,那么在表单中,必填项目就肯定会在项目名称后面出现一个*符号

2.2“Buttons

forms的buttons功能设置

Button指的是表单的提交按钮功能,不要小看这个功能哦,设置好的提交按钮也能够为你的询盘转化出功出力!

“Size”:指的就是表单提交按钮的尺寸大小

“Column Width”:和前面的Form Fields的column功能一样,都是按钮项目占整个表单宽度的比值

“Alignment”:指的是按钮在表单底部的对齐方式,有居左,居中,居右和两端对齐4种方式。其中前三者是不会占据整个表单宽度的,只有第四个两端对齐才会占据整个表单宽度。

“Step Buttons”:它有两个选项,分别是Next和Previous,这两个功能平时用的不多,可以不用去额外操作

“Submit Button”:指的是提交按钮显示的文字,系统预设是send,你也可以该成Click to Send

“Icon”:指的是显示在提交按钮上的图标,默认状态下是没有的,你可以点击选择系统预设的Elementor图标也可以上传自己设计的图标

”:指的是提交按钮图标和提交按钮显示文字的前后显示顺序

“Icon Spacing”:指的是提交按钮图标和提交按钮显示文字之间的距离

“Button ID”:指的就是该表单按钮的id编号,以备其他页面可以调用我们当前已经配置好的表单按钮功能,省得再去操作,不过要注意表单按钮的id必须是唯一的哦

“Actions After Submit”:指的是访客填写完表单并点击提交按钮之后,表单执行的操作。默认情况下是发送该表单内容信息到预设的网站管理者邮箱中。当然Elementor编辑器还提供了很多系统内设的其他功能,比如:Drip、ActiveCampaign、GetResponse、ConvertKit、MailerLite、Slack、Discord、Popup、Mailchimp、Webhook、Redirect等等

2.3、“Email

我们只需要在To下面的内容框中输入或者修改自己的邮件接收邮箱账号就行,默认情况下,Elementor编辑器会将该内容预设成网站的联系邮箱!那么我们可以将此处的邮箱账号改成[email protected]或者[email protected]。其他部分个人觉得没有太大必要的改动。

2.4、“Steps Setting”:指的是提交表单内容后的下一步操作指引,一般情况下默认即可,没有太多额外操作的必要

2.5、“Additional Options”:意为其他选项,这里主要是设置一个form ID,也就是这个表单的“身份”,注意这个id值只能是唯一的,不能混淆!有点和上面的Send按钮设置ID差不多的意思,区别在于:一个是按钮样式身份ID设置,一个是整体表单身份ID设置。

第三步:对Elementor编辑器的Form表单样式功能进行设置

 

3.1、“Form样式设置”

form的表单样式设置

“Columns Gap”和“Rows Gap”指的是表单各个内容项目之间的行与列之间的间距

“Label Spacing”:表单项目名称和表单项目内容输入框直接的距离

“Text Color”:指的是表单项目名称的文字显示颜色

“Mark Color”:指的是必填选项中那个必填项目符合*所显示的颜色

“排版”:这个就不说了,指的是表单项目名称的文字排版设置,太简单了,同学们自己去操作即可

“HTML Field”:这部分我也没搞懂是要对表单的什么项目进行更改,有知道的同学们可以和我说一下吗?谢谢!

 

3.2、“Field样式设置”

 

form的field样式设置

“Text Color”:指的是表单项目内容框中显示的文字颜色修改,比方说我们在Name选项中,输入名字:Jack,那么这时候显示的Jack就是红色的。

“排版”:不解释,太简单了

“Background Color”:表单项目内容输入区块的背景颜色设置。默认情况下是白色,Jack老个人觉得白色就挺好了,如果有特殊需求的同学们自己去进行配置

“Border Color”:指的是表单项目内容输入区块的外边框线颜色

“Border Width”:指的是表单项目内容输入区块的外边框线粗细

“Border Radius”:指的是表单项目内容输入区块的外边框线4个直角转化成圆角,数值越大圆角弧度越大

 

3.3、“Buttons样式设置”

form的button功能样式设置

“排版”:功能简单又常见的操作,这里不解释了

“边框类型”:指的是按钮的边框样式,有实线和虚线这些预设选项可供选择

“Normal”和“Hover”:指的是按钮的正常和悬停状态下的不同效果。这个地方Jack老师还是建议同学们去设置一下,这样显得页面内容更加灵活,能够增加访客点击率

“Next & Submit Button”有两个选项,分别是Background color和Text Color,对应的就是背景颜色和文字颜色的自定义设置

“Previous Button”和上面一样也是有两个功能,而且这两个功能也和上面一样都是对背景颜色和文字颜色进行自定义设置

“Border Radius”:指的是外边框线的圆角弧度

“Text Padding”:指的是文字和外边框线之间的间距,数值越大间距越大

3.4、“Message样式设置

form的message样式设置

“排版”:不解释

“Success Message Color”:指的是信息发送成功之后显示的颜色,一般默认情况显示是是这样一句信息—The form was sent successfully.

“Error Message Color”:指的是信息发送失败之后显示的文字颜色

“Inline Message Color”:指的是内联消息颜色的相关设置

3.5、“Steps”

太累了,一不小心又4000字了,不想写了,这部分就留作彩蛋,让同学们自己去发掘吧,有不懂的地方再联系我。

好了,以上就是本章关于 如何使用Elementor的联系表单功能 的全部内容,联系表单Form作为外贸自建网站优化过程中必不可少的一项功能,需要我们花费一番功夫去研究和设置,以提高访客在我们网站页面上的停留时间和信息交互,这样才能促进我们的网站排名和客户转化。如果对本文内容还有不理解的地方,没关系,解决方案如下:

点击此处,查看更多外贸建站和谷歌SEO优化免费教程

QQ:3233269705

QQ群:645296397

微信公众号:JACK SEO

微信公众号二维码