阳泉企业网站制作：如何使用Web代理布局将成本估算表单添加到站点

每个网络机构都必须就如何处理估算做出关键的决定。这几乎是客户在寻找新网站时想要知道的第一件事。

随着新的WebAgency布局包的发布，我受到启发，阳泉企业网站制作向您展示了如何集成成本估算表单。为了做到这一点，我决定使用一个流行的插件，名为WP成本估算和支付表。这个插件提供了许多伟大的定制功能。这个插件不仅可以根据用户的某些选择计算成本，还可以处理这些付款。而且，由于插件使用了短代码来嵌入表单，所以基本上可以使用DiviBuilder在我的页面上的任何地方嵌入表单。

在本教程中，我将向您展示如何轻松地设计专业成本估算表，并使用WebAgency布局包将其添加到您的网站。我甚至将向您展示如何定制表单以匹配您的站点的设计。

我们开始吧。

潜峰

查看网页代理版面上表格的偷偷摸摸的峰值。

设置

为了节省时间，我将从已经完成的以下步骤开始本教程：

1. 安装并激活divi主题

2. 安装并激活插件WP成本估算和支付表.

3. 下载Web代理布局包并将Web-Agency_All.json文件导入您的Divi主题库。

4. 为每个布局创建新页面。

5. 创建主菜单。

如果您对上面列出的安装程序感到困惑，您可以找到更详细的说明，说明如何通过签出以下内容来正确设置布局为新项目使用布局包的10个步骤.

一旦完成了上述步骤，就可以开始了。

注：如果您只对成本估算表单功能的集成感兴趣，而不是对布局包感兴趣，那么您仍然可以跟随本教程并学习如何使用插件将表单添加到任何网站。

如何使用Web代理布局将成本估算表单添加到站点

导入示例表单

要开始使用一些示例表单，您需要导入示例数据。插件的下载文件夹中包含了一个名为“示例_data_can_be_importd.zip“这就是导入示例表单所需的内容。

导航到E&P Forms Builder，并单击页面顶部的黄色ImportForms按钮。在弹出的“导入数据”框中，上载示例_data_can_be_importd.zip文件，然后单击绿色导入按钮。您应该看到出现了示例表单。提供在插件下载文件夹中，您可以找到您的插件zip文件。

复制我的估算表示例

接下来，单击列表中表单旁边的复制图标，复制My估测表单示例。

一般设置

在“窗体”设置下，在“常规”选项卡中更新以下内容。

· 标题：成本估算表格(或任何你想要的)

· 最高价格：留空(这是最大的成本将自动计算)

· 自动下一步：是的(这就消除了在某些步骤上单击下一步按钮的需要)

· 动画速度：0.1(这只是因为我认为默认速度太慢了)

保存更改

设计设置

现在单击“设计”选项卡，这样我们就可以对表单进行一些调整，以匹配我们网站代理布局的设计。

更新如下：

· 主色：#4046B9

· 文本颜色：#2a3443

· 介绍标题和工具提示颜色：#2a3443

· Google字体名称：蒙特塞拉特(这是为了匹配网页代理布局上的标题)

· 按钮上的闪光效果：没有(同样，这是为了匹配站点设计)

保存更改

填写其他重要设置

这个表单非常强大，在为您的站点创建表单时，您需要在自己的时间内完成大量的设置。您可以通过单击“窗体设置”下的其余选项卡来更改这些设置。

文本设置

在“文本设置”选项卡下，您可以编辑通过表单使用的所有副本和文本标签。

电子邮件设置

您还可以自定义如何处理电子邮件选项卡中的通知电子邮件，包括一个将表单与邮箱集成的选项。

最后一步

在这里，您可以自定义窗体最后一步的设置。这是一个步骤，通常显示您的评估的最终价格，并给用户一个行动的呼吁。在我们使用的示例中，主要的操作调用是输入他们的电子邮件地址，但是您可以为最后一步添加任何您想要的字段。

您也可以选择在这里设置您的支付网关，以便处理付款。这将导致用户实际支付估计的价格，然后和那里。

摘要设置

还可以选择在“汇总”选项卡下的最后一步中提供摘要。这将是有用的先进估计，有一个Olot的信息，您希望用户审查之前付款。

折扣券

在折扣券设置下，您可以创建新的优惠券代码并将它们分配给您的表单。

自定义表单步骤

由于这是预构建表单的阳泉网站制作副本，因此您将看到步骤管理器部分中已经显示的与不同逻辑跳转相连接的步骤。

第一步

第一步由颜色绿色指定(您可以通过悬停在步骤上并单击标志图标来指定一步为第一步)。在该步骤上悬停，您将注意到一个弹出导航菜单(就像您在Divi中的模块上悬停时一样)，使您能够编辑、复制、删除或将其链接到另一个步骤。

单击“编辑”图标编辑步骤设置。

在STEP选项下，您将看到该步骤的标题是“移动或网站？”。将此更改为“移动应用程序或网站？”为了更清晰。您还可以向此步骤添加描述，该描述将直接显示在选项标题文本下。

在Items列表部分，您将看到用户为完成此步骤而选择的项或选项。在本例中，选择是网站或移动应用程序。单击此处可编辑网站列表项。

一旦您单击编辑一个项目，您可以看到大量的选项可用。

注意Type选项。就像任何表单生成器一样，您可以更改要显示的项的类型。现在，我想保持图像类型。

还请注意组名。只能选择同一组中的一个项。将项目分配给同一个组(通过赋予它们相同的组名)将允许您提供一个选项列表，其中只能选择一个选项。由于列表项“网站”和“移动应用程序”具有相同的组名“web_或_site”，因此只能在活动表单上选择其中一个项目。而且，由于我们在常规设置中选择了“自动下一步”选项，一旦用户选择了组中的列表项之一，它将自动将其带到下一步。

通过选中ImageType，我们可以选择上传一个自定义图片作为我们的列表项。这是一个很好的机会添加我们的图片之一提供的网络代理布局。要做到这一点，您只需单击“上传图像”并从媒体库中添加新图像即可。

tint图像选项允许您向所有图像添加颜色覆盖，以便它们与常规窗体设置中的主颜色集相匹配。如果要保留图像的原始颜色，请将此选项切换到“否”。

你也可以在这里增加这个项目的价格价值。当选中时，价格值将添加到表单中。在这种情况下，我们不想增加这个选择的价格，因为我们只是澄清他们是否想要一个网站。

单击“保存”

特征步骤

回到步骤管理器，找到“功能”步骤。此步骤包含用户将选择以计算其新站点所需的所有功能的成本的项目列表。悬停在上面，然后单击“编辑”。

请注意项目列表中列出的功能。在这里，您将添加所有您想要提供的不同功能，然后为每个功能指定价格。这里的示例列表项都是图像类型，如第一步中的前一项。请注意，它们与前几个组不同，它们不是同一个组的一部分。这允许用户在单击下一步之前选择任意数量的选项。

单击此处编辑具有标题的第一个列表项分析学。请注意，这里有一个价格
分配给它的“150”。这将告诉表单在选择此特定项目时将其添加到总价值中。

如果单击以编辑其他三项，您将看到它们都有分配给它们的价格，因此如果在此步骤中单击多个功能/项，则每个附加的价格值也将添加到总价中。

连接步骤

回到Steps Manager并注意到第一步是链接到特性步骤。若要将一个步骤链接到另一个步骤，请在该步骤上悬停，单击链接图标，然后单击要连接的步骤。每个链接都可以使用特定的条件逻辑进行过滤，允许用户根据他们对某些元素的选择进行特定的步骤。

让我们看看链接条件，这是连接我们的第一步和我们的特性步骤。单击连接这两个步骤的线路上的链接图标。请注意，只添加了一个条件。此条件告诉窗体将用户带到
功能步骤，如果“网站”项目是选择在第一步。

根据自己的使用需要编辑步骤

您将需要完成并自定义我们使用的示例表单继承的所有步骤和特性，以满足您自己的需要。复制这个表格只是让球转得更快一点的一种方法。

将成本估算表单添加到“服务”页面

在你的网站上发布表单有三种方式。您可以将表单嵌入到页面中。您可以嵌入该表单的全屏版本，它将占用整个页面。或者，在单击页面上的链接或按钮时，可以将表单用作弹出窗口。这三种方法都需要使用短代码。

对于这个例子，我将向您展示如何将表单嵌入到Web代理布局的Services页面的新部分中。

抓取短代码

首先，我们需要抓住短代码。从窗体编辑器中，单击页面顶部的灰色短代码按钮，并复制将表单集成到页中的短代码。

将短代码添加到“服务”页面中作为新节

现在有了您的短代码，请确保保存窗体设置并转到“服务”页面。部署VisualBuilder并滚动到页面底部。删除包含联系人表单的部分。

然后添加一个具有一列布局的新的常规部分，并向该行添加一个文本模块。

在文本模块设置中，将短代码嵌入到内容框中。

现在，将“设计”选项卡下的H2设置更新为：

· 标题2：蒙特塞拉特

· 标题2字体样式：TT(大写)

就这样。

现在你有一个很好的成本估算表，就在你的网页上。颜色和字体与您网站的设计相匹配。

还不错!

别忘了表单设计器

尽管本教程中没有介绍表单设计器，但它是一个有用的特性，允许您自定义/设计表单的每个元素。它基本上是插件的视觉构建器的版本。您可以选择表单的某些元素，然后修改该特定元素的设计。此表单设计器的一个独特方面是能够根据元素的状态(默认、鼠标切换或焦点)更改元素的样式。您甚至可以在移动设备上测试表单的外观，就像Divi的可视化构建器一样。

通过单击窗体编辑器顶部的按钮，您可以随时访问表单设计器。

最后思想

拥有一个成本估算表作为一个网络代理可以是一个伟大的方式，以增加转换。而且它很容易创建与WP成本估算和支付形式插件。大量可用的选项将允许您为您的站点创建完美的表单。只要稍加调整，总体设计就可以与网络代理的布局完美匹配。

我希望您发现这个成本估算表对您自己的阳泉企业网站制作网站有帮助。