Elementor 联系表单如何添加设置？

Elementor联系表单是一个很重要的功能，一方面可以与访客交互提高转化询盘，另一方面可以替代第三方表单插件，提高工作效率的同时还节约了系统资源。对于外贸网站了来说联系表单是很重要的。

Elementor Form表单功能前提条件

使用 Elementor内置 Form表单功能的前提是开启 Elementor和 Elementor Pro插件。

前者免费使用，后者需要付费购买，Elementor Pro有年费和永久两种付费方式，部分高级功能在 Elementor Pro中才能使用。

Elementor Form内容设置

新建一个页面/文章，使用 Elementor编辑，在左侧搜索 form，拖拽到右侧编辑区域。

然后会看到右侧出现 name、email、message、send 这几项表单基本组成元素。

学习重点在页面左侧，这里有很多设置项。

内容、样式、高级设置是三大选项，下面我们一个个看。

先看内容，这里要设置的内容较多。

默认有name、email、message这三个选项，我又添加了2个 phone和company这两个选项，这样就有了外贸网站 contact us中比较常见的填空选项。

新增 honeypot字段，type 选择 honeypot ，label填入 honeypot field。这个字段是给垃圾邮件机器人用的，因为在页面上显示不出来，而机器人是通过识别代码来发送垃圾邮件的。所以说当机器人填写这个字段时，就会卡在这里，被拦截无法提交垃圾询盘（做不到百分百拦截，毕竟还有人工营销）。

如下图所示，大体上 name、email、message点开后具体内容都差不多。

Form name用于区别多个表单，名字随便写，建议改成看一眼就知道是哪个表单，方便区别。

type：字段形式，点开后有很多种类型，这三种已经选好了。

Label：标签，在每个字段上面显示的提示内容。

Placeholder：字段空格里面显示的提示内容，浅灰色文字。

Required：必填内容。

Colum Width：表格宽度。

• 老魏按照外贸网站习惯性的布局方式，把 name、email、phone、company都设置宽度 50%
• 其中 name、email、message设置为必填项。
• 这几个字段可以上下移动调整。
• Label设置为隐藏。
• 在 placeholder 中把必填项后面加上了 * 号。
• 所有字段 > advanced > ID，都填写为与 label相同的名字。
• Input size：字段大小，就是让整个表单显得更肥大还是更瘦小一些。
• 在右侧的表单区域点击右键，选择另存为 global widget 就保存为公用表单了，此时如下图所示表单外框从蓝色变成黄色。公用表单的意思是可以在任何页面调用这个表单，修改时只要修改一个，其他页面的表单都会跟着变化，用起来很方便（和 shortcode短代码有异曲同工之妙）。

接下来是 Buttons按钮设置，也就是上图中绿色的 send按钮。

size：按钮大小。

Column width：按钮宽度。

aligment：居中、居左、居右、全宽。

step buttons：用于有多个步骤的表单，一般用不上这个功能。

submit button：按钮名字

Icon：send 旁边的图标，可以设置

icon position：图标在文章的前、后。

icon spacing：图标和文件的间距。

Actions after submit：用户提交表单后的动作，与下面的 email功能配合使用。

to：收件的邮箱，多个邮箱用英文逗号分开。。

Subject：邮件标题。

message：在这里留信息。

Email to：把访客在前台页面的留言，通知你有新的询盘信息了。

From Email：这是发件人邮箱，也就是 WP mail smtp的发件人邮箱。

From Name：你的网站名字。

Reply to：当你收到系统通知邮件，点击回复时，应该回复给哪个邮箱。这里通常选择 email field，也就是填写表单的客户。

cc Bcc：抄送、密送。

meta data：询盘通知邮件中应该展示的内容。包括询盘日期、具体时间、页面url、访问代理信息、用户IP等。

在这里甚至你可以设置用户提交表单后，跳转到哪个页面等比较复杂的多个步骤。

Elementor全局表单

另存为全局表单后，当鼠标点选表单，左侧会出现两个按钮，绿色的是全局表单，进入编辑后，网站所有使用这个表单的内容都会自动随着发生相应的改变。

红色的 unlink是解锁全局表单，解锁后就变成独立表单，修改只对当前表单自己有效，不再影响全局表单。

点击工具栏右上角的九宫格，点击 global全局，把现有的表单拖拽到右侧想要放表单的位置即可。

这样就实现了一个全局小工具可以用到多个地方，只修改一处所有页面都会相应变化，用起来很方便。

Elementor Form样式设置

样式是对表单的字体、颜色、样式、背景、行间距、边框弧度等方面的设置。

Form（表格样式）

Column Gap – 设置列之间的间距
Row Gap – 设置行间距
标签– 设置标签 的间距、标签颜色和排版。
HTML 字段 – 设置表单上 HTML 字段的间距、颜色和排版（如果存在）。

Field（设置表单域的颜色、字体和边框的样式）

文本颜色- 设置输入文本的颜色（用户填写的文本）
排版– 设置输入文本的排版
背景颜色- 设置字段的背景颜色
边框颜色- 设置字段的边框颜色
边框宽度- 设置字段边框的宽度
Border Radius – 设置边框的半径

Button（为提交按钮设置正常 和 悬停 状态的样式）

背景颜色 – 设置背景颜色
文本颜色 – 设置文本的颜色
排版 – 设置文本的排版
边框类型 – 在不同的边框样式之间进行选择。
边框宽度 – 如果设置了边框，则设置字段边框的宽度
边框颜色 – 设置字段的边框颜色
Border Radius – 设置边框的半径
文本填充 – 设置文本的填充

Messages（在提交表单后设置显示给用户的消息的样式）

排版：设置消息文本的排版。
成功消息颜色：选择成功消息的颜色
错误消息颜色：选择错误消息的颜色。
内嵌消息颜色：选择内嵌消息的颜色。

advance 高级设置用到的比较少，就不详细介绍了。

Elementor Form表格提交的数据在哪里

Elementor Form 默认的 Action after submit 选项卡中，如下图所示，Collect Submissions 是 Elementor自带的表单提交数据收集器，Email 可以把表单提交的数据发送到 WordPress的站长邮箱中。

当前台页面有提交表单数据后，在 WordPress后台的 Submissions 中就可以看到相关数据。

这样就省下一个数据收集插件。

Elementor Form表单总结

Elementor 表单生成器很好用，大概有以下几个特点：

• 能满足绝大多数人对表单的需要。
• 能够在 Elementor界面中创建表单，用起来方便又快捷。
• 如果你已有 Elementor Pro，那么再也不用安装购买额外的第三方表单插件，避免出现意外问题。
• 如果还没有购买 Elementor Pro，那么点击立即购买一个并使用。

在本文中老魏分享了如何使用 Elementor联系表单，作为外贸独立站优化中极其重要的一环，这个功能值得我们花点时间仔细研究，吸引访客留言发询盘，同时搜索引擎也关注网站交互情况，总而言之对网站SEO优化和提高转化率都有一定好处。