如何使用WPForms插件为WordPress表单添加图片

使用WPForms插件为WordPress表单添加图片，首先需要选择一张表单背景图片，之后打开WPForms插件新建一个表单，接下来通过复制图片URL在外观-自定义-添加CSS，最后用图片的实际URL替换/path/wpforms-backdrop.png就可以完成全部设置步骤了。

WPForms插件官网：点击直达

一、选择WordPress表单背景图片

在操作之前，商家需要选择一张图片作为表单背景，可以使用媒体库中的图片，也可以自己选择满意的图片进行上传。

需要考虑的事项：

为了最大化可读性，确保背景图片与表格中的文字或字段之间有足够的对比度。例如避免在浅色背景上使用浅色文字，建议在较浅的背景上使用较深的文字，在深色背景上使用较浅的文字。

二、选择WordPress表单形式

接下来选择想定制的WordPress表单，如果需要创建表单，请点击WPForms-添加新表单。

可以从众多可用的表格模板中选择一个来开始。

如果默认模板都不符合自己的要求，可以选择类似的模板，并在表单生成器中自定义。

三、为WordPress表单添加背景图像

在表单生成器中，进入设置-通用-高级。

在Form CSS Class中填写一个类别名称，建议添加wpf-作为前缀，这有助于避免自定义CSS代码与网站上的WordPress主题或插件之间的冲突。

注：为了避免其他问题，务必用字母开头，另外CSS中的类名是区分大小写的。

使用现有图像

如果想使用媒体库中的图片，需要完整的图片网址，要获取此信息，首先请从WordPress管理仪表盘访问媒体-库。

在这里点击自己想使用的WordPress表单图片。

在打开的对话框中，点击“复制URL到剪贴板”。

这会将图片的网址复制到剪贴板上。

注：

如需获取来自互联网其他来源的图片，请通过右键点击图片并点击“复制图片地址”来复制该网址。
看到的菜单文字可能会因浏览器而略有不同，不过它的功能和点击“复制URL到剪贴板”在媒体库里的显示是一样的。

完成后，回到WordPress独立站的仪表盘，选择外观-自定义，然后选择附加CSS。

接着创建一个带有属性的自定义类，用图片的实际URL替换/path/wpforms-backdrop.png。

/* 
Adding a background image to your forms.
Original doc link: https://wpforms.com/docs/how-to-add-a-background-image-in-wpforms/
For support, please visit: https://www.facebook.com/groups/wpformsvip
*/
.wpf-custom-background {
background-image: url(/path/wpforms-backdrop.png) !important;
padding: 15px 35px !important;
/*Padding is optional, but improves appearance when using a background image in your form.*/
}

设置样式如下：