如何使用 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 }

就是這樣。

查看最終結果：

最後的想法

此報價表是您可以使用報價表執行的操作的簡化示例。 對於您自己的報價單，您可能需要添加額外的字段，例如“電話號碼”，以便您可以給潛在客戶回電。 您還可以使用更多條件邏輯來獲取有關客戶需求的更具體信息。

就像我在文章開頭所說的那樣，還有更高級的插件。 出於某種原因，整個公司都專注於強大的聯繫表單解決方案。 我希望這篇文章有助於展示聯繫表單模塊如何能夠處理您的大多數標準聯繫表單需求。