我是如何让用户在我的WordPress表单中拍摄实时照片和视频的

过去我总是让人通过电子邮件给我发照片。会员网站的头像、团队页面的半身照,甚至是简单的身份证验证图片——每一次都变成了一场来回的折腾。

人们会忘记添加附件。或者发来的照片尺寸太大。有时候他们会发截图而不是真正的图片,画质就会很差。

后来我意识到可以通过我的WordPress表单让人们拍照和录制视频。他们只需点击按钮,拍照(或录制短视频),就完成了。

在本教程中,我将向你展示如何将这个摄像头拍照功能添加到你的WordPress表单中,这样你就可以省去我经历的所有麻烦。

how to capture live photo video featured

为什么要在WordPress表单中添加实时摄像头拍摄功能?

在WordPress表单中添加实时摄像头拍摄功能可以让人们提交照片或视频变得更快、更简单。这可以促使更多用户真正完成你的表单。

想想当你要求某人向你的联系表单上传照片时会发生什么。他们必须停止手头的事情,打开相机应用,拍照,关闭相机,在相册中找到照片,然后回来上传。

这有很多步骤。而每一个额外的步骤都意味着有人可能会放弃并放弃你的表单

有了实时摄像头拍摄字段,人们可以在不离开表单的情况下拍照或录像。他们点击一个按钮,摄像头直接在浏览器中打开,几秒钟就完成了。

livesite contactform with camera field

这比你想象的更重要。我见过仅仅通过消除传统文件上传的摩擦,表单完成率就大幅提升。

以下是摄像头拍摄功能真正能发挥作用的几个真实场景:

使用插件做这个的最佳之处在于,所有内容都会自动整理好。

当有人提交你的表单时,他们的照片或视频会与其他所有信息一起附加到他们的条目中。再也不需要在邮箱里翻找照片来匹配对应的人员了。✨

话虽如此,我将向你展示为WordPress表单添加摄像头拍摄功能的所有步骤。以下是本教程涵盖的所有内容:

第1步:安装并激活WPForms Pro

在本教程中,我将使用WPForms,这是WordPress最好的联系表单插件。我选择这个插件是因为它有一个摄像头拍摄字段,你可以简单地通过拖放轻松添加。

你还可以使用WPForms创建各种不同的表单,包括联系表单、带支付的在线订单表单、投票和调查,以及新闻通讯订阅。

在WPBeginner,我们使用WPForms处理所有表单——联系表单、网站迁移请求、年度读者调查等等。我们是这个工具的忠实粉丝,你可以在我们完整的WPForms评测中了解更多相关信息。

首先,前往WPForms网站创建一个账户。点击"Get WPForms Now"按钮,选择一个适合你需求的计划,然后完成注册。

wpforms homepage

****💡 注意:**** 您需要 WPForms Pro 才能使用摄像头捕获功能,还可获得条件逻辑和表单主题等额外功能。也就是说,如果您想先试用该插件,仍然可以使用 免费版 WPForms 开始。

注册后,您应该可以在 WPForms 账户仪表板中找到插件的压缩包文件和许可证密钥。您可以保持此标签页打开,或将您的文件和密钥安全存储在例如密码管理器中。

现在,让我们转到您的 WordPress 仪表板并导航到 插件 » 添加新插件

wp plugins addnew

在下一个屏幕上,您可以使用搜索栏查找 WPForms 插件。

点击搜索结果中的“立即安装”,然后在出现时点击“激活”。

wordpress plugins addnewplugin wpforms installnow

如果需要帮助,请参阅我们的分步指南,了解如何安装 WordPress 插件

激活后,从您的管理区域转到 WPForms **» 设置**以激活您的 WPForms Pro 许可证。

只需复制您的许可证密钥并粘贴到框中。然后点击“验证密钥”按钮。

wp wpforms settings licensekey

WPForms 将确认您的许可证已激活。您现在可以开始使用摄像头捕获功能创建表单了。

第 2 步:将摄像头字段添加到您的表单

在这一步中,您将创建一个带有摄像头捕获功能的表单。

首先,您可以在 WordPress 管理仪表板中导航到 WPForms » 添加新

wp wpforms formsoverview addnew

这将带您进入设置页面,您可以在其中命名您的表单。

这只是供您参考,但我建议使用清晰、描述性的名称,以便在您创建更多 WordPress 表单时更容易整理。

wpforms setup namingtheform

接下来,您将选择如何构建您的表单。

WPForms 允许您使用空白画布、AI 表单构建器或现成模板来创建表单。

使用 WPForms AI,您只需编写一个简单的提示。AI 表单构建器将在几秒钟内为您生成。

ai forms in action optimized

不过,在本教程中,我将使用简单联系表单模板。

WPForms 附带了 2000 多个预制表单模板,因此很容易找到适合您需求的一个。

wpforms setup choosingatemplate

如果您需要分步说明,请参阅我们关于如何在 WordPress 中创建联系表单的指南。

表单在构建器中打开后,查看左侧边栏中列出的所有表单字段。向下滚动直到找到标有“ Fancy Fields”的部分。

就在"文件上传"字段的旁边,你会看到"相机"字段。你可以根据需要将其拖放到表单的任何位置。

wpforms fields fancy camera

💡 注意: 文件上传字段最适合收集用户设备上已有的文件,如保存的照片或PDF。对于本教程,相机字段更合适,因为它允许用户在不离开表单的情况下现场拍摄照片或视频。

你会在表单预览中看到一个小相机图标。这就是用户点击拍摄照片或视频的按钮。

我发现这个功能的一个有趣之处是,当有人在笔记本电脑或台式电脑上点击相机按钮时,会看到一个友好的3秒倒计时。这给他们留出了足够的时间微笑或调整角度。

以下是它在预览中的样子:

wpforms fields addingcamerafield

就是这样——我说过这部分很简单!

第三步:配置表单的相机字段

在这里你可以配置相机字段。

继续点击你刚添加的"相机"字段,打开左侧的"字段选项"面板。在这里你可以自定义相机拍摄的工作方式。

wpforms fields camerafield options

首先看到的是"标签"设置。

默认情况下,字段名称为"相机",但你可以重命名以匹配你要收集的内容。例如:个人资料照片、错误截图,或损坏照片,具体取决于你的使用场景。

在"描述"中,你可以添加简短的说明和额外细节,例如照片中应该显示什么内容或任何质量要求。

例如:

  • "使用良好的光线保持图像清晰",用于个人资料照片。
  • "确保所有文字清晰可读",用于错误截图。
  • "将整个财产纳入画面",用于损坏报告。

这可以保持标签简短易读,只在描述中提供有用的指导。

wpforms fields camerafield label description

然后是"格式"设置,你将看到两个选项:

  • 照片 – 非常适合个人资料照片、身份证或任何需要快速快照的情况。
  • 视频 – 非常适合让人们录制简短的介绍、推荐视频,或解释那些展示比描述更容易的事情。

默认情况下,WPForms将其设置为"照片",但你可以随时在两者之间切换。

wpforms fields camerafield format

现在你可以向下滚动到"最大文件大小"设置,在这里你可以控制用户提交的文件大小。

你可以输入任意大小的兆字节(MB)。如果留空,WPForms将使用服务器的默认限制,通常约为64MB。如果需要,你也可以增加最大文件上传大小

我建议根据实际需要设置合理的限制。较小的文件大小有助于表单更快加载,并节省服务器空间。

别忘了切换"必填"按钮,这样用户就不能跳过此字段。

wpforms fields camerafield photo

如果您选择“视频”作为格式,您还会看到“时间限制”选项。默认值为1分30秒,适用于大多数情况。

🧑‍💻 专业提示: 视频文件可能会很大并影响您的 WordPress 性能。此字段适合短片段(少于30秒)。但是,如果您需要用户提交长视频(5分钟以上),则更好让他们上传到云服务并分享链接。

请参阅我们的指南,了解 为什么永远不应该将视频上传到 WordPress 以了解更多详情。

wpforms fields camerafield video timelimit

您可以调整这些设置以满足您的需求。

第4步:设置按钮样式、存储和访问权限

在这里,我将带您了解相机字段的高级设置。在这里,您可以微调相机功能的外观以及捕获文件的存储位置。

要开始操作,请切换到字段选项面板顶部的“高级”选项卡。

wpforms fields camerafield advanced

让我们分解每个配置选项。

自定义相机按钮样式和文本

首先,找到“样式”下拉菜单。您可以选择显示按钮图标或将其显示为简单链接。

wpforms fields camerafield advanced style

我通常坚持使用按钮样式,因为它更明显更容易点击,但如果您想要更简洁、更简约的外观,链接选项也很有效。

在它正下方,您会看到“按钮链接文本”字段。这是您使相机按钮看起来更个性化或更符合品牌风格的机会。

您可以写一些类似于“拍摄您的照片”或“录制视频”的内容来替代默认文本。我甚至见过有人在个人资料表单中使用有趣的短语,比如“Say Cheese!”。

wpforms fields camerafield advanced

这些小细节会让您的 联系表单 更加友好,不那么机械。

使用 CSS 类进一步设置样式

接下来,您会看到 CSS 类字段。这允许您添加自定义类名,以便可以使用 CSS 以不同方式设置此相机字段的样式。

例如,您可以在这里添加一个类似于 custom-camera-btn 的类。这不会自动设置按钮的样式,但它允许您(或开发人员)在主题设置中 添加自定义 CSS 以便稍后定位这个特定的按钮。

wpforms fields camerafield advanced cssclass

如果您想添加多个 CSS 类,可以使用空格分隔它们,如下所示:camera-field large-button

我将留空以保持与表单其余部分的样式一致。

选择存储捕获文件的位置

默认情况下,WPForms 会将所有捕获的照片和视频保存到您网站的“上传”文件夹中,具体位于 WPForms 目录中。

但是,如果您更喜欢将所有媒体保存在一个地方,请切换打开“将文件存储在 WordPress 媒体库”选项。

请记住,媒体库中的文件通常更容易被公众访问,因此如果您收集敏感文档,请保持此设置关闭。

wpforms fields camerafield advanced storage

🧑‍💻 专业提示: 您还可以将WPForms与 DropboxGoogle Drive 连接,以便在外部存储文件。如果您担心占用太多服务器空间或想要自动云备份,这将非常有用。

无论您将文件存储在哪里,都可以在“表单条目”仪表板中查看它们,它们会附加在每个表单提交条目上。

限制对上传文件的访问

如果您的表单收集敏感信息,例如身份证照片或个人文档,您需要锁定可以查看这些文件的人员。向下滚动并开启“启用文件访问限制”。

启用后,您可以获得两个安全选项。第一个是您可以限制访问,只有登录的WordPress用户 才能查看文件。

wpforms fields camerafield advanced accessrestriction

另一个选项是为您的表单添加密码保护 以增加一层安全保护。

这对于用于医疗保健、法律服务或任何其他处理私人信息的上下文尤其重要。

wpforms fields camerafield advanced accessrestriction user password

如果没有这些限制,任何拥有文件URL的人都可能查看上传的媒体。

您可以花时间配置这些高级选项,然后再继续。

第5步:设置表单通知和确认

现在您的相机字段已正常工作,您需要确保在有人提交表单时能够收到通知。

为此,您可以前往表单构建器中的设置 » 通知

wpforms settings notifications default active

WPForms会自动设置一个基本的电子邮件通知,发送到您的WordPress管理员电子邮件地址。每次有人提交带有拍摄照片或视频的表单时,您都会收到一封包含所有详细信息的电子邮件。

您可以通过更改“发送到电子邮件地址”字段来自定义谁接收这些通知。如果希望多个人收到通知,只需输入所有电子邮件地址,用逗号分隔即可。

您还可以使用智能标签动态发送通知,例如发送到表单中提交的电子邮件地址。

wpforms settings notifications default sendto

请参阅我们的指南,了解如何创建具有多个收件人的联系表单以获取详细信息。

通知电子邮件将包含一个直接链接来查看拍摄的照片或视频。这使您可以直接从收件箱中预览文件,而无需先登录WordPress仪表板。

💡 注意: WordPress 并不总是能可靠地发送邮件,有时表单通知会进入垃圾邮件或根本无法发送。为了解决这个问题,我建议使用 WP Mail SMTP 插件。详情请参阅如何修复 WordPress 不发送邮件的问题

在有人提交表单后,他们需要知道提交成功了。

让我们转到“确认”面板来决定有人提交表单后会发生什么:

  • 消息确认 – 在提交后立即在同一页面显示简单的文本消息,例如“谢谢!我们已收到您的提交。”
  • 显示页面确认 – 将用户重定向到您网站上的不同页面。如果您想将他们发送到包含更多信息的自定义感谢页面,这会很有效。
  • 重定向确认 – 将用户发送到您想要的任何 URL,即使是不同的网站。我曾用它将用户发送到预订页面或特殊优惠页面。

您可以选择最适合您情况的选项。

wpforms settings confirmations types

我通常坚持使用“消息”确认,因为它很简单,人们可以立即知道他们的提交成功了。

如果您也想使用它,我建议重写默认消息以符合您品牌的语气:

wpforms settings confirmations custommessage

步骤 6:测试并嵌入您的表单

在您与全世界分享表单之前,您需要确保摄像头捕捉功能能正常工作。

首先,点击表单构建器右上角的“保存”按钮以保存所有更改。

wpforms builder save button

现在让我们在页面上预览此表单,以便您可以测试它。

继续点击“预览”按钮以在新标签页中打开表单预览。

wpforms builder preview button

在预览中,您可以用虚拟数据填写表单字段。

为确保验证功能正常工作,请尝试输入拼写错误或留空必填字段。

wpforms preview validation

接下来,点击表单中的摄像头按钮。

您的浏览器将请求访问摄像头的权限。继续点击“这次允许”或“在访问网站时允许”以授予权限。

注意: 出于安全原因,某些浏览器会在您的网站未使用 HTTPS 时阻止摄像头访问。请确保已安装 SSL 证书,否则摄像头按钮将无法工作。

wpforms preview camera permission

您现在应该会在屏幕上看到自己,并显示 3 秒倒计时。微笑并让它捕捉您的照片或视频。

填写完所有内容后,点击“提交”查看您的确认消息是否显示正确。然后您可以点击“查看条目”链接查看表单提交是否成功。

wpforms preview confirmation viewentries

在下一个屏幕上,您应该看到您的测试提交。

在操作列中,点击“查看”以查看该条目。

wpforms entries actions view

现在,您可以向下滚动查看已捕获的照片或视频已附加在那里。

这是它在我屏幕上的样子:

wpforms entries actions view profilepicture

确认一切正常后,您可以将此表单添加到您的 WordPress 网站

点击“嵌入”按钮启动向导。

wpforms builder embed button

这将打开一个弹出窗口,您可以选择现有页面或为您的表单创建新页面。

  • 选择现有页面:下拉菜单将显示您 WordPress 网站上的所有页面。
  • 创建新页面:将出现一个“命名您的页面”字段供您输入标题。

在本教程中,我将选择“创建新页面”。

wpforms embed createnewpage

接下来,为您的新页面输入名称,例如,我将其命名为“联系表单”。

点击“开始吧!”

wpforms embedwizard newpage letsgo

然后,您将进入页面的块编辑器,您的表单已加载完毕。

从这里,您可以在右侧面板中调整“表单设置”。

默认情况下,表单标题是隐藏的,因此您可能需要将其打开以给访问者更多上下文。如果您添加了描述,也可以启用它。

blockeditor wpforms formsettings

为了让它看起来更好,设置表单样式 以匹配您网站的主题。

继续从主题部分选择一个主题。

blockeditor wpforms themes

当您对它的外观满意后,点击“保存”。

完成后,发布或更新您的页面,然后点击“查看页面”以查看您的 WordPress 网站上的实时版本:

有关详细信息,请参阅我们关于如何在 WordPress 中嵌入表单的指南。

🧑‍💻 专业提示:嵌入表单后,请务必在移动设备上打开该页面,以确保摄像头能够顺利打开并在较小的屏幕上感觉自然。

关于在 WordPress 表单中捕获实时摄像头照片或视频的常见问题

在结束之前,以下是人们在使用表单中的摄像头上传和文件字段时遇到的一些常见问题的答案。

如何在 Google Forms 中收集照片?

Google Forms 支持文件上传,但它缺乏专用的智能摄像头字段。虽然用户可以手动选择文件,但 WPForms 提供了无缝集成,可直接触发摄像头,让用户可以更快地拍照和提交。

WordPress 表单可以有摄像头吗?

是的。一些 WordPress 表单插件,如 WPForms,支持摄像头字段,允许用户直接从他们的设备拍照或录制视频,并与表单一起提交。

什么是文件上传字段?

文件上传字段允许用户在提交表单时附加文件,如图片、PDF 或视频。它适用于照片上传、简历或文档等用途。

如何在 WordPress 表单中拍照?

您可以使用支持此功能的表单插件(如 WPForms)在表单中添加摄像头或文件上传字段。当用户在具有摄像头的设备上打开表单时,他们可以直接拍照,而不是上传现有文件。

WordPress 表单可以拍摄网络摄像头照片吗?

是的。如果表单插件支持实时摄像头输入,用户可以使用桌面上的网络摄像头或手机上的摄像头直接拍摄照片并提交。

更多 WordPress 表单使用指南

希望本教程能帮助您添加摄像头字段,让用户可以直接在 WordPress 表单中拍摄实时照片或视频。

接下来,您可能想了解:

如果您喜欢这篇文章,请订阅我们的 YouTube 频道 获取 WordPress 视频教程。您也可以在 TwitterFacebook 上关注我们。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注