設計聯絡表單

在新增聯絡表單後，便可自訂該表單的外觀。本指引將說明如何變更網站表單的樣式、色彩和版面形式。

「表單」區塊包含各種不同的表單設計樣式，任君選擇：

1. 選取編輯器左上角的「清單檢視」。該圖示看起來像三條橫線。
2. 在此找到「表單」區塊，然後在區塊上按一下：

3. 在右側邊欄的區塊設定中，按一下「樣式」分頁 (黑白圓圈圖示表示)：

4. 選擇一個樣式：
   • 「預設」會在輸入欄位外顯示欄位名稱，沒有動畫。
   • 「動畫」會在輸入欄位內顯示欄位名稱，提供簡短動畫，也會將訪客點擊的欄位加上醒目提示。
   • 「外框線」會在輸入欄位內顯示欄位名稱，提供簡短動畫，並且持續在表單區塊設定周圍加上外框線。
5. 按一下畫面頂端的「儲存」按鈕。

預留位置文字是範例文字，該文字會在訪客點選前顯示於表單欄位中，當訪客點選時這些文字會自動消失，訪客便可開始輸入訊息。為訪客提供範例文字，讓他們了解建議在表單中輸入的內容類型有助提高表單成效。

若要為聯絡表單新增預留位置文字：

1. 按一下表單中的任一欄位。
2. 在側邊欄中開啟區塊設定。
3. 向下捲動至「預留位置文字」設定。
4. 在顯示的方塊中輸入預留位置文字。該文字便會顯示在表單欄位中。
5. 按一下畫面頂端的「儲存」按鈕。

依預設，表單中的欄位會填滿表單容器的寬度。如要變更個別欄位寬度，可按照下列步驟操作：

1. 按一下表單中的任一欄位。
2. 在側邊欄中開啟區塊設定。
3. 向下捲動至「寬度」設定，並將寬度設定為 25%、50%、75% 或 100%。
   • 如果想要兩個欄位並排顯示，請將每個欄位寬度設為 50%。如果還有空間，則可在單行顯示多個欄位。
4. 按一下畫面頂端的「儲存」按鈕。

你可以針對個別表單欄位編輯顏色和文字顯示方式，也可以設定讓每個表單欄位使用相同的顏色和文字設定。

只要在每一個表單欄位上按一下，「區塊」設定便會加入「同步欄位樣式」切換按鈕。若此按鈕已切換至「開啟」，則你對此欄位所做的變更將會套用至所有欄位。如果只想變更該欄位的設定值，請將按鈕切換至「關閉」：

你可以同步處理所有欄位的下列變更，以維持表單視覺體驗的一致性：

• 顏色：為以下項目設定顏色：
  • 標籤文字：顯示在表單欄位上方的文字。
  • 欄位文字：(可留空) 預留位置文字，以及欄位中的輸入文字。
  • 欄位背景：表單欄位輸入區段的背景。
  • 邊框：表單欄位周圍的邊框。
• 輸入欄位樣式：設定欄位的文字大小、行高和邊框樣式。
• 標籤樣式：設定欄位標籤的文字大小和行高。

若要調整表單顏色，請採取下列步驟：

1. 開啟「清單檢視」，並瀏覽至「表單」區塊及該區塊所含的個別欄位：

2. 選取整個「表單」區塊，然後開啟側邊欄中的區塊設定，接著按一下「樣式」分頁 (黑白圓圈圖示)。
3. 你可以使用顏色設定來控制表單的文字顏色、背景顏色以及表單中所使用的連結顏色：

4. 接下來，在個別的表單欄位上按一下，然後重新開啟區塊設定。
5. 你可以在此控制個別表單欄位的下列顏色：
   • 標籤文字：顯示在表單欄位上方的文字。
   • 欄位文字：(可留空) 預留位置文字，以及欄位中的輸入文字。
   • 欄位背景：表單欄位輸入區段的背景。
   • 邊框：表單欄位周圍的邊框。
6. 啟用「同步欄位樣式」切換按鈕，即可將變更套用至所有欄位，或者也可選擇停用此切換按鈕，對每一個欄位進行個別設定。
7. 按一下畫面頂端的「儲存」按鈕。