如何使用條件邏輯創建多功能的 Divi 聯繫表

已發表: 2021-09-23

並非每個訪問者都出於同樣的原因訪問您的網站。 您可能會提供一系列產品或服務,而不僅僅是客戶和客戶的單一選擇。 這就是為什麼擁有多個有針對性的聯繫表單可以幫助您理順您網站的用戶體驗,以便您的客戶(和潛在客戶)可以盡可能少地與您聯繫,準確了解他們的需求。 使用 Divi 聯繫表單模塊和我們的條件邏輯功能,我們將引導您盡可能在您和您的用戶之間創建最佳管道。

有條件聯繫表格預覽

當一切都說完了,你的網站上就會有類似的東西,供訪問者使用。

桌面

移動的

什麼是條件邏輯?

首先,我們想簡要說明條件邏輯的含義。 我們在本教程中要做的是設置一系列聯繫表單,這些表單基於用戶做出或不做出的選擇而出現。

例如,您可以使用一個聯繫表單,根據訪問者需要的服務或產品進行調整。 這樣,您可以獲得所需格式的信息,而無需他們將其寫出來。 聯繫表單上的條件邏輯可以增強溝通並加快您為用戶提供服務的能力。

考慮到這一點,讓我們深入研究創建目標聯繫表單。

如何使用條件邏輯創建聯繫表單

加載 Divi Builder

由於我們使用的是 Divi Contact Form 模塊,因此我們需要進入 Divi Builder。 我們將使用 Landscape Maintenance 佈局包作為本教程中的示例。 您可以使用任何您想要的佈局或設計,但您需要能夠使用和設計 Divi 聯繫表單模塊。

首先從 WordPress 網站的後端輸入 Divi Builder。 在頁面編輯器中,您將看到一個紫色按鈕,上面寫著使用 Divi Builder (如果您已經創建了頁面,則使用 Divi Builder 進行編輯)。

使用 divi builder 編輯以添加聯繫表單

添加或查找聯繫表單模塊

然後,您需要找到頁面上已經存在的聯繫表模塊,或者單擊黑色 + 圓圈圖標並在下拉菜單中找到聯繫表

divi 聯繫表單模塊

輸入聯繫表設置

Divi 聯繫表單模塊默認帶有 3 個字段: NameEmailMessage 。 我們要做的是創建一個聯繫表單,在訪問者向我們提供足夠的信息以指導他們的查詢之前,這些選項不會出現。

divi 聯繫表選項

添加第一個條件問題

在“內容”選項卡和表單中已有的任何字段下方,您將看到“添加新字段”按鈕。 單擊那個。

添加新字段

這樣做會打開“字段設置”窗口,您應該會看到字段 ID標題條目的位置。 字段 ID適合您。 這就是模塊設置中顯示的內容,供您跟踪。 標題是訪問者將在表單前端看到的文本。 (標題也會出現在您提交表單時收到的電子郵件中。)

條件問題

我們將Field ID標記為“Conditional”,因為這是訪問者將在表單上看到的第一個問題。 他們對此的反應將決定他們接下來會看到什麼。 這是跟踪表單問題和答案流程的簡單方法。

添加字段選項

接下來,在內容選項卡下滾動到字段選項部分。 您將在此處添加可供用戶選擇的選項。 這些中的每一個都將觸發某些後續問題。 在這個例子中,我們使用複選框作為我們的輸入類型。 這意味著用戶可以根據需要選擇任意數量。

選擇字段類型

除了Checkboxes 之外,Divi 還允許其他選項:用於用戶自己鍵入的響應的Input FieldTextarea,用於您提供的單一選項的Select DropdownRadio Buttons ,以及用於電子郵件地址輸入的Email Field 。 默認的Name字段是一個Input Field ,而Message是一個Textarea

選中復選框後,我們將輸入稍後要觸發不同選項的選項。 然後我們要確保這是一個必填字段,這樣用戶就不能過早提交表單。

聯繫表單字段選項

這裡需要注意的是,我們沒有在這一步中添加條件邏輯。 這是觸發器,因此無論如何它都會出現在用戶面前。

為條件響應添加新字段

但是,接下來,我們將為作為後續響應添加的新字段添加條件邏輯。 因為我們為初始問題包含了 3 個選項,所以我們將在表單中添加 3 個新的對應字段。 您將為每個步驟重複以下步驟。

新的答案字段

在新字段中命名條件響應

請注意,我們使用了Conditional 1的命名約定(表示第一個條件觸發器),然後使用1a1b1c用於後續響應。 我們還適當地標記了它們,以便我們可以跟踪它們是什麼。

有條件的問題

與第一個問題一樣,我們還將輸入標題作為訪問者將看到的問題。

向響應字段添加條件邏輯

之後,向下滾動到該字段內容選項卡下的條件邏輯部分。 啟用Conditional Logic的開關。 然後,選擇此關係的關係,這意味著您可以將其設置為任意(任意數量的響應都可以使此選項彈出)或全部(僅響應的特定組合使此字段出現)。

如果您像我們一樣只使用單個觸發規則,則任何一個全部都將起作用。

聯繫表單的條件邏輯

Rules 下,您將看到觸發此字段的字段,在右側,您可以選擇將觸發它的選項。 中心是限定詞,如等於、不等於、小於、大於等。 對於此特定字段,我們選擇設置為條件 1的問題,然後選擇其中專門觸發此字段出現的選項。

對所有條件響應重複此操作

由於我們為單個條件問題添加了三個不同的響應,因此我們也將針對其他字段重複此確切過程。 僅為該選擇創建適當的相關響應。

設置聯繫表單 Fiends '姓名/電子郵件/消息' 出現

一旦您為條件邏輯設置了響應,我們希望訪問者實際上能夠提交表單。 為此,我們將調整NameEmailMessage字段中的條件邏輯。 每個設置的設置完全相同,因此您將再次重複此操作 3 次。

NameEmailMessage字段設置中,進入Conditional Logic 。 啟用它並添加盡可能多的對有條件的後續問題的最終回答。 在我們的例子中,我們有 3 個後續問題,因此我們使用了 3 個規則。

聯繫表單中後續跟進的條件邏輯

對於每條規則,選擇後續問題作為觸發器。 將限定符設置為is not empty ,表示只要訪問者回答了問題,就滿足條件。 這將使最後一個框變灰,表明任何答案都足夠了。

保存您的更改,並對您希望出現的任何字段重複此操作以允許表單提交。 就是這樣! 您的表單將立即根據用戶的需求進行調整。

最終結果

您可以在下面看到條件邏輯在實踐中是如何工作的。

桌面

移動的

包起來

聯繫表格是網站中最普遍的元素之一。 幾乎每個站點都有一個,並且幾乎每個站點都需要一個。 但並非每個用戶都出於同樣的原因訪問您的網站。 通過使用 Divi 的條件邏輯功能,您可以將您的聯繫表格自定義為一個多功能工具,供您的用戶與之交流。

您使用 Divi 條件邏輯功能製作了哪些表格?

Kubko/shutterstock.com 提供的文章特色圖片