WordPress联系页面设置

3.5.1创建联系页面

这部分和前面的步骤一样，我们需要先再wordpress中创建联系页面

我们点击页面-新页面

输入名称之后点击发布

3.5.2使用WPforms编辑

然后我们点击WPforms，我们这里需要使用这个表单插件进行编辑

然后点击新增

然后我们在这里选择一个想要的表单模板，我们选择的是简单的联系表单

进来之后就是这样

我们点击名称

点击Advanced，字段大小选择大型

点击通用，修改标签和格式，格式选择简单

然后更改下电邮部分，点击电邮-Advanced，然后将字段大小选择为大型

再更改一下这个部分的名称

下一个部分也重复上面的操作，更改名称，字段大小选择大型

除了这些，我们还可以增加一些字段

我们点击添加字段

点击下拉，增加一个下拉字段

可以看到，表单的末尾已经增加了一个下拉的字段

我们长按这部分可以进行拖动，将这个字段拖动到email下方

点击-下拉-Advanced，将字段大小选择为大型

接下来我们来设置一下这部分的下拉选项和组件名称，点击通用进去修改

当然，你还可以点击这个加号，在该选项下新增一个下拉选项

设置好之后，我们可以点击一下保存，去预览一下页面的效果

左边这里有一个设置，我们可以在这里修改一下表单的相关信息

点击通知，我们可以在这里修改下相关的收信邮件和表单界面的名称

这个选项卡中，是可以给我们的表单配置一些其他的功能

我们根据自己的需求进行选择即可

然后是左侧的确认部分，这部分主要是当买家给我们发送邮件之后，我们也会给它回一封邮件，表示我们会尽快处理

如果我们需要更改邮件内容的话，在窗口中进行更改即可

设置好之后，我们点击保存

3.5.3使用elementor编辑

我们回到wordpress，找到页面，看到联系我们的页面，然后点击编辑

然后点击使用elementor编辑

编辑器装修流程

顶部区域设置

为了保持装修的一致性，减少工作量，我们可以直接将首页的顶部区域复制到联系页面，再进行更改

我们打开首页的elementor的编辑界面，然后找到顶部容器，点击复制

然后粘贴到联系我们的elementor编辑界面即可

粘贴好了之后就是这样

然后我们删除它里面的所有组件，只留下背景

然后再点击子容器，在高级设置-布局里，将内距改成0

然后我们加入一个标题文字的组件

更改文字内容为我们的页面名称，然后再调整一下它的文字颜色和样式

点击样式-排版，在里面进行更改

我们再在标题下方加一行小字内容

更改一下文本内容

然后再调整一下它的文字颜色和样式

然后点击封装它们的子容器，更改一下它的间距

然后在高级设置里再更改一下该容器的内距

表单区域设置

我们在这里添加一个容器，再在容器内添加两个子容器

然后再在布局-项目-方向，更改方向为水平

然后再分别点击两个子容器，在布局-容器中修改全宽度为50%

更改好之后就是这样

然后我们搜索加入一个WP的表单插件在第一个子容器中

然后我们在左侧点击选择表单，选择我们刚刚做好的表单

选择好之后就是这样，可以看到我们刚刚创建的表单已经添加进来了

然后我们点击第一个小容器，设置一下它的样式，我们点击样式-边框，我们这里需要设置一个圆角

按照图上设置，可以发现我们添加了一个阴影和圆角

我们点击这个笔，可以进入表单样式的修改

点击高级设置，修改一下表单的内距，使得页面看起来更美观

我们添加一个标题在第二个子容器

然后更改一下文字内容

点击第二个子容器，更改一下布局，我们点击布局-容器-主轴对齐，更改为居中

然后再添加一个图像组件进来

我们更改一下图像内容，这里设置一个客服样式的图片最佳

添加好之后，再点击第二个子容器，修改一下它的内距

客服评价区域设置

下面我们再放置一个客服评价的界面，因为刚刚我们已经在首页注册好了，所以我们也可以直接复制过来

粘贴好之后就是这样

这样，我们电脑端的页面就设置好了，之后我们需要再针对平板端和手机端做修改，修改逻辑都是一样的，所以我们就不做展示了，大家自行根据之前的逻辑修改即可