如何在WordPress表單中添加圖像選擇


最近,一位讀者問我們如何在其WordPress表單中添加圖像選擇。 也許這也是您想知道的。

圖像不僅可以顯示文本選擇,還可以立即使您的表單更具吸引力。 這可以幫助您提高響應率和表格轉換。

在本文中,我們將向您展示如何以WordPress表單添加圖像選擇以提高參與度和轉化率。

如何輕鬆地以WordPress形式添加圖像選擇

什麼是圖像選擇?為什麼要在表單中使用它們?

圖像選擇是用戶在填寫表格時可以選擇的照片,插圖,圖形或圖標。

這是使用圖像選擇而不是常規文本選擇的表格。 首選草莓:

表格中使用的圖像選擇示例:顯示6種水果選項的彩色圖像

圖像選擇在很多方面都可以是一個優勢。 在任何情況下,它們都可以使您的表單更具吸引力和視覺吸引力。

使用圖像還可以使您的表單看起來更加優美和專業。 它們還可以幫助用戶更快地做出決定。

例如,如果您經營一家提供外賣的餐廳,則需要在網站上有一份訂購單。 您可以使用不同菜餚的圖像來幫助潛在客戶選擇他們想要的東西。

選擇圖像可以使讀者更輕鬆地填寫表格,特別是對於閱讀困難或不懂您的語言的聽眾。

影片教學

訂閱WPBeginner

如果您喜歡書面說明,請繼續閱讀。

向您的WordPress表單添加圖像選擇

在本教程中,我們將使用WPForms插件。 它是市場上最好的WordPress表單構建器插件,可讓您使用簡單的拖放表單構建器輕鬆創建表單。

首先,您需要安裝並激活WPForms插件。 如果您不確定該怎麼做,可以在我們的指南中獲取有關如何安裝WordPress插件的逐步說明。

WPForms是高級WordPress插件。 他們還提供了一個名為WPForms Lite的免費版本,該版本還具有圖像選擇功能。

使用WPForms創建表單

激活插件後,轉到 WPForms»添加表格 WordPress儀表板中的頁面以創建新表單。

使用WPForms創建一個新表單

首先為您的表單提供一個名稱,然後單擊以選擇一個模板。 我們將以“簡單聯繫表”為起點。

使用簡單聯繫表單模板

這將啟動預加載了表單字段的WPForms構建器界面。 您可以通過單擊,上下移動或刪除它來編輯任何表單字段。

使用WPForms的聯繫表單模板創建的默認表單

接下來,我們將添加一個多選字段,以便客戶可以選擇他們想要的水果類型。

注意: 圖像選擇也可以與“複選框”字段一起使用。 如果您希望用戶能夠選擇多個選項,請使用該選項。

要添加該字段,只需將多選字段從屏幕左側的“標準字段”部分中拖放。 我們將其放置在“評論或消息”框的上方。

將多選字段添加到表單

如您所見,默認情況下,多選字段具有文本選項。 如果單擊該字段進行編輯,則會在屏幕左側看到該字段選項。

編輯表單的多項選擇字段

在這裡,您只需要選中“使用圖像選擇”複選框,WPForms就會自動更新該字段。

WPForms中的“使用圖像選擇”選項

您可以在字段文本標籤中鍵入所需的任何內容,然後單擊“上傳圖像”按鈕。 您可以從計算機上載圖像,也可以從WordPress媒體庫中選擇一個圖像。

上載表單上不同選擇的圖像

我們建議使用不超過250px x 250px的.jpg或.png圖片。 如果圖像大小相同,則它們在表單中的顯示效果最佳。

重要: WPForms不會調整圖像大小。 上傳之前,您需要確保它們的大小與您想要的大小相同。 或者,您可以在WordPress本身中編輯圖像,然後再將其添加到表單中。

如果要包含三個以上的選項,只需單擊(+)按鈕即可添加新選項。 您可以使用(-)按鈕刪除選擇。

在表單中添加更多選擇選項

更改圖像選擇在表單上的顯示方式

WPForms使您可以從“高級選項”選項卡輕鬆更改圖像選擇的佈局和其他設置。

打開“高級選項”以微調圖像的顯示方式

如果要隨機顯示圖像選擇而不是按特定順序顯示,則可以選中“隨機選擇”框。 如果要創建調查,並且希望消除結果中的首選偏差,這將很有用。

在“圖像選擇樣式”下,您可以選擇要如何設置圖像樣式。 默認樣式為現代,選擇了“草莓”選項後,外觀如下所示:

應用了默認現代風格的圖像選擇

您可以改為選擇“經典”樣式,當選擇“草莓”選項時,外觀如下所示:

應用了“經典”樣式的圖像選項(較粗的邊框,沒有陰影,沒有粗體文本,沒有選中標記)

或者,您可以選擇“無”作為樣式。 在這種情況下,您的圖像將只是沒有邊框或其他樣式的常規圖像。 標籤將顯示為單選按鈕。

沒有樣式的圖像選擇

如果需要,您還可以使用“選擇佈局”下拉菜單來更改選擇的佈局方式。 默認值為“內聯”,您的選擇會彼此相鄰出現,直到它們換行。

您可能會選擇在多列中顯示您的選擇。 如果您想要一個垂直列表,只需從下拉列表中選擇“一列”即可。 您的圖像選擇將如下所示:

單個垂直列中的圖像選擇

您還可以在此處選擇“隱藏標籤”以選擇圖像。 這意味著圖像下方不會有任何文本。 在某些情況下,這樣做可能很有意義。 例如,您可能要求人們投票給他們最喜歡的新徽標設計。

不過,請確保您確實輸入了相關且有用的標籤。 這將顯示為圖像的替代文本,使視障用戶可以更輕鬆地訪問您的網站。

在表單上添加,刪除或編輯字段

您可以添加,刪除或編輯表單上的字段。 要編輯一個字段,只需單擊它。

例如,您可能希望將“註釋或消息”字段更改為可選字段並使用其他標籤。 單擊該字段後,可以在屏幕左側對其進行編輯。

只需鍵入您要使用的標籤,然後取消選中“必填”框即可將該字段設為可選。

在WPForms中編輯“註釋或消息”字段

要刪除字段,請將光標移到該字段上,然後單擊紅色的垃圾桶圖標。

刪除WPForms中的字段

對錶單滿意後,請點擊屏幕頂部的“保存”按鈕。

將您的表格添加到您的網站

您只需單擊幾下即可將表單添加到網站上的任何帖子或頁面上。 我們將為我們創建一個新頁面。

頁»添加新,然後單擊(+)按鈕將一個阻止添加到您的頁面。

在“小部件”部分下找到WPForms塊,或使用搜索欄進行搜索。 然後,只需單擊該塊即可將其添加到您的頁面。

將WPForms塊添加到您的頁面或帖子中

接下來,單擊“選擇表單”下拉菜單,然後單擊表單名稱以將其選中。 我們在這裡使用水果盒訂購表。

從WPForms下拉列表中選擇所需的表單

現在,您可以發布頁面了,並可以在您的站點上實時查看表單。 這是我們的樣子:

表格中完成的圖像選擇

如果要更改表單,可以在下面找到 WPForms»所有表格 在您的儀表板中。 保存更改後,您的表單也會自動在您的頁面上更新。

我們希望本教程可以幫助您學習如何以WordPress形式添加圖像選擇。 您可能還會喜歡我們有關如何在WordPress中創建調查的指南,以及關於最佳WordPress頁面構建器插件的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。