WordPressに支払いフォームを追加する方法（埋め込める6つの場所）

WordPressサイトで支払いフォームを公開するには10分もかかりません。WordPressに支払いフォームをどこに追加するか、ユースケースに最適な配置を選ぶかは、ほとんどのサイトオーナーが見落としているステップであり、それがコンバージョン数に表れます。

サイトオーナーが、きれいで設定済みのフォームを作成したものの、ほとんど誰も見つけられないフッターウィジェットに埋め込んでしまうのを見たことがあります。

フォームの配置は、どれだけの訪問者がフォームを目にし、どれだけの人が支払いを完了するかに直接影響します。ナビゲーションメニューやサイドバーと競合するフォームは、他にクリックするものがない専用ページには必ず負けます。

この記事では、WordPressに支払いフォームを追加し、6つの異なる場所に埋め込む方法を解説します。

フォームの配置がコンバージョンに影響する理由

間違ったページに配置された支払いフォームは、売上を逃すだけでなく、支払う準備ができているのにどこですればよいかわからない訪問者に混乱を与えます。

配置の悪さがコンバージョンを失わせる4つの方法を以下に示します。

• 埋め込まれたフォームはトラフィックゼロ。賑やかなホームページの最下部にあるフォームは、ナビゲーションリンク、ブログ記事、画像、ソーシャルウィジェットと競合します。購入意図を持ってアクセスした訪問者は、フォームまでスクロールする前に他の場所をクリックします。
• コンテキストの不一致は信頼を損なう。「会社概要」ページに埋め込まれたサブスクリプションフォームは、訪問者がオファーを理解する前にコミットを求めます。支払いフォームは、周囲のコンテンツがすでに販売活動を終えている場合に最も効果を発揮します。
• チェックアウト時の摩擦は完了取引を殺す。ナビゲーション、サイドバー、フッターのあるページに全ページ埋め込みフォームがあると、訪問者は離脱する選択肢が多すぎます。他にクリックするものがない専用ページにあるフォームは、取引に注意を向けさせます。
• 配置漏れは機会損失。1つのページにしか存在しないフォームは、そのページからしかアクセスできません。サイトのどこからでもトリガーできるサイドバー配置、オーバーレイモーダル、専用の支払いURLは、訪問者をチェックアウトに導くパスを増やします。

とはいえ、ウェブサイト用の支払いフォームを作成する簡単で迅速な方法を見てみましょう。

WordPressに支払いフォームを追加する

ショッピングカートなしでWordPressサイトでStripe支払いを利用できるようにする最も簡単な方法は、WP Simple Payです。

WP Simple PayはWordPress向けのStripe決済プラグインNo.1です。フリーランサー、中小企業、非営利団体、コース作成者などが、サイト上で直接、単発および継続的な支払いを受け付けることができます。

最も良い点は、ショッピングカートを設定したり、コードを書いたりすることなくこれができることです。WP Simple Payが提供する主な機能の一部を以下に示します。

• 3つの表示モード。同じフォームビルダーから、フォームをページに直接埋め込む、ボタンでトリガーされるオーバーレイモーダルとして開く、または顧客をオフサイトのStripe Checkoutページに送信する、のいずれかを選択できます。
• 単発および継続的な支払い。同じドラッグアンドドロップフォームビルダーから、サービス、サブスクリプション、寄付、登録のための支払いフォームを作成できます。追加のツールは不要です。
• 10種類以上の支払い方法。 どのプランでもカード、Apple Pay、Google Pay、ACHダイレクトデビットを受け付け可能。さらに、ProfessionalプランとEliteプランでは、Klarna、Affirm、Afterpayなどの後払いオプションも利用でき、すべて同じフォームから管理できます。
• 専用の支払いページ（Professionalプラン以上）。WordPressサイトでホストされる、気を散らさないブランド化された支払いページを作成し、ページ構築なしで直接リンクとして共有できます。

それでは、WP Simple Payを使用して、サイトの適切な場所にWordPressに支払いフォームを追加する方法を見てみましょう。

ステップ1：WP Simple Payのインストールと有効化

まず、WP Simple Payのウェブサイトにアクセスし、プランを選択する必要があります。

注：このチュートリアルでは、支払いフォームテンプレート、ドラッグ＆ドロップフォームビルダー、カスタムフィールド、その他の高度な機能が含まれているため、WP Simple Pay Proを使用します。無料で始められるWP Simple Pay Liteバージョンもあります。

サインアップ後、WP Simple Payアカウントダッシュボードに移動し、WP Simple Pay Proをダウンロードをクリックして、プラグインZIPファイルを取得します。

そこからWordPressダッシュボードに移動し、プラグインファイルをアップロードして、プラグインをインストールおよびアクティブ化します。

このプロセスにヘルプが必要な場合は、WordPressプラグインのインストールに関するこのステップバイステップガイドを参照してください。

次に、アクティベーション後にセットアップウィザードが自動的に起動するので、開始するをクリックして開始します。

アクティベーション後にセットアップウィザードが表示されない場合は、WP Simple Pay » 設定 » 一般 » 詳細設定に移動し、セットアップウィザードを起動をクリックします。

これでWP Simple Payがインストールされ、準備が整いました。次に、Stripeアカウントに接続できます。

ステップ2：Stripeアカウントを接続する

セットアップウィザードで、Stripeに接続をクリックしてStripeのアカウント接続画面を開きます。

そこから、Stripeアカウントのメールアドレスを入力し、認証フローを完了します。新規ユーザーは、WordPressを離れることなく同じ画面から無料のStripeアカウントを作成できます。

認証完了後、ウィザードは自動的に進みます。セットアップ完了画面を確認して終了します。

WordPressダッシュボードからWP Simple Pay » 設定 » Stripeに移動して、いつでも接続または再接続することもできます。

次に、WordPressウェブサイト用の新しい支払いフォームを作成しましょう。

ステップ3：支払いフォームを作成する

まず、セットアップウィザードの「支払いフォームを作成」ボタンをクリックするだけです。

または、WordPressダッシュボードからWP Simple Pay » 支払いフォームに移動し、新しい支払いフォームを追加をクリックしてテンプレートピッカーを開きます。

WP Simple Payは、支払いフォーム、支払いボタン、寄付ボタンなど、ユースケース別に整理された、既製の支払いフォームテンプレートのライブラリを表示します。

目標に合ったテンプレートを選択してください。

フォームビルダーが開いたら、一般タブでフォームのタイトルを入力し、タイプフィールドを設定します。

次に、フォームをページに直接埋め込むには、オンサイト決済フォームオプションを選択します。訪問者が決済ボタンをクリックしたときにモーダルで表示されるように、オーバーレイモーダルで開くオプションをチェックすることもできます。顧客をStripeのホストされた決済ページにリダイレクトするには、オフサイトStripeチェックアウトフォームオプションを選択します。

注意：オンサイト決済フォームとオーバーレイモーダルオプションにはWP Simple Pay Proが必要です。オフサイトStripeチェックアウトフォームは、Liteを含むすべてのプランで利用できます。

次に、決済タブに移動して、通貨、金額、および決済が1回限りか定期的なものかなどの価格設定オプションを構成できます。

次に、フォームフィールドタブを開いて、追加の顧客フィールドを追加できます。

ここでは、WP Simple Payフォームビルダーを使用して新しいフォームフィールドを追加し、ドラッグ＆ドロップ機能を使用して各フィールドの順序を並べ替えることができます。フォームの準備ができたら、公開をクリックします。

ステップ4：任意のWordPressページまたは投稿にフォームを埋め込む

WP Simple Payを使用すると、サイトのどこにでもフォームを埋め込むための2つの方法があります。最も簡単な方法は、WordPressコンテンツエディターで任意のページまたは投稿を開き、+アイコンをクリックして新しいブロックを追加し、WP Simple Pay – Payment Formを検索することです。

ブロックを選択した後、ドロップダウンからフォームを選択します。

クラシックエディターまたはウィジェットエリアで作業している場合は、代わりにショートコードを使用してください。フォームの公開パネルから形式でショートコードをコピーし、フォームを表示したい場所に貼り付けます。

詳細については、WordPressのページに決済フォームを追加する方法に関するガイドを参照してください。

次に、フォームを埋め込んでコンバージョンを促進できる場所を見てみましょう。

支払いフォームを追加できる6つの場所

決済フォームの準備が整い、埋め込み方法がわかったら、次のステップはコンバージョンを多く獲得できる最適な場所を見つけることです。

1. チェックアウトページ

チェックアウトページは、支払いフォームの最も明白な配置場所です。複数の商品を一度に購入したり、買い物を続けながら商品を「保存」しておきたい訪問者がいるサイトに適しています。本格的なeコマースストアをお持ちの場合は、チェックアウトページを使用するのが理にかなっています。

1.1. WordPressにチェックアウトページを追加する

WP Simple Payを使用すると、フォームを自分のサイトに埋め込むか、オフサイトのStripeチェックアウトページに埋め込むことができます。クリックするだけで、どこに埋め込みたいかを選択するだけです。

詳細については、WordPressでStripeチェックアウトページを設定するための完全ガイドをご覧ください。

1.2. チェックアウトページのベストプラクティス

支払いフォームは、チェックアウトページの主要な要素であるべきです。チェックアウト体験に関連しない余分な画像、コピー、リンクでこのページを散らかさないでください。このページに追加するものはすべて、顧客が気を散らして離れる機会となります。カスタムヘッダーとフッターを使用して、ユーザーが他のことをする手段を持たないようにすることも賢明です。

顧客が販売後の情報が必要な場合は、別の「ありがとう」ページに追加して、コンバージョンを妨げないようにしてください。これには、指示や次のステップ（「購入後にメールを確認してください」など）、製品/サービスのベストプラクティス、または質問や懸念がある場合の連絡方法が含まれる場合があります。

2. 支払いランディングページ

ランディングページとは、訪問者が最初にアクセスするページのことです（適切な名前ですよね？）。たとえば、広告のコピーがページのコピーに関連しているランディングページにリンクする広告を購入する場合があります。サービスページもランディングページになる可能性があります。

ランディングページは通常、単一の目的を持っています。それは、訪問者に連絡する、寄付する、メールリストに登録する、購入するなど、何らかのアクションを起こすよう説得することです。訪問者を別のページにクリックさせるのではなく、このページに支払いフォームを追加することは、コンバージョンを増やす良い方法かもしれません。

2.1. WordPressに支払いランディングページを追加する

WP Simple Payを使用すると、WordPressサイトに気を散らすことのない支払いランディングページを簡単に作成できます。専用の支払いランディングページを使用すると、使用しているWordPressテーマに関係なく、ヘッダー、フッターなどのページ上の不要な摩擦を排除できるため、高いコンバージョンを確保できます。

ランディングページに支払いフォームを追加することにした場合は、そのページに訪問者が購入の決定を下すために必要なすべての情報が含まれていることを確認してください。訪問者がウェブサイトを閲覧して質問の答えを探すことを期待しないでください。強力な見出し、サポートコピー、よくある質問、信頼のシグナル、そして顧客が安全だと感じられるように追加できるものをすべて含めてください。

チェックアウト：WordPressで支払いランディングページを作成する方法

3. 商品ページまたはコンテンツ内

商品ページ：

商品ページとは、特定の商品またはサービスを宣伝するページのことです。これらはランディングページである場合もありますが、常にそうであるとは限りません。

商品やサービスの性質によっては、従来のショッピングカートやチェックアウトフローを使用するのではなく、商品ページに直接支払いフォームを配置するのが賢明かもしれません。これは、訪問者が同時に複数の商品/サービスを購入することを期待しない場合に理にかなっています。

コンテンツ内：

読者のためにコンテンツを作成しているときに、商品やサービスに言及し、その場で購入する機会を与えたい場合があります。このような場合は、支払いフォームをページに直接追加すると役立ちます。

たとえば、ブログ記事を書いているとします。記事の中で、あなたの電子書籍を参照します。別のページにリンクする代わりに、その本に関する短い説明と、それを購入するための簡単な支払いフォームを含めることができます。これにより、読者が購入するあらゆる機会を確実に作成できます。

3.1. すべての投稿またはページに支払いフォームを追加する

任意のブログ投稿またはページに決済フォームを埋め込むには、投稿/ページの編集画面に移動し、埋め込みたい場所にWP Simple Pay – Payment Formブロックを追加するだけです。ブロックを追加した後、正しい決済フォームを選択してください。次に投稿を公開します。

4. サイドバー

場合によっては、サイドバーに支払いフォームを配置するのが理にかなっています。サイドバーは多くのページに表示される要素であるため、この場所にあるフォームはウェブサイト全体に表示されます。これは、ウェブサイトに多くのページがある（または今後ある）場合で、フォームを可能な限りアクセスしやすくしたい場合に特に役立ちます。

例えば、定期的にブログコンテンツを作成しているとしましょう。ブログ読者をあなたの電子書籍ランディングページに誘導しようとする代わりに、すべてのページのサイドバーで電子書籍を宣伝することができます。その下に支払いフォームを直接配置すれば、読者は追加のステップなしで購入できます。

寄付を集めている非営利団体の場合、サイドバーに支払いフォームを設置すると、潜在的な寄付者がその気になったらすぐに寄付できるようになるため、賢明です。これにより、フォームが利用できなかったために寄付を逃すことがなくなります。

このサイドバーの支払いフォームは素晴らしい例です。サイトの複数のページに表示され、寛大なファンがこのポッドキャスターにコーヒーを買うことができます。

注意：フォームのショートコードを埋め込みたいサイドバーウィジェットにコピーすることで、WP Simple Payフォームを簡単にサイトに埋め込むことができます。

5. フッター

フッターの支払いフォームはまれですが、場合によっては理にかなっています。一部のページに表示されるサイドバーとは異なり、フッターは一般的にすべてのページに表示されます（フッターが特別に除外されているランディングページのような場合を除く）。したがって、フッターに配置するものは、すべてのページに適したものでなければなりません。

フッターは、サポートコピーや画像が必要な製品やサービスを販売する支払いフォームには不向きな場所です。そのようなものには十分なスペースがありません。しかし、自己説明的な製品（コンテンツの一部など）を販売している場合や、少額の寄付（「コーヒーをおごる」や「3ドルで支援する」など）を募っている場合は、フッターの支払いフォームが機能する可能性があります。

サイトにウィジェット化されたフッターエリアがある場合は、フォームのショートコードをフッターウィジェットにコピーすることで、フッターにフォームを埋め込むことができます。

6. オフサイトページ

これは技術的には埋め込み可能な場所ではありませんが、除外したくありませんでした。最後の選択肢は、支払い処理業者がホストするオフサイトページを使用することです。ウェブサイト上のボタンが訪問者を、従来の支払いフィールドを含む別のページに誘導します。Stripeホストのチェックアウトページは次のようになります。

このシステムの利点は、ページ作成がすべてホスティングサービスによって行われることです。このページにアクセスするためのボタンは、メニュー上の単純なテキストリンクやコンテンツ内など、どこにでも配置できます。さらに、このページは、人々が安全だと信頼している評判の良い会社によってホストされています。

よくある質問

1. オンサイト支払いフォームとオフサイトStripeチェックアウトフォームの違いは何ですか？

オンサイト支払いフォームは、WordPressページに直接支払いフィールドを表示し、トランザクション全体でお客様をサイトに留めます。オフサイトStripeチェックアウトフォームは、お客様をStripeのホスト済みチェックアウトページにリダイレクトして支払いを完了させます。オンサイトフォームはチェックアウトエクスペリエンスに対するより多くの制御を可能にし、WP Simple Pay Proが必要です。

2. WP Simple Payフォームをサイドバーまたはウィジェットエリアに埋め込むことはできますか？

はい。WP Simple Payフォームは、ウィジェットブロックまたはショートコードを使用して、サイドバーまたはウィジェットエリアに埋め込むことができます。サイドバーの配置については、狭いサイドバースペースにインラインでレンダリングするのではなく、フルフォームがモーダルで開くように、一般タブのオーバーレイモーダルで開くオプションを有効にすることをお勧めします。

3. 支払いページモードとは何ですか、またどのプランが必要ですか？

支払いページモードは、WP Simple Payの機能であり、支払いフォームのためにWordPressサイトでホストされるスタンドアロンの、気を散らすものがないページを作成します。サイトのナビゲーション、ヘッダー、サイドバー、フッターを削除して、訪問者が支払いに集中できるようにします。支払いページモードは、Professionalプラン以上で利用可能です。

4. WordPressページにWP Simple Payフォームを追加するにはどうすればよいですか？

ブロックエディターでページを開き、+ボタンをクリックして新しいブロックを追加し、WP Simple Pay – Payment Formを検索して結果から選択します。ブロック設定のドロップダウンからフォームを選択します。または、公開パネルからショートコードを の形式でコピーし、任意のページ、投稿、またはウィジェットエリアに貼り付けます。

5. どの支払いフォームの配置が最もコンバージョンしますか？

専用の支払いランディングページとチェックアウトページは、競合するナビゲーションやコンテンツを排除するため、他の配置よりも一貫して優れたパフォーマンスを発揮します。サイト所有者が、フォームを汎用ページから他のリンクのない専用ページに移動することで、コンバージョン率を大幅に向上させているのを見てきました。サイドバーとフッターの配置は、プライマリチェックアウト場所としてよりも、自己説明的なオファーのセカンダリアクセスポイントとしてより効果的です。

ご覧のとおり、支払いフォームを埋め込むのに適した場所はたくさんありますが、適切な場所はフォームの性質と目的に依存します。しかし、完全に制御するには、フォームをどこにでも投稿できる柔軟な支払いプラグインが必要です。

この記事が、WordPressに支払いフォームを追加する方法と、埋め込める6つの場所について理解するのに役立ったことを願っています。また、埋め込み、オーバーレイ、Stripe Checkoutの支払いフォームの違いや販売を促進するために商品ページを最適化する方法に関するガイドもご覧ください。

WordPressサイトでStripeでの支払い受け付けを開始する準備はできましたか？今すぐWP Simple Payで始めましょう。

このような記事をもっと読むには、今日 Xでフォローしてください。