如何使用 Divi 的联系表格模块创建报价表格

报价表（又名请求报价表）是一个很好的解决方案，适用于希望获得合格潜在客户而无需接听电话的小型企业。 一个好的报价表可以通过提出正确的资格问题来挑选出那些还没有准备好为您服务的坏蛋。 它还可以帮助确定客户的需求，以便您可以准备有效的响应/报价，并在您通过电话与他们联系后完成销售。

有许多很棒的表单插件专门用于表单处理。 但是，如果您正在为您的 Divi 站点寻找简单有效的解决方案，Divi 更新的联系表单模块正是您所需要的。

今天，我将引导您完成使用条件逻辑构建简单而强大的报价表以更好地限定潜在客户的过程。 我还将使用自定义 CSS 添加一些高级设计功能，这将使表单更加清晰和可读。

让我们开始吧。

使用 Divi 实现设计

构建全屏标题部分

报价单可以添加到任何页面，但对于这个例子，我将使用一个专门的页面来显示报价单。

为了欢迎访问者，我使用了强制用户单击按钮或滚动以查看表单的全屏标题。 这是一个很酷的功能，可以创建更个性化的体验，并使用户在看到表单之前接受滚动和单击的想法。 在某些情况下，当我到达一个只有很长的表格需要填写的页面时，这似乎有点不吸引人且难以抗拒。 这当然是可选的，我肯定会测试它，看看它是否在没有全屏标题的情况下转换得更好。

使用 Visual Builder，将全角部分和全角标题模块添加到页面顶部。

更新全角标题设置如下：

内容选项

标题：[输入标题； 尝试更个性化，而不是像“报价表”这样无聊的标题]
副标题文字：[输入副标题文字]

按钮 #1 文本：[输入按钮文本； 像“给我看”或“让我们做这个”]
按钮 #1 URL：#quote（这将用于锚 CSS ID，它将滚动到包含以下表单的部分）
标志图片网址：[输入标志图片]
背景叠加：rgba(0,0,0,0.7)
背景图片：[上传您的 1920 x 1080 背景图片]

设计选项

文字和标志方向：中心
全屏显示：是
显示向下滚动按钮：是
图标：[选择图标]
向下滚动图标颜色：#999999
文字颜色：浅
标题字体：Ubuntu
标题字体大小：36px
副标题字体：Ubuntu
副标题字体大小：22px
为按钮一使用自定义样式：是
按钮一文字大小：20px
按钮一文本颜色：#ffffff
按钮一背景颜色：#e09900；
按钮一边框颜色：#e09900
按钮一个字母间距：1px
按钮一字体：Ubuntu

保存设置

构建报价表

现在对于报价表，我们将使用 Divi 的联系表模块。 首先，我们需要添加一个带有全角（1 列）行的常规部分。 然后将联系表单模块添加到该行。

更新联系表设置如下。

内容选项？

标题：[为您的联系表单定义标题或添加其他说明]
提交按钮文本：获取报价
电子邮件：[输入应发送消息的电子邮件地址]
启用重定向 URL：是（这是可选的，但一个好主意）
重定向 URL：[输入重定向 URL 到自定义感谢页面]

设计选项

标题字体：Ubuntu
标题字体大小：30px
标题字母间距：1px
表单字段字体：Ubuntu
表单域字体大小：24px
表单域文本颜色：#e09900
输入边框半径：5px
使用边框：是
边框颜色：#999999
边框宽度：1px
为按钮使用自定义样式：是
按钮文字大小：24px
按钮文字颜色：#ffffff
按钮背景颜色：#e09900；
按钮边框颜色：#e09900
按钮字母间距：1px
按钮字体：Ubuntu

高级选项（自定义 CSS）

验证码字段：

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

验证码文本：

Font-size: 24px

保存设置

添加报价表单字段

不是你有你的设置，是时候添加我们的表单项了。 默认情况下，表单包含字段“名称”、“电子邮件”和“消息”。 您可以删除“消息”。

公司领域

在“电子邮件”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID ：公司
标题: 你们公司的名字是什么？
必填字段：是

服务领域

在“公司”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID ：服务
标题: 今天有什么可以帮到你的吗？
类型：单选按钮
选项：

• 网站制作
• 应用程序开发
• 艺术方向
• 视频创作

必填字段：是

艺术目的领域

在“服务”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID : art_purpose
标题: 你需要什么样的艺术指导？
类型：单选按钮
选项：

• 平面设计
• 广告
• 品牌推广
• 包装

必填字段：是
启用条件逻辑
关系：任何
规则：今天我们可以为您提供什么帮助？ > 等于 > 艺术指导

注意：每当用户从上一个问题中选择“艺术指导”时，此逻辑就会显示此字段。

网页用途字段

在“art_purpose”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID ：web_目的
标题: 你需要什么样的网站？
类型：单选按钮
选项：

• 电子商务
• 博客
• 网络应用程序
• 登陆页面

必填字段：是
启用条件逻辑
关系：任何
规则：今天我们可以为您提供什么帮助？ > 等于 > 网站制作

注意：只要用户从上一个问题中选择“Web Production”，此逻辑就会显示此字段。

视频领域

在“web_purpose”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID : 视频
标题: 您希望在什么设备上显示视频？
类型：单选按钮
选项：

• 手机
• 药片
• 显示器或电视
• 投影仪

必填字段：是
启用条件逻辑
关系：任何
规则：今天我们可以为您提供什么帮助？ > 等于 > 视频创作

注意：只要用户从上一个问题中选择“视频创建”，此逻辑就会显示此字段。

应用平台领域

在“视频”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID ：app_platform
标题: 您希望应用程序在什么平台上开发？
类型：单选按钮
选项：

• IOS
• 安卓
• 视窗
• 黑莓

必填字段：是
启用条件逻辑
关系：任何
规则：今天我们可以为您提供什么帮助？ > 等于 > 应用程序开发

注意：只要用户从上一个问题中选择“App Development”，此逻辑就会显示此字段。

预算字段

在“app_platform”字段下添加一个新字段并更新内容选项下的设置，如下所示：

字段 ID ：预算
标题: 如果您有预算，请告诉我们。
类型：单选按钮
选项：

• 不到 1000 美元
• 约 5000 美元
• 超过 1 万美元

必填字段：否
启用条件逻辑
关系：任何
规则：
我们今天如何帮助您？ > 等于 > 应用程序开发
我们今天如何帮助您？ > 等于 > 视频创作
我们今天如何帮助您？ > 等于 > 网站制作
我们今天如何帮助您？ > 等于 > 艺术指导

保存设置

添加锚 CSS ID

返回并编辑包含表单的部分的部分设置。 在“高级”选项卡下，输入 CSS ID“quote”。

这将对应于全角标题中的按钮 url，以便按钮在单击时滚动到该部分。

为报价单列设置自定义宽度

接下来，转到包含报价单的行的行设置并更新设计选项，如下所示：

使用自定义宽度：是
自定义宽度：556px

额外的设计定制

对于此报价表，我们使用单选按钮，一旦单击单选按钮/圆圈，圆圈填充物的颜色对应于您在主题定制器 > 常规设置 > 布局设置 > 下的站点主题强调色

如果您不想在站点范围内更改单选按钮填充颜色的主题强调色，请转到“页面设置”并在“CSS”选项卡中输入以下自定义 CSS：

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

此外，您可以添加以下 CSS 来自定义包含单选按钮的问题的标题文本：

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

最后，您可以向单选按钮列表添加样式边框以匹配具有以下 CSS 的表单样式：

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

就是这样。

查看最终结果：

最后的想法

此报价表是您可以使用报价表执行的操作的简化示例。 对于您自己的报价单，您可能需要添加额外的字段，例如“电话号码”，以便您可以给潜在客户回电。 您还可以使用更多条件逻辑来获取有关客户需求的更具体信息。

就像我在文章开头所说的那样，还有更高级的插件。 出于某种原因，整个公司都专注于强大的联系表单解决方案。 我希望这篇文章有助于展示联系表单模块如何能够处理您的大多数标准联系表单需求。