如何使用 Divi 創建內聯聯繫表

已發表: 2017-07-14

主頁的英雄（或首屏）部分是主要的房地產。和大多數房地產開發商一樣，您希望最大化您的空間。這就是內聯聯繫表派上用場的地方。內聯表單基本上是一種所有字段或控件保持並排、內聯和左對齊的表單。這種緊湊的佈局非常適合增加主頁或登錄頁面的轉化率。

今天我將向您展示如何使用 Divi 的 Visual Builder 為您的網站創建內聯聯繫表格。完成這項工作所需的工作實際上就是調整表單字段的寬度和對齊方式。為此，我們將利用聯繫人模塊的設計功能，並在“高級”選項卡中添加一些自定義 CSS。

如果您是 Divi 的新手，請不要讓“高級”選項卡阻止您學習本教程。我已盡力使事情簡單明了。

享受。

這是內聯聯繫表單的外觀示例

在線聯繫表格

概念與靈感

如果您曾經不得不在網上購買汽車保險或搜索新房，您可能已經看到了一個內嵌表格，它有目的地緊湊，輸入字段最少，這樣您（用戶）就會更傾向於讓球滾動新報價。所以我想創建一個簡單的在線聯繫表單，它可以為 Divi 用戶做類似的事情。儘管此聯繫表無法執行諸如生成報價或拉出房屋列表之類的操作，但它確實滿足了希望為客戶或用戶提供簡單聯繫方式的企業主或博主的需求。

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

我們首先添加一個具有單列結構行的常規部分。

在線聯繫表格

由於我們的其餘元素在白色背景上很難看到，讓我們繼續，通過轉到“部分設置”並更新以下內容，將背景顏色添加到我們的部分：

內容選項

背景顏色：#006ea5

在線聯繫表格

保存設置

現在我們可以將我們的聯繫表單模塊添加到行中。

在線聯繫表格

更新聯繫表單設置如下：

內容選項

提交按鈕文本：“獲取報價”
電子郵件：[輸入應發送消息的電子郵件地址]
顯示驗證碼：否
表單背景顏色：rgba(255,255,255,0)

在線聯繫表格

設計選項

表單域字體：Lato
表單域字體大小：24px
表單字段文本顏色：#ffffff
輸入邊框半徑：3px
使用邊框：是
邊框顏色：#ffffff
邊框寬度：1px
按鈕文字大小：24px 桌面，20px 平板電腦，20px 智能手機
按鈕文字顏色：#0c71c3
按鈕背景顏色：#f4f11f
按鈕邊框寬度：3px
按鈕邊框半徑：3

在線聯繫表格

保存設置

返回內容選項卡並通過單擊字段欄右側的垃圾桶圖標刪除消息字段。然後通過單擊帶有位於各個字段欄下方的白色加號的灰色圓圈按鈕來添加新字段。這將是電話字段。

在線聯繫表格

更新字段設置如下：

內容選項

字段 ID：“電話”
標題：電話

在線聯繫表格

設計選項

製作全寬：否
允許的符號：僅數字 (0-9)

在線聯繫表格

高級選項

在Main Element框中輸入以下自定義 CSS ：

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

在線聯繫表格

保存設置

現在返回聯繫表單設置的內容選項卡，複製剛剛創建的電話字段並將其轉換為郵政編碼字段。

在線聯繫表格

更新字段設置如下：

內容選項

字段 ID：“郵編”
標題：郵政編碼

在線聯繫表格

高級選項

在Main Element框中輸入以下自定義 CSS ：

Max-width: 17%;
Margin-top: -1.5%;

在線聯繫表格

保存設置

到目前為止，我們已經調整了電話和郵政編碼字段的寬度和對齊方式。現在我們需要對 Name 和 Email 字段執行相同的操作。

轉到名稱字段設置並使用主元素框中的以下自定義 CSS更新高級選項：

Max-width: 20%;
Margin-top: -1.5%;

在線聯繫表格

保存設置

接下來轉到電子郵件字段設置並使用主元素框中的以下自定義 CSS更新高級選項：

Max-width: 20%;
Margin-top: -1.5%;

在線聯繫表格

保存設置

重要說明：請注意，用於每個字段的自定義 CSS 將 max-width 屬性設置為特定百分比。此百分比決定了您的字段與內容區域的寬度相關的寬度。例如，Divi 的默認內容區域是 1080 像素，因此名稱字段是 1080 像素的 20%。如果您想為內聯表單創建更多空間，了解這一點很重要。您需要做的就是根據需要調整 max-width 屬性的百分比值。

就快結束了。現在我們要做的就是清理包含表單的部分和行的間距。轉到“設計”選項卡下的“部分設置” ，並更新以下內容：

自定義填充：頂部 12 像素，底部 14 像素

在線聯繫表格

保存設置

現在轉到“設計”選項卡下的“行設置” ，並更新以下內容：

自定義填充：頂部 48 像素，右側 0 像素，底部 0 像素，左側 0 像素

在線聯繫表格

保存設置

使其具有響應性

因為這是一個水平表單，所以需要在移動設備上調整表單字段。要解決此問題，只需要一小段自定義 CSS 即可。轉到“高級”選項卡下的“頁面設置” ，然後在“自定義 CSS”框中執行以下操作：

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

以下是表單如何響應不同的屏幕尺寸。

在線聯繫表格

創建三字段內聯聯繫表

在線聯繫表格

現在您已經創建了一個包含四個字段的內聯表單，您可以通過更新幾個選項輕鬆地將其轉換為三個表單字段。以下是步驟：

編輯您剛剛創建的內聯表單或複制該表單。
刪除郵政編碼字段（現在您只有三個字段）
更新電話字段（或任何第三個字段）設置，在高級選項卡下，使用以下自定義 CSS
```
Main Element box:max-width: 25%;
float:left;
margin-top: -1.5%;
clear: none !important;
```
更新電子郵件字段（或任何第二個字段）設置，在高級選項卡下，在主元素框中使用以下自定義 CSS：
```
max-width: 25%;
margin-top: -1.5%;
```
更新名稱字段（或任何第一個字段）設置，在高級選項卡下，在主元素框中使用以下自定義 CSS：
```
max-width: 25%;
margin-top: -1.5%;
```

注意：請注意，每個字段的 max-width 屬性現在為 25%，以增加字段的寬度。

創建兩字段內聯聯繫表單

在線聯繫表格

您還可以通過更新一些選項將內聯表單轉換為兩個字段的表單。以下是步驟：

編輯您剛剛創建的內聯表單或複制該表單。
刪除郵政編碼字段和電話字段，以便您只有兩個字段（姓名和電子郵件）
更新名稱字段（或任何第一個字段）設置，在高級選項卡下，在主元素框中使用以下自定義 CSS：
```
max-width: 37%;
margin-top: -1.5%;
```
更新電子郵件字段（或任何第二個字段）設置，在高級選項卡下，在主元素框中使用以下自定義 CSS：
```
max-width: 37%;
margin-top: -1.5%;
clear: none !important;
```

添加其他字段類型

本教程主要針對常規輸入字段類型，但您可以輕鬆將其更改為不同的字段類型。例如，如果您想使用選擇下拉字段類型，您可以應用與其他字段相同的樣式。但是，您需要為該特定字段添加背景顏色 (#006ea5)，以便您可以看到選項。

這是下拉字段的樣子……

在線聯繫表格

最後的想法

根據我的經驗，內聯聯繫表格可以成為您業務的強大工具。有更高級的插件和更強大的選項，但如果另一個插件不是你的菜，並且更簡單的解決方案有意義，請試一試。希望你喜歡。

期待在評論中收到您的來信。