如何使用 vw 和 vh 長度單位在 Divi 中設計響應式聯繫表單
已發表: 2019-06-12Web 表單對您網站的成功至關重要。 考慮到大多數在線業務依賴於電子郵件選擇和聯繫表格等形式通過建立電子郵件列表和與潛在買家溝通來賺錢，這是有道理的。 而且，現在我們需要確保我們設計的響應式表單在所有瀏覽器和移動設備上看起來都很棒。
在本教程中，我將向您展示如何在 Divi 中使用 vw 和 vh 長度單位設計響應式聯繫表單。 我們將介紹如何根據瀏覽器的寬度和高度調整輸入字段和按鈕的大小和間距。 這將使您能夠最大限度地提高表單在所有設備上的可見性，即使是手機上的橫向視圖。
為此，我們將使用 Divi 的內置設置，它允許您輕鬆自定義表單文本、字段和按鈕。
讓我們開始吧。
搶先看
桌面
藥片
電話（縱向）
電話（橫向）
免費下載響應式聯繫表單佈局（也包括響應式電子郵件 Optin 表單！）
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。
讓我們進入教程好嗎？
你需要什麼開始
首先，您需要進行以下設置：
- 已安裝並激活 Divi 主題
- 在前端從頭開始構建的新頁面（可視化構建器）
- 您最喜歡的飲料（可選，除非您還沒有喝咖啡）
之後，您將有一個空白畫布開始在 Divi 中構建響應式表單。
為什麼在響應式設計中使用 vw 和 vh 長度單位
長度單位是調整網頁上元素大小和間距所需的值。 網頁設計中最常用的長度單位可能是像素和百分比。 例如，像素是用於調整文本大小的常用長度單位，em 長度單位通常用於行高，百分比長度單位通常用於響應式設計的間距和大小調整元素。 事實上，Divi 元素（模塊、行、節）的默認長度單位值是使用這些常見的長度單位構建的。
長度單位將是絕對的（無論其他元素的大小如何都保持相同的大小）或相對的（根據其他元素的大小變化/縮放）。 例如，一個像素是一個絕對長度單位。 因此，如果文本正文的字體大小為 16 像素，則無論其容器的大小如何，文本都將保持為 16 像素。 但百分比和 em 都是相對長度單位。 因此，具有 em 值的行高將隨著元素文本大小的變化而調整。 由於百分比也是一個相對長度單位，寬度為 80% 的行將是其容器（或部分）的 80%。
vw 和 vh 長度單位也是相對長度單位，但不是相對於元素父容器，而是相對於實際瀏覽器視口。 視口寬度 (vw) 相對於瀏覽器的寬度，視口高度 (vh) 相對於瀏覽器的高度。 使用這些長度單位是使您的設計在所有瀏覽器上保持一致的一種方法，因為它會根據視口進行縮放。 這使得每個元素的大小更可預測且易於管理，而不必擔心在每個設備或響應斷點上為每個元素提供不同的大小。 vh 長度單位對於手機顯示器特別有用，因為它會考慮手機在縱向和橫向視圖中的視口的高度。
這種技術最適用於依賴於桌面上的大全寬顯示的設計，當用戶調整瀏覽器寬度時，縮放會平滑地縮放大小。
有關長度單位的更詳細說明，請查看有關在 Divi 中使用長度單位的指南。
第 1 部分：在 Divi 中設計響應式聯繫表單
創建部分和行
創建一個具有一列行的常規部分。 在添加任何模塊之前，請按如下方式更新部分設置：
背景漸變左顏色：#fd7b5b
背景漸變右側顏色：#a92200
然後打開行設置並給它背景漸變。
背景漸變左顏色：#ffdb8b
背景漸變右側顏色：#fdb15b
接下來，讓我們使用 vw 長度單位調整行的大小，使其隨瀏覽器縮放。
寬度：66vw（桌面）、66vw（平板）、100%（手機）
最大寬度：66vw（桌面）、66vw（平板電腦）、100%（手機）
最小高度：100vh（手機）
填充：0px 頂部，0px 底部
66vw 值將確保該行將保持瀏覽器視口寬度的大約三分之二。 手機顯示屏上的 100vh 值將確保行高等於手機視口的高度（可選，但對於手機上行內容區域的最佳顯示效果很好）。
請注意，行的寬度設置為 100%（不是 100vw）。 這是因為當您向下滾動頁面時，100vw 不會考慮滾動條的寬度。 因此，對於全角顯示使用百分比總是更好。
創建聯繫表單
行就位後，我們現在可以將聯繫表單模塊添加到行中。
添加聯繫表單後，將內容更新為標題並禁用驗證碼。
標題：聯繫我們
顯示驗證碼：否
使字段全寬
對於此設計，我將使用全角字段。 這將允許我在字段之間添加一致的間距（因為沒有使用浮動），並且它允許我為每個字段提供自定義寬度，以便稍後進行獨特的設計。 現在，打開姓名和電子郵件字段的設置，並將“製作全角”選項設置為“是”。
優化響應式設計的領域
現在返回聯繫表單設置。 現在我們可以使用 vw 和 vh 長度單位自定義表單字段。 更新以下內容：
字段文本顏色：#333333
字段邊距（桌面和平板電腦）：2vw 頂部，2vw 底部
場邊距（電話）：2vh 頂部，2vh 底部
字段填充（桌面和平板電腦）：1vw 頂部，1vw 底部，2vw 左，2vw 右
字段填充（電話）：2vh 頂部，2vh 底部，2vh 左，2vh 右
字段文本大小：2.5vw（桌面），4vh（手機）
注意：使用 4vh 手機將允許您的文本大小隨手機顯示屏的高度縮放，這將有助於在橫向手機顯示中查看表單（將手機側向轉動）。 但是，如果您想要更一致的文本大小，您可能需要為手機顯示屏上的字段文本大小使用像素長度單位。
設計標題文本
對於標題文本，自定義以下內容：
標題標題級別：H2
標題字體：Karla
標題字體粗細：粗體
標題文字顏色：#f56845
標題文字大小：7vw（桌面），8vh（手機）
標題字母間距：1vw
標題行高度：0.6em
為響應式設計優化按鈕
對於聯繫表單按鈕，我們將添加類似於我們之前設計的字段的間距和文本大小。
單擊以使用自定義按鈕樣式並更新以下內容：
按鈕文字大小：2.5vw（桌面），4vh（手機）
按鈕文字顏色：#ffffff
按鈕背景顏色：#333333
按鈕邊框寬度：0px
按鈕邊框半徑：0px
按鈕字體：蒙特塞拉特
按鈕邊距（桌面）：1vw 頂部，0px 左，0px 右
按鈕邊距（手機）：1vh 頂部
按鈕填充（桌面）：3vw 頂部，3vw 底部
按鈕填充（電話）：3vh 頂部，3vh 底部
按鈕框陰影：見截圖
框陰影水平位置：2em
框陰影垂直位置：0.4em
陰影顏色：rgba(245,104,69,0.29)
在聯繫表單中添加間距
接下來，使用 vw 長度單位和框陰影向表單字段添加一些填充聯繫人表單，如下所示：
填充（桌面）：3vw 頂部，3vw 底部，5vw 左，5vw 右
填充（電話）：頂部 5vh，底部 5vh，左側 3vh，右側 3vh
按鈕框陰影：見截圖
框陰影水平位置：2em
框陰影垂直位置：0.4em
陰影顏色：rgba(245,104,69,0.29)
到目前為止的結果
桌面
藥片
電話（縱向）
電話（橫向）
最後的潤色
調整表單域的寬度
對於獨特的設計選項，您可以自定義每個字段的寬度。 打開名稱字段設置並更新寬度，如下所示：
寬度：50%（桌面），100%（手機）
然後打開電子郵件字段設置並更新寬度，如下所示：
寬度：65%（桌面），100%（手機）
接下來，打開消息字段設置並更新寬度，如下所示：
寬度：80%（桌面），100%（手機）
使按鈕全寬
要使響應式聯繫表單按鈕全寬，首先我們需要將以下自定義 CSS 添加到聯繫按鈕輸入框：
width: 97%;
然後打開頁面設置，添加如下自定義css：
.et_contact_bottom_container {
float: none;
}
最終設計
現在我們已經完成了，查看我們的響應式表單的最終結果。 請注意在桌面和平板電腦上調整瀏覽器寬度時聯繫人表單如何縮放，以及在調整手機視口高度時設計如何調整。
桌面
藥片
電話（縱向）
電話（橫向）
對電子郵件選擇表單使用相同的設計設置
您也可以使用相同的 vw 和 vh 長度單位來設計響應式電子郵件選擇表單。 這是電子郵件選擇表單設計的屏幕截圖，包含在本文提供的免費下載中。
桌面
藥片
電話（縱向）
電話（橫向）
最後的想法
使用 vw 和 vh 長度單位，我們可以創建一個響應式聯繫表單（或任何 Divi 表單），在所有瀏覽器大小和移動設備上看起來都很棒。 當您調整瀏覽器寬度時，響應式設計將平滑地縮放表單元素。 而且，如果您在手機顯示屏上使用 vh 長度單位，您甚至還可以優化縱向和橫向手機顯示屏的形式。
不要忘記查看免費下載以獲取響應式聯繫表單和電子郵件選擇的工作示例。
希望這篇文章可以為您提供一些關於如何為您的下一個項目創建一些漂亮的響應式表單的提示。
我期待在評論中收到您的來信。
乾杯!