如何在 WordPress 中為籌款活動添加條紋捐贈按鈕

已發表: 2022-11-22

想在 WordPress 中為您的籌款活動添加一個 Stripe 捐贈按鈕嗎？本指南將通過幾個簡單的步驟向您展示如何做到這一點！

How to Add a Stripe Donate Button in WordPress

大約閱讀時間： 5.5 分鐘

Stripe 是 WordPress 最受歡迎的接受捐贈的支付網關之一。

在您的網站上設置一個有效的 Stripe 捐贈按鈕將使訪問者更容易幫助您的籌款活動、非營利組織或您擁有的任何其他捐贈。

Formidable Forms 是最好的 WordPress 表單生成器插件。免費獲取！

因此，在本指南中，我們將向您展示如何使用 Formidable Forms 製作 Stripe 捐贈按鈕，Formidable Forms 是最好的表單構建器和 Stripe 支付插件之一。

讓我們開始吧。

如何為您的 WordPress 網站創建 Stripe 捐贈按鈕

您需要接受捐贈的第一件事是捐贈表格。

這就是我們推薦 Formidable Forms 的原因。

借助其簡單的拖放式構建器，您可以在幾分鐘內創建一個簡單的 Stripe 捐贈表格。此外，借助它的一些高級功能，您可以製作出閃耀的 Stripe 捐贈按鈕和表格。

但我們稍後會談到這一點。

您需要做的第一件事是前往我們的定價頁面並選擇我們的商業計劃。有了它，您就可以獲得創建 Stripe 捐贈按鈕和表單所需的所有功能。

立即獲取 Formidable Forms！

安裝並激活後，我們將從四個簡單的步驟開始：

將您的 Stripe 帳戶連接到 Formidable
創建您的捐贈表格
創建您的 Stripe 捐贈按鈕
顯示您的按鈕和表單

第 1 步：將您的 Stripe 帳戶連接到 Formidable

要開始，請轉到您的 WordPress 儀表板並轉到Formidable → Add-Ons。

找到 Stripe 插件並點擊Install 。完成後，單擊Formidable側邊欄中的全局設置，然後單擊條紋。

您可以自定義您的付款設置，以便在您希望它處理 Stripe 付款時使用。然後您可以單擊LIVE下的Connect to Stripe按鈕。

按照 Stripe 的說明連接您的帳戶和設置的 Stripe API 密鑰。 Stripe 將指導您完成整個過程，而無需擔心複雜的設置。

一切準備就緒後，您就可以創建表單了！

第 2 步：創建您的捐贈表格

前往您的 WordPress 管理儀表板並轉到Formidable → Forms 。

在頁面頂部，選擇添加新的。您可以創建一個空白表單並從頭開始，或者從我們 150 多個預製模板中選擇一個。如果你想讓事情變得簡單，Formidable 有內置 Stripe 的捐贈模板。

對於我們的示例，我們將使用空白表單，以便您可以從頭看到流程。選擇表單後，為其命名，然後單擊創建。

這會將您帶到我們的拖放式表單生成器以開始創建您的表單。

選擇您想要的任何字段，只需將它們拖到您的表單中，然後自定義標題和描述。

現在您的表單已創建，我們要確保您的表單已設置為使用 Stripe 正確處理信用卡。

因此，單擊“更新”以保存您的更改，然後單擊“設置” 。

在Actions & Notifications選項卡下，單擊Collect a Payment按鈕以添加您的 Stripe 操作。

您可以更改付款類型（單筆或定期捐款）、貨幣、處理付款的時間或設置固定的捐款金額。

您可以根據自己的需要隨意自定義這些設置。對於我們的示例，默認選項就可以了。

單擊更新以保存您的更改。

添加表單登陸頁面（可選）

您還可以為表單添加登陸頁面。

因此，當訪問者單擊您的按鈕時，他們將直接進入您表單的登錄頁面。

要添加它，請單擊表單登陸頁面和生成登陸頁面。

該插件將根據您的表單名稱創建一個 URL，但您可以隨意自定義它。

將此 URL 保存在手邊，以備日後需要時使用。

第 3 步：創建您的 Stripe 捐贈按鈕

此步驟有兩個選項。

您可以在帖子或頁面上添加一個簡單的按鈕，並鏈接到表單的登錄頁面。或者，您可以在視圖中創建自定義按鈕。

我們將向您展示如何做到這兩點。

創建一個簡單的 WordPress 捐贈按鈕

轉到您要顯示按鈕的 WordPress 帖子/頁面。

添加一個新的 WordPress 塊，然後搜索Button 。

單擊您的按鈕塊，然後選擇鏈接選項。在此字段中粘貼表單的登錄頁面或您希望將訪問者引導至的 URL。

按回車鍵，根據需要自定義按鈕文本，一切順利！

只需更新頁面，您的按鈕就準備好了。

現在，如果您想要更高級的東西，請查看 Formidable Views

使用 Formidable Views 創建自定義捐贈按鈕

Formidable Views 是 Formidable 與其他捐贈插件的區別所在。

使用 Formidable Views，您可以輕鬆地在您的網站上創建一個按鈕，人們可以點擊該按鈕，然後他們就會看到您的 Stripe 捐贈表格。

為此，請單擊頁面頂部的“視圖”選項卡。

從此菜單中，選擇頁面頂部的添加新項。它使您可以選擇要使用一些預建模板創建哪種視圖。

對於您的按鈕，您可以選擇網格以簡化操作。為您的視圖命名，然後單擊創建視圖。

現在您在我們的View Builder中。但不要不知所措。它比看起來更直接。

要開始，請單擊藍色按鈕下方的開始添加內容以開始鏈接。

這將帶您到可以開始自定義視圖的位置。因此，單擊+按鈕下方頂部的空白，它會將您帶到我們的可視化/文本編輯器。

如果您了解一點 HTML、CSS 或 Javascript，您可以在這裡發揮創意。

例如，我們有一個我們熱愛的慈善機構，名為“救助兒童會” 。那麼，為什麼不為他們籌款呢？

進入我們的視圖構建器，我們輸入了以下代碼：

如果您不理解這段代碼，請不要擔心。您無需知道如何編寫代碼即可在視圖中創建非凡的內容。

現在，每次有人向表格捐款時，它都會自動更新以顯示當前總數和目標進度條！

捐贈者所要做的就是點擊捐贈按鈕，前往您表格的登陸頁面進行支付！

這只是您可以執行的操作的一個小例子。

Formidable Forms 不僅僅是一個簡單的表單生成器。它也是一個出色的應用程序構建器。

第 4 步：顯示您的按鈕和表單

如果您在上一步中設置了一個簡單的按鈕，那麼您就已經設置好了。

但是，如果您想單獨顯示您的表單或您構建的視圖，您仍然需要顯示它。

因此，我們將通過如何顯示您的表單以及如何顯示您的視圖來對此進行分解。

如何顯示您的表格

轉到您要顯示表單的帖子或頁面並添加一個新的 WordPress 塊。

接下來，搜索Formidable並選擇 Formidable 塊。

在這裡，您可以從下拉菜單中選擇您的表單。現在，更新你的頁面，你的表單就在你的頁面上了。

如何顯示您的視圖

在您創建視圖的編輯器中，複製左上角列出的簡碼。

接下來，轉到要顯示視圖的帖子或頁面並添加一個新的 WordPress 塊。然後，搜索簡碼並添加塊。

將您的短代碼粘貼到您的塊中並更新您的頁面；您的視圖將顯示在您的頁面上！

您將使用 Formidable Forms 創建哪些捐贈創意？

如您所見，您可以保持簡單或發揮您的想像力，創造出獨一無二的東西！

這是你的選擇！

有許多 WordPress 插件可供選擇，但沒有一個提供 Formidable 的靈活性。這個分步指南向您展示瞭如何使用 Formidable 將 Stripe 捐贈按鈕添加到您的 WordPress 網站。