Tips & Tricks

如何向通过电子邮件发送数据的 PDF 表单添加提交按钮

提交按钮是功能PDF 表单工作流程的最后一部分。用户填写文本字段、选择下拉选项并选中相应的框后,提交按钮会打包所有表单数据并将其发送到有人可以对其进行操作的目的地。如果没有提交按钮,用户必须保存填写的 PDF 并手动将其作为附件通过电子邮件发送。通过正确配置的提交按钮,表单数据以结构化文本形式到达收件箱或数据库中,无需用户执行任何手动步骤即可进行处理。

添加提交按钮涉及两个单独的任务:将按钮控件放置在 PDF 页面上并配置其操作以将数据发送到正确的目标。操作配置决定数据的去向、使用什么格式以及用户提交后是否看到确认消息。正确执行操作是将看起来可点击的按钮与可靠地提供表单响应的按钮区分开来的因素。

WukongPDF的可填充PDF编辑器包括提交按钮控件,您可以使用mailto地址或服务器端点进行配置。配置按钮后,在将表单发送给收件人之前测试完整的提交工作流程,以确认数据完好无损地到达。

How to Add a Submit Button to a PDF Form That Emails the Data

PDF 提交按钮如何工作

在大多数情况下,PDF 提交按钮是具有关联的提交表单操作的按钮类型的表单字段。当用户单击该按钮时,PDF 阅读器会收集所有表单字段的当前值,将它们序列化为所选的数据格式,并将它们发送到指定的目的地。目标可以是使用 mailto: 协议的电子邮件地址,该协议打开用户的电子邮件客户端,其中包含消息正文中的表单数据或作为附件。或者它可以是使用 HTTP 或 HTTPS 的 Web 服务器 URL,它将数据作为服务器端脚本接收和处理的 POST 请求发送。

数据格式选项包括 FDF,即 Adobe 产品自 20 世纪 90 年代以来使用的表单数据格式。 XFDF,FDF 的基于 XML 的版本,对于非 Adobe 系统来说更容易解析。 HTML,将字段数据格式化为 HTML 文档正文中的键值对。还有 PDF,它将整个填写的 PDF 文件作为附件发送。格式选择取决于接收数据的系统。电子邮件收件人通常更喜欢 PDF 或 HTML。处理表单提交到数据库的服务器脚本更喜欢使用 XFDF 或 FDF 进行结构化解析。

WukongPDF

尝试编辑 PDF

无需安装。直接在您的浏览器中工作。

立即开始 →

方法 1:配置邮件发送至:提交按钮

实际上,mailto 方法的设置最简单,因为它不需要服务器基础设施。提交按钮打开用户的默认电子邮件应用程序,创建发送给指定收件人的新邮件,并填充邮件正文或附加填写的 PDF。在 Adobe Acrobat Pro 中,打开 PDF,转到“工具”,然后转到“准备表单”。单击工具栏中的“按钮”图标,然后在页面上绘制一个按钮。键入标签,例如“提交”或“发送表单”。

选择该按钮后,打开“属性”对话框。在“常规”选项卡下,为按钮指定一个名称,例如“提交按钮”。在选项选项卡下,将布局设置为仅标签并输入按钮文本。在“操作”选项卡下,从触发器下拉列表中选择“鼠标松开”,然后单击“添加”。从操作类型列表中选择提交表单。在“提交表单选择”对话框中,输入 mailto:you@example.com 作为 URL。选择 PDF 作为导出格式,以便收件人收到完整填写的 PDF。单击“确定”,关闭属性,然后保存 PDF。

通过在 Adobe Acrobat Reader 中打开 PDF,填写一些字段,然后单击“提交”来测试“提交”按钮。读者应打开您的默认电子邮件应用程序,其中包含一条发给您的新消息以及随附的填充 PDF。如果电子邮件客户端未打开,请检查您的操作系统是否配置了默认邮件应用程序。 mailto 链接依赖于系统邮件处理程序,并且在某些计算机上,特别是在具有基于 Web 的电子邮件的企业环境中,可能未配置 mailto 处理程序。

方法 2:向 Web 服务器提交表单数据

对于分发给公众或大型团队的表单(基于电子邮件的提交变得不方便),HTTP POST 提交到服务器脚本提供了更具可扩展性的数据收集管道。该设置需要一个可以接受和处理传入的 PDF 表单数据的服务器端点。端点 URL 将进入提交表单操作的 URL 字段,而不是邮寄地址。当用户单击“提交”时,PDF 阅读器会发送一个 HTTP POST 请求,其中包含正文中的表单数据。服务器脚本解析数据、存储数据并返回 PDF 阅读器可以显示为确认页面的响应。

设置服务器端点是此工作流程中更复杂的部分,因为它涉及 PDF 之外的 Web 开发。接受 POST 请求、解析 FDF 或 XFDF 数据并将字段值写入 CSV 文件或数据库的基本 PHP、Python 或 Node.js 脚本通常需要 30 到 50 行代码。 PDF 端的配置与 mailto 设置相同,只是 URL 指向服务器端点而不是 mailto 地址。许多表单管理服务提供接受 PDF 表单提交的预构建端点,从而无需编写和托管自定义服务器代码。

自定义提交按钮的外观和行为

默认按钮外观是一个带有居中文本的灰色矩形,可以使用,但与大多数表单设计不匹配。在按钮的“属性”对话框中的“外观”选项卡下,设置边框颜色、填充颜色、字体和字体大小以匹配表单的视觉样式。与默认的灰色矩形相比,具有蓝色填充、白色文本和圆角的提交按钮会吸引更多注意力并获得更多点击。在“选项”选项卡下,您可以将图标分配给出现在标签文本旁边或代替标签文本的按钮。

在大多数工具中,按钮的“操作”选项卡支持不同触发器上的多个操作。除了“鼠标向上”提交操作之外,您还可以添加一个“鼠标输入”操作来更改按钮颜色以指示悬停,以及一个“鼠标退出”操作来恢复原始颜色。这些视觉反馈提示使表单感觉更加灵敏和专业。保持微妙的交互效果。悬停时颜色变为稍深的按钮会很有帮助。动画或变化剧烈的按钮会分散注意力。

安全和隐私考虑

通过 mailto 链接提交的表单数据会通过用户的电子邮件客户端以及发件人和收件人的电子邮件基础结构。除非两个电子邮件服务器都强制执行 TLS,否则数据在传输过程中不会加密。对于收集个人身份证号码、健康数据或财务详细信息等敏感信息的表单,mailto 提交不能提供足够的安全性。使用 HTTPS 到服务器端点的 HTTP POST 会对 PDF 阅读器和服务器之间传输的数据进行加密,这是收集个人数据的任何形式可接受的最低安全级别。

设计文档时,收件人使用的 PDF 阅读器也会影响提交行为。 Adobe Acrobat Reader 支持全方位的提交操作,包括 mailto 和 HTTP POST。 Chrome、Edge 和 Firefox 中嵌入的基于浏览器的 PDF 查看器对 PDF 表单提交操作的支持有限或不支持。当在浏览器选项卡中打开同一个 PDF 时,在 Acrobat Reader 中完美运行的提交按钮可能不会执行任何操作。对于分发给您无法控制其 PDF 阅读器的外部收件人的表单,请在提交按钮附近添加注释,指示用户如果该按钮在浏览器中不起作用,则在 Adobe Acrobat Reader 中打开该文件。

提交方法工作原理最适合
mailto:URL 操作打开用户的默认电子邮件客户端,其中包含预填充的主题和正文(包含表单数据)内部表格、小团队、简单数据
HTTP POST 到服务器脚本将表单数据作为 FDF 或 XFDF 发送到 Web 服务器端点进行处理公共表格、CRM 集成、自动化
JavaScript + 电子邮件 API 服务自定义 JS 按钮直接从 PDF 阅读器调用第三方电子邮件 APImailto 可靠性不足的表单

正确配置的提交按钮可将可填写的 PDF 从独立表单转变为数据收集端点。 mailto 方法以零服务器设置处理内部团队表单。 HTTP POST 方法可扩展到公共分发和自动数据处理。在分发之前对提交工作流程进行端到端测试,以捕获配置错误,否则这些错误将默默地丢失用户提交的每个表单响应。可靠工作的提交按钮消除了表单填写者和表单所有者之间的最后一个摩擦点,从而关闭了整个可填写 PDF 工作流程的循环。

提交按钮故障排除

当提交按钮单击后不执行任何操作时,最常见的原因是 PDF 阅读器不支持操作类型。基于浏览器的 PDF 查看器通常不支持 mailto 或 HTTP POST 提交操作。该修复是专门指示用户在 Adobe Acrobat Reader 中打开该文件。另一个常见原因是 mailto URL 格式错误。正确的格式是 mailto:address@example.com,不带任何空格或其他参数,除非它们经过正确的 URL 编码。

如果该按钮有效,但电子邮件到达时没有数据,可能的原因是导出格式设置为 FDF 或 XFDF,而收件人的电子邮件客户端不知道如何显示这些格式。在提交表单操作设置中将导出格式更改为 PDF。填写的 PDF 以电子邮件附件形式发送,收件人可以直接打开它以查看所有输入的数据。对于收件人需要一目了然地查看电子邮件正文中的数据的表单,请选择 HTML 作为导出格式。尽管格式很简单并且不保留原始表单的视觉布局,但字段值在电子邮件正文中显示为带标签的文本。

WukongPDF

尝试编辑 PDF

无需安装。直接在您的浏览器中工作。

立即开始 →