如何在 WordPress 网站上创建 Stripe 捐款表单

无论您是在非营利组织、慈善机构工作,还是仅为某个特定原因开展募捐活动,您都知道在网站上添加捐款表单是必不可少的。如果您的网站使用 WordPress,那么您有多种不同的方式可以选择添加表单。

然而,有些方法比其他的更好。我所说的“更好”是指更容易实施且成本更低。

我将向您展示的方法不仅简单明了,而且非常便宜——免费。(差不多。)

How to Create Stripe Donation Forms on WordPress

但不要因为它免费就小看它。它实际上是市场上 WordPress 最好的 Stripe 集成解决方案之一,具有可自定义表单、多币种支持和无缝支付处理等功能。添加捐款表单只是它的功能之一——我将向您展示如何进行设置。

让我们直接开始吧。

流程说明

要实现这一点,您需要三样东西:

正如我所说,这很简单。您需要做的是……

步骤一:安装并激活 WP Full Pay

登录您的 WordPress 网站后,直接点击左侧的 wp-admin 菜单,将鼠标悬停在插件上。然后点击添加新插件

在下一个屏幕的搜索插件栏中输入“WP Full Pay”。看到搜索结果后,点击立即安装,然后点击激活

Installing and activating WP Full Pay from wp admin

⚖️ 免责声明

WP Full Pay 插件由 WPShout 母公司的开发团队维护。该插件通过提供两个选项来简化流程:免费版和付费版。

最好的部分是什么?两个计划都可以让您访问全部功能——没有任何功能被锁定在付费墙后面。唯一的区别在于交易费用的处理方式。使用免费版,您可以完全免费获得全部功能,但除了 Stripe 的标准处理费外,每笔交易需额外支付 5% 的费用。付费计划起价为每年 79.50 欧元,同样包含全部功能,但不收取 Stripe 常规费用以外的任何额外费用。

如果您刚刚起步且不确定您的募捐活动能获得多少捐款,免费计划是一种绝佳的低风险方式,无需任何初始投入即可试水。一旦您的捐款金额开始增长,切换到付费计划可以帮助降低整体交易成本并最大化收益。

步骤二:将您的 Stripe 账户连接到 WP Full Pay

激活插件后,系统会提示您将 Stripe 账户链接到 WP Full Pay:

Connecting WP Full Pay to Stripe

这一步可能是整个过程中最耗时的部分。这真的取决于您是否已有 Stripe 账户。如果您有且它连接到您计划接受捐款的同一组织,那么流程会更快。否则,您需要添加所有相关信息:

Completing the Stripe integration with WP Full Pay

如果你还没有Stripe账户,那么请准备花几分钟时间来完成注册。

另外,请确保手头有所有与你的组织相关的必要法律信息,因为他们会询问所有事项。虽然这可能感觉有点繁琐,但这是可以预期的。任何涉及金融交易的事项都会受到严格审查,所以这是无法避免的。

视频教程:如何将Stripe与WordPress集成

以下是更直观的分步指南,介绍如何将你的网站与Stripe集成:

第三步:创建你的第一个捐款表单

连接好Stripe账户后,你就可以开始创建第一个捐款表单了。

💡 从技术上讲,你也可以退出设置向导,先创建捐款表单,但显然在完成与Stripe的连接之前,它无法正常工作。我提到这一点是因为,如果你是一个团队工作,而其他人拥有完成Stripe设置所需的信息,在等待他们的同时,你仍然可以提前做好准备工作,让他们完成各自的部分后就可以直接使用。

添加新表单、命名、设置表单类型并选择布局

首先,将鼠标悬停在wp-admin菜单中的WP Full Pay上,然后点击支付表单添加表单

Add a new form inside the WP Full Pay plugin

接下来,给你的表单命名。

Choosing the form type inside of the WP Full Pay plugin

标识符字段将根据你在显示名称字段中输入的内容自动填充。它的作用是为与该表单关联的短代码添加标签。这个短代码是你将捐款表单插入到任何页面或文章中的方式——我们稍后会介绍这一点。

目前,我建议不要使用自动填充的标识符,因为它可能会不必要地很长。相反,只需输入一个词,如"donate"或"donate1",如果你计划创建多个表单的话。

在其下方,它会要求你选择表单类型,这非常显而易见,无需解释。

剩下的唯一一件事就是选择布局——结账内联

Choosing the form layout of the donation form

两者之间最大的区别之一是,结账版本会显示一个较小的表单,而内联版本会显示一个较大的表单。

当然还有其他区别。例如,选择内联可以让捐赠者在页面上完成整个支付流程,而选择结账会将他们重定向到Stripe托管的专用页面。请查看这篇知识库文章,了解布局的完整比较。

在本教程中,我将选择结账选项,但你可以随意选择最适合你的那个。它不会影响我们接下来要介绍的其他步骤。

设置货币和建议捐款金额

在下一个选项卡——支付——中,你可以从很长的世界货币列表中进行选择。我说的很长,是指你几乎不可能找不到你想要的货币。

此外,您可以添加建议的捐款金额,并勾选一个选项来允许捐赠者设置自己的自定义金额。

💡 专业提示:在您将要插入表单的页面中,考虑为每个建议金额的用途添加简短的描述。比如"$50可以为五个家庭提供膳食"这样的说明可以帮助捐赠者了解他们的影响,并可能提高您的转化率。

Choosing currency for donations donation amounts frequencies and more

在页面底部,您还可以找到其他自定义选项,包括设置捐款频率以及为捐款者生成发票的功能。

调整表单的外观

外观选项卡提供了多种方式让您的表单更具吸引力并符合品牌形象。让我们来看看关键设置:

首先是表单按钮文字。标准的"Donate"效果不错,但您也可以添加{{amount}}来在按钮上显示用户选择的金额。这可以给他们一个最后确认的机会,确认他们正在捐赠的金额正是他们想要的。

对于产品名称和描述,请保持简洁明了但又具有吸引力且透明。

⚡️ 强大功能:如果您想显示筹款目标的进度,只需勾选"显示捐款目标"复选框并输入您的目标金额。没有什么比看到进度条填满更能激励捐赠者了!💰 这是一个强大的心理工具,您会在GoFundMe和Kickstarter等主要筹款平台上看到它,而使用WP Full Pay,您也可以利用它!

Adding various elements and customizations to the donation form

最后,区域设置确保您的表单对全球捐赠者来说倍感亲切。不同地区的数字和货币格式各不相同——小数点用点或逗号,货币符号放在金额前面或后面。选择您的捐赠者在您所在地区期望看到的格式。

添加可选的表单字段

进入表单字段选项卡,您会发现一些有用的方法来收集捐赠者的额外信息。顶部有一个部分用于收集基本的客户数据,如账单地址和电话号码——勾选您需要的任何字段。

同意部分,您可以设置服务条款复选框。这不仅从法律角度来说是明智的,而且有助于与捐赠者建立信任。您可以自定义复选框标签(包括指向您的条款的链接),以及当有人尝试未勾选就提交时显示的错误信息。

Adding a terms of service checkbox to donation form

如果您需要收集其他特定信息,有一个自定义字段部分可以让您添加自己的输入字段。

启用捐款收据

下一个选项卡是邮件通知。在这里,您可以启用向捐款者发送收据的功能。有两个选项:让WP Full Pay插件发送邮件,或让Stripe发送邮件。

您甚至可以同时开启两者。对于大多数与捐款相关的目的,两者中的一种可能就足够了,但有两个选项的原因是有些类型的通知只能由其中一种发送。幸运的是,捐款收据可以由两者发送。

如果您对差异的完整列表感兴趣,请查看此页面

Activating the donation receipt confirmation

你会注意到在这个标签页的右侧还有一个面向开发者的 WEBHOOK 标签页。我会跳过它,因为这对于接受捐款来说并非绝对必要,而且许多读者可能会觉得它很复杂。不过,如果你有兴趣探索这个功能,可以查看这个详细的知识库教程

此时你可以点击保存更改,或者如果你想再检查一遍一切是否正确,也可以先这样做。

第四步:将捐款表单插入到页面或文章中

保存表单后,你将返回管理表单屏幕,此时该屏幕上只有你刚刚创建的那个表单。

下一步是点击简码。点击后,它会自动复制到你的剪贴板。

💡 你还记得之前的标识符吗?如果你仔细看我的简码,你会注意到我给标识符起名为"donate"。

Copying the donation form shortcode from the wp admin screen

从这里,进入页面所有页面(或者文章所有文章,如果你想添加到文章中的话)。

然后找到你要添加捐款表单的页面(或文章),点击编辑

Finding the page you want to add the donation form to

要将捐款简码添加到你的页面,请进入你希望插入它的页面/文章部分。

然后点击块编辑器中的+图标。这会弹出块搜索框。在搜索栏中输入"shortcode"(简码),你将看到简码块出现:

Inserting a shortcode block into page in the wordpress editor

现在只需将剪贴板中的简码粘贴到简码块中(Mac系统:command + v,Windows系统:ctrl + v):

Adding donation form shortcode to shortcode block in the wordpress editor

粘贴简码后,点击工具栏右上角的查看/预览按钮,预览你的捐款表单在实际页面上的显示效果。这个快速检查可以帮助你在保存作品之前发现任何格式问题。

Click view preview on the top right to check what it looks like on the frontend

如果一切看起来都很好,那么返回块编辑器并点击保存使其上线。

Donation form on the front end of website

就是这样!

好吧,也许……

关于配色方案的说明

Donation form with default settings inserted into a darker theme website

如果您的网站使用较深的背景色,那么默认设置下的捐款表单部分几乎看不见。查看上面的示例:"捐款金额"和"捐款频率"几乎难以辨认,甚至进度条文字也很难突出显示。

幸运的是,您可以通过一些CSS调整来更改表单的颜色设置。有一篇知识库文章会详细说明。

最后一点建议

我已经为您介绍了设置捐款表单的基本流程,对大多数人来说这已经足够了。然而,WP Full Pay 插件的美妙之处在于它需要简单时就能简单,需要复杂时也能复杂。

换句话说,它会适应您。

如果您确实是一位高级用户,需要使用它的一些更高级的功能,我强烈建议深入研究我在本指南中多次链接的知识库。

除此之外,我的最后一条建议是彻底测试您的表单。我的意思是真正地测试它。现在发现任何问题总比以后收到捐款者的抱怨邮件更好。

您有任何问题吗?请在下方评论中提出。我很乐意帮助您。

别忘了参加我们关于加速 WordPress 网站的速成班。在下方了解更多:

如何加速您的 WordPress 网站

通过一些简单的修复,您可以将加载时间减少 50-80% 🚀

通讯表单 – 侧边栏

名字 *

您的邮箱 *

立即订阅!

如果你是人类,请留空此字段。

Δ

输入您的邮箱即表示您订阅了我们的每周通讯。您可以随时更改主意。我们尊重您的收件箱和隐私。

分享你的喜爱

留下评论

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