募金活動用にWordPressにStripe寄付ボタンを追加する方法

公開: 2022-11-22

募金活動用に WordPress に Stripe 寄付ボタンを追加したいですか? このガイドでは、いくつかの簡単な手順でそれを行う方法を紹介します!

How to Add a Stripe Donate Button in WordPress

おおよその読了時間: 5.5 分

Stripe は、寄付を受け入れるための WordPress で最も人気のある支払いゲートウェイの 1 つです。

また、Web サイトに有効な Stripe 寄付ボタンを配置すると、訪問者が募金活動、非営利団体、またはその他の寄付を支援しやすくなります。

Formidable Forms は、最高の WordPress Form Builder プラグインです。無料で手に入れよう！

そのため、このガイドでは、最高のフォームビルダーと Stripe 支払いプラグインの 1 つである Formidable Forms を使用して、Stripe 寄付ボタンを作成する方法を紹介します。

始めましょう。

WordPress サイトに Stripe 寄付ボタンを作成する方法

寄付を受け入れるために最初に必要なものは、寄付フォームです。

これが、Formidable Forms をお勧めする理由です。

シンプルなドラッグアンドドロップビルダーを使用すると、シンプルな Stripe 寄付フォームを数分で作成できます。さらに、その高度な機能のいくつかを使用して、Stripe の寄付ボタンとフォームを輝かせることができます。

しかし、それについては少し後で説明します。

まず、料金ページにアクセスして、ビジネスプランを選択してください。これにより、Stripe 寄付ボタンとフォームを作成するために必要なすべての機能を利用できます。

手ごわいフォームを今すぐ入手！

インストールしてアクティブ化したら、次の 4 つの簡単な手順から始めます。

Stripe アカウントを Formidable に接続する
寄付フォームを作成する
Stripe 寄付ボタンを作成する
ボタンとフォームを表示する

ステップ 1: Stripe アカウントを Formidable に接続する

開始するには、WordPress ダッシュボードに移動し、 Formidable → Add-Ons に移動します。

Stripe アドオンを見つけて、 [インストール] をクリックします。完了したら、 Formidableサイドバーの [ Global Settings]をクリックし、[ Stripe ] をクリックします。

Stripe 支払いをいつ処理するかについて、支払い設定をカスタマイズできます。次に、 LIVEの下にあるConnect to Stripeボタンをクリックします。

Stripe の指示に従って、アカウントと Stripe API キーの設定を接続します。 Stripe は、複雑な設定について心配することなく、プロセスをガイドします。

すべての準備が整ったら、フォームを作成する準備が整いました。

ステップ 2: 寄付フォームを作成する

WordPress 管理ダッシュボードに移動し、 Formidable → Formsに移動します。

ページの上部にある [新規追加] を選択します。空白のフォームを作成して最初から作成することも、150 以上の既製のテンプレートから選択することもできます。手ごわいには、物事を簡単にしたい場合に備えて、Stripe が組み込まれた寄付テンプレートがあります。

この例では、プロセスを最初から確認できるように空白のフォームを使用します。フォームを選択したら、名前を付けて [作成] をクリックします。

これにより、フォームの作成を開始するためのドラッグアンドドロップフォームビルダーが表示されます。

必要なフィールドを選択してフォームにドラッグするだけで、タイトルと説明をカスタマイズできます。

フォームが作成されたので、フォームが Stripe でクレジットカードを適切に処理するように設定されていることを確認します。

[更新] をクリックして変更を保存し、[設定]をクリックします。

[ Actions & Notifications ] タブで、[ Collect a Payment ] ボタンをクリックして、Stripe アクションを追加します。

支払いの種類 (1 回または定期的な寄付)、通貨、支払いをいつ処理するかを変更したり、固定の寄付金額を設定したりできます。

これらの設定は、必要に応じて自由にカスタマイズしてください。この例では、デフォルトのオプションで問題ありません。

[更新]をクリックして、変更を保存します。

フォームのランディングページを追加する (オプション)

フォームのランディングページを追加することもできます。

そのため、訪問者がボタンをクリックすると、フォームのランディングページに直接移動します。

これを追加するには、 Form Landing PageとGenerate Landing Pageをクリックします。

プラグインはフォームの名前に基づいて URL を作成しますが、これは自由にカスタマイズできます。

後で必要になったときのために、この URL を手元に置いておいてください。

ステップ 3: Stripe 寄付ボタンを作成する

このステップには 2 つのオプションがあります。

投稿またはページにシンプルなボタンを追加し、フォームのランディングページにリンクできます。または、ビューでカスタマイズしたボタンを作成できます。

両方を行う方法を紹介します。

シンプルな WordPress 寄付ボタンを作成する

ボタンを表示する WordPress の投稿/ページに移動します。

新しい WordPress ブロックを追加し、 Buttonを検索します。

Buttonブロックをクリックし、[リンク] オプションを選択します。フォームのランディングページまたは訪問者を誘導する URL をこのフィールドに貼り付けます。

Enter キーを押して、必要に応じてボタンのテキストをカスタマイズすれば、準備完了です!

ページを更新するだけで、ボタンの準備が整います。

さらに高度な機能が必要な場合は、Formidable Views をご覧ください。

Formidable Views でカスタマイズされた寄付ボタンを作成する

Formidable Views は、Formidable が他の寄付プラグインと一線を画す場所です。

Formidable Views を使用すると、人々がクリックできるボタンを Web サイトに簡単に作成でき、その後、Stripe 寄付フォームが表示されます。

これを行うには、ページの上部にある [ビュー] タブをクリックします。

このメニューから、ページの上部にある [新規追加] を選択します。事前に作成されたテンプレートを使用して作成するビューの種類を選択できます。

ボタンには、グリッドを選択してシンプルにすることができます。ビューに名前を付けて、[ビューの作成] をクリックします。

これでView Builderに入りました。しかし、圧倒されないでください。見た目よりも簡単です。

開始するには、青いボタンの下にある [コンテンツの追加を開始して開始] リンクをクリックします。

これにより、ビューのカスタマイズを開始できる場所に移動します。 +ボタンの下の上部の空の空白をクリックすると、 Visual/Text Editorに移動します。

HTML、CSS、または Javascript を少し知っていれば、ここでクリエイティブになることができます。

たとえば、 Save the Childrenという私たちの大好きな慈善団体があります。では、彼らのためにお金を集めてみませんか？

Views ビルダーに向かい、次のコードを入力しました。

このコードがわからなくても心配しないでください。ビューで特別なものを作成するためのコーディング方法を知る必要はありません。

これで、誰かがフォームに寄付するたびに、フォームが自動的に更新され、現在の合計と目標に向けた進行状況バーが表示されます!

寄付者は、寄付ボタンをクリックしてフォームのランディングページに移動し、支払いを行うだけです。

これは、あなたができることのほんの一例です。

手ごわいフォームは、単純なフォームビルダー以上のものです。また、優れたアプリケーションビルダーでもあります。

ステップ 4: ボタンとフォームを表示する

前の手順で単純なボタンを設定した場合は、既に設定されています。

ただし、フォームを単独で表示したり、作成したビューを表示したい場合は、表示する必要があります。

そこで、フォームの表示方法とビューの表示方法に分けて説明します。

フォームの表示方法

フォームを表示する投稿またはページに移動し、新しい WordPress ブロックを追加します。

次に、 Formidableを検索し、Formidable ブロックを選択します。

ここでは、ドロップダウンメニューからフォームを選択できます。次に、ページを更新すると、フォームがページに表示されます。

ビューを表示する方法

ビューを作成したエディターで、左上にリストされているショートコードをコピーします。

次に、ビューを表示したい投稿またはページに移動し、新しい WordPress ブロックを追加します。次に、ショートコードを検索してブロックを追加します。

ショートコードをブロックに貼り付け、ページを更新します。あなたのビューがあなたのページに表示されます!

Formidable Forms でどのような寄付のアイデアを作成しますか?

ご覧のとおり、シンプルに保つことも、想像力を働かせてユニークなものを作成することもできます。

選択はあなた次第です！

選択できる WordPress プラグインはたくさんありますが、Formidable ほどの柔軟性を提供するものはありません。このステップバイステップガイドでは、Formidable を使用して WordPress サイトに Stripe 寄付ボタンを追加する方法を説明しました。