跳到主要内容

最近,一位读者问我们如何在其WordPress表单中添加图像选择。也许这也是您想知道的。

图像不仅可以显示文本选择,还可以立即使您的表单更具吸引力。这可以帮助您提高响应率和表格转换。

在本文中,我们将向您展示如何在WordPress表单中添加图像选择以提高参与度和转化率。

如何在wordpress表单中添加图像选择
如何在wordpress表单中添加图像选择

什么是图像选择?为什么要在表单中使用它们?

图像选择是用户在填写表格时可以选择的照片,插图,图形或图标。

这是使用图像选择而不是常规文本选项的表单。首选草莓:

什么是图像选择
什么是图像选择

图像选择在很多方面都可以是一个优势。在任何情况下,它们都可以使您的表单更具吸引力和视觉吸引力。

使用图像还可以使您的表单看起来更加优美和专业。它们还可以帮助用户更快地做出决定。

例如,如果您经营一家提供外卖的餐厅,则需要在网站上有一份订购单。您可以使用不同菜肴的图像来帮助潜在客户选择他们想要的。

图像的选择可以使读者更轻松地填写表格,尤其是对于阅读困难或不懂您的语言的听众。

向您的WordPress表单添加图像选择

在本教程中,我们将使用WPForms插件。它是市场上最好的WordPress表单构建器插件,可让您使用简单的拖放表单构建器轻松创建表单。

首先,您需要安装并激活WPForms插件。如果您不确定该怎么做,可以在我们的指南中获取有关如何安装WordPress插件的分步说明。

WPForms是高级WordPress插件。他们还提供了一个名为WPForms Lite的免费版本,该版本还具有图像选择功能。

使用WPForms创建表单

激活插件后,转到WordPress仪表板中的WPForms»“添加表单”页面以创建新表单。

向您的wordpress表单添加图像选择
向您的wordpress表单添加图像选择

首先为您的表单提供一个名称,然后单击以选择一个模板。我们将以“简单联系表”为起点。

向您的wordpress表单添加图像选择
向您的wordpress表单添加图像选择

这将启动预载表单字段的WPForms构建器界面。您可以通过单击,上下移动或删除它来编辑任何表单字段。

向您的wordpress表单添加图像选择
向您的wordpress表单添加图像选择

接下来,我们将添加一个多选字段,以便客户可以选择所需的水果类型。

注意:图像选择也可与“复选框”字段一起使用。如果您希望用户能够选择多个选项,请使用该选项。

要添加字段,只需将多选字段从屏幕左侧的“标准字段”部分中拖放。我们将其放置在“评论或消息”框的上方。

向您的wordpress表单添加图像选择
向您的wordpress表单添加图像选择

如您所见,默认情况下,多选字段具有文本选项。如果单击该字段进行编辑,则会在屏幕左侧看到该字段选项。

Edit Multiple Choice Field
Edit Multiple Choice Field

在这里,您只需要选中“使用图像选择”复选框,WPForms将自动更新该字段。

Wpforms Use Image Choices
Wpforms Use Image Choices

您可以输入任何想要的字段文本标签,然后单击“上传图像”按钮。您可以从计算机上载图像,也可以从WordPress媒体库中选择一个图像。

Wpforms Image Choice Upload Image
Wpforms Image Choice Upload Image

我们建议使用不超过250px x 250px的.jpg或.png图片。如果图像大小相同,则它们在表单中的显示效果最佳。

重要提示: WPForms不会调整图像大小。上传之前,您需要确定它们的大小。另外,您可以在WordPress本身中编辑图像,然后再将其添加到表单中。

如果要包含三个以上选项,只需单击(+)按钮即可添加新选项。您可以使用(-)按钮删除选择。

Wpforms Add Option Multiple Choice
Wpforms Add Option Multiple Choice

更改图像选择在表单上的显示方式

WPForms使您可以从“高级选项”选项卡轻松更改图像选择的布局和其他设置。

Advanced Options Image Choices
Advanced Options Image Choices

如果要随机显示图像选择而不是按特定顺序显示,则可以选中“随机选择”框。如果要创建调查,并且希望消除结果中的首选偏差,这将很有用。

在“图像选择样式”下,您可以选择要如何设置图像样式。默认样式为Modern,在选择Strawberries选项的情况下如下所示:

Image Choice Style Modern
Image Choice Style Modern

您可以改为选择“经典”样式,当选择“草莓”选项时,外观如下所示:

Image Choice Style Classic
Image Choice Style Classic

或者,您可以选择“无”作为样式。在这种情况下,您的图像将只是没有边框或其他样式的常规图像。标签将显示为单选按钮。

Image Choices Style None
Image Choices Style None

如果需要,您还可以使用“选择布局”下拉菜单来更改选择的布局方式。默认值为“内联”,您的选择会彼此相邻显示,直到换行。

您可能会选择在多列中显示您的选择。如果您想要一个垂直列表,只需从下拉列表中选择“一列”即可。您的图像选择将如下所示:

Image Choice Single Column
Image Choice Single Column

您还可以选择“隐藏标签”来选择图像。这意味着图像下方将没有任何文本。在某些情况下,这样做可能很有意义。例如,您可能要求人们对他们最喜欢的新徽标设计进行投票。

不过,请确保您确实输入了相关且有用的标签。这将显示为图片的替代文本,使视障用户可以更轻松地访问您的网站。

在表单上添加,删除或编辑字段

您可以添加,删除或编辑表单上的字段。要编辑一个字段,只需单击它。

例如,您可能想将“注释或消息”字段更改为可选字段并使用其他标签。单击该字段后,可以在屏幕左侧对其进行编辑。

只需键入您要使用的标签,然后取消选中“必填”框即可将该字段设为可选。

Wpforms Edit Field
Wpforms Edit Field

要删除字段,请将光标移到该字段上,然后单击红色的垃圾桶图标。

Wpforms Delete Field
Wpforms Delete Field

对表格满意后,请点击屏幕顶部的“保存”按钮。

将您的表格添加到您的网站

您只需单击几下即可将表单添加到网站上的任何帖子或页面上。我们将为我们的页面创建一个新页面。

转到页面»添加新内容,然后单击(+)按钮将一个阻止添加到页面。

在“小部件”部分下找到WPForms块,或使用搜索栏进行搜索。然后,只需单击该块即可将其添加到您的页面。

将您的表格添加到您的网站
将您的表格添加到您的网站

接下来,单击“选择表单”下拉菜单,然后单击表单名称以将其选中。我们在这里使用水果盒订购表。

Wpforms Select Form From Dropdown
Wpforms Select Form From Dropdown

现在,您可以发布页面了,并可以在您的网站上实时查看表单。这是我们的样子:

Finished Image Choices Form
Finished Image Choices Form

如果要更改表单,可以在仪表板的WPForms»All Forms下找到它。保存更改后,表单也将自动在页面上更新。

回到顶部