Easy Digital Downloadsは、WordPressユーザー向けの使いやすいeコマースシステムを提供することに専念しています。私たちは日々その目標達成に努めています。しかし、その拡張性と顧客ニーズの避けられない多様性のため、多くの機能はカスタム開発という daunting なタスクに委ねられています。
サポートチャネルで最もよく見られるニーズの1つは、カスタムチェックアウトフォームを簡単に作成する方法です。開発者でない場合、カスタムフォームの構築は十分に困難です。eコマース機能を導入すると、DIY層でさえ苦労します。
この記事の目標は、スキルレベルに関係なく、すべてのEasy Digital Downloadsユーザーがコードを一切書かずにカスタムチェックアウトフォームを構築する方法を学ぶのを支援することです。
最低限必要なプラグイン
これを実現するには、少なくとも4つのプラグインが連携して動作する必要があります。それぞれについて以下で説明します。
Easy Digital Downloads
Easy Digital Downloadsには独自のコアチェックアウト機能がありますが、基本的なシステムでは1つの「ユニバーサル」チェックアウトフォームしかサポートされていません。フォームをカスタマイズしても、カート内の内容に関係なく、すべてのトランザクションで同じフォームになります。
Gravity Forms
Gravity Formsは、WordPress向けの高度なフォームビルダーです。最も基本的なお問い合わせフォームから、あらゆる目的に対応する複雑なフォームまで、あらゆるものを作成するために使用できます。条件付きフィールドロジック、エントリの整理と表示、アドオンサポートなどの機能により、市場で最も人気のあるプレミアムWordPressプラグインの1つであることは間違いありません。
Gravity Forms Checkout
Gravity Forms Checkoutは、Easy Digital DownloadsとGravity Formsの間の橋渡しです。製品ごとに複数のカスタムチェックアウトフォームを作成するには、このEasy Digital Downloads拡張機能がパズルの必要なピースです。
Gravity Forms Payment Add-On
最後に、Gravity Formsを通じて作成されたカスタムチェックアウトフォームでは、フォーム自体に追加機能を追加するためにGravity Formsアドオンを使用する必要があります。これは、Easy Digital Downloadsの支払いゲートウェイはGravity Forms Checkoutでは機能しないことを意味します。
支払いを処理するには、Gravity Forms用に構築された支払いゲートウェイを使用する必要があります。この記事では、Gravity Forms PayPal Payments Standardアドオンを参照します。StripeやAuthorize.netなどの追加オプションも利用可能です。
カスタムチェックアウトフォームの作成
必要なプラグインがすべて揃ったので、始めましょう。単一製品の基本的なチェックアウトフォームの作成を walkthrough します。準備ができている場合は、手順に従ってください。
この時点で、ストアには販売したい製品がすでにあるはずです。前述のツールが有効または使用中であっても、Easy Digital Downloadsストアは元の方法で機能することに注意してください。
Gravity Forms Checkout を使用したカスタムチェックアウトフォームは、単に別のオプションを追加するだけです。商品は従来どおり購入できます。
Gravity Forms で新しいフォームを作成する
フォーム作成プロセスについては、Easy Digital Downloads が Gravity Forms と統合するのではなく、その逆であると考えてください。そのアプローチでは、新しいカスタムチェックアウトフォームを作成するには、まず Gravity Forms で新しいフォームを作成する必要があることがわかります。
Gravity Forms が有効になっている状態で、WordPress ダッシュボードの フォーム -> 新規フォーム に移動します。フォームにタイトルとオプションの説明を入力するように求められます。そうしてフォームを作成してください。
基本的なフィールドの追加
この段階では、フォームエントリが作成されていますが、フィールドはありません。タイトルと説明のみが含まれており、これらはデフォルトで自動的に出力されますが、必要に応じて非表示にすることもできます。
顧客から少なくともメールアドレスを収集する必要があります。そのため、まずメールアドレスフィールドをフォームに追加します。
画面の右側には、フィールドのグループ化のいくつかの展開可能なセクションが表示されます。メールアドレスフィールドは、高度なフィールドセクションにあります。メールアドレスフィールドをフォームに追加するには、メールというラベルのボタンをクリックするだけです。
ボタンをクリックすると、最小限のデフォルトコンテンツでフィールドがフォーム（画面の左側）に追加されます。新しいフィールドの上にカーソルを移動し、ホバーしていることを示す視覚的なインジケーターが表示されたら、フィールドをシングルクリックしてオプションを表示します。
メールフィールドは非常にシンプルで、調整は1つだけ必要です。ルールセクションで、フィールドを必須に設定します。この設定により、メールアドレスなしではチェックアウトフォームは送信されません。
多くの方は、名と姓のようなフィールドも追加したいと思うでしょう。この記事ではそれらについては説明しませんが、プロセスはメールフィールドの追加と非常によく似ています。
必須のメールアドレスフィールドが追加されたので、商品関連フィールドに進む前に、もう1つフィールドを追加しましょう。
構造のため、また Gravity Forms に慣れるために、フォームにセクションと呼ばれるフィールドを追加します。セクションは、フォームの入力を視覚的なセクションに分割する簡単な方法であり、フォームの入力フローに役立ちます。
セクションフィールドは、標準フィールドセクションにあります。フォームに追加して展開し、オプションを表示します。
フィールドの種類と、次に商品フィールドを追加するという事実に基づいて、このセクションフィールドを商品フィールド表示の見出しとして考えましょう。
フィールドラベルと説明フィールドをお好みに合わせて調整します。フィールドラベルは「商品情報」のようなものにし、商品自体について開示したい小さな詳細は説明に記述します。
フォーム作成プロセスのいつでも、フォームビルダーのすぐ上にあるナビゲーションメニュー内のプレビューリンクをクリックすることで、フォームの構造をプレビューできます。一部のフィールドでは、プレビューするためにフォームを更新する必要があることに注意してください。
フォームのプレビューは、フロントエンドでのデザイン方法を表すものではありません。代わりに、プレビューを使用して構造と機能を確認してください。現時点では、メールフィールド、セクションタイトル（ラベル）、説明しかありません。
Gravity Formsにまだ慣れていない場合、ここで行ったことは、Easy Digital Downloadsだけでなく、作成するあらゆる種類のフォームでフォームビルダーを使用する方法です。基本的なフォームビルダーの機能が不明な場合は、Gravity Formsのドキュメントをご覧ください。
プロセスのこの段階では、フォームのプレビューは次のようになります。
フォームのタイトル、フォームの説明、メールフィールド、製品情報セクションが配置されたので、フォームに製品を追加できます。
製品フィールドの追加
これは非常に基本的なフォームであり、特定の製品のチェックアウトとして機能することを目的としていることを忘れないでください。カートに追加ボタンと従来のチェックアウトを使用する代わりに、特定の製品のカスタムチェックアウトフォームを希望する人にとっては、このフォームは理想的な代替手段となります。
とはいえ、情報提供のために製品フィールドをフォームに追加して表示します。顧客は、フォームがアクセスを許可する製品とその価格について通知されます。
画面の右側にある[価格設定フィールド]セクションを見つけます。そのセクションで、[製品]というラベルのボタンをクリックして、新しい製品フィールドを追加することを選択します。追加したら、フィールドを展開します。
「Example Product」という名前の製品を販売します。この製品はすでにダウンロードエントリとして作成されています。[フィールドラベル]と[説明]セクションに入力した後、[EDDダウンロードに接続]セレクトメニューから「Example Product」を選択して、製品フィールドをEasy Digital Downloadsに接続します。
設定を続行し、[フィールドタイプ]を「単一製品」に、[価格]を10ドルに設定します。フォームを完全に制御しているため、自分で価格を設定する必要があることに注意してください。ダウンロードエントリから取得されるわけではありません。
最後に、[数量フィールドを無効にする]ボックスをチェックし、唯一の[ルール]を必須に設定します。
カスタムチェックアウトフォームの最新のプレビューを見てみましょう。
これらのフィールドを配置するだけで、顧客に「Example Product」を販売する準備ができたフォームを作成できました。あとは支払いを受け付けるフィールドを追加するだけです。
製品フィールドの表示は任意であることにご注意ください。フォームを製品に接続するにはフィールドが必要ですが、フィールドタイプとして「非表示」を選択すると、送信時にフィールドが含まれますが、顧客はフィールド自体を見ることはありません。
この操作を行う理由は、このチェックアウトフォームが、価格を含む製品に関する重要な情報がすでに記載されているページに（ショートコードを介して）埋め込むことができるためです。この場合、フォームに製品フィールドを表示すると冗長になり、顧客を混乱させる可能性があります。
フィールドが存在する必要があることを覚えておいてください。
この時点で、フォームを保存する必要があります。次のステップでは、支払いオプションを設定するために他のページにアクセスする必要があります。完了したら、フォームに戻ります。
支払いフィールドの追加
これで、顧客から支払いを受け付けることができます。そのためには、フォームに少なくとも1つの支払い方法を受け付けるように設定する必要があります。前述のように、支払いを処理するためにGravity Forms用のPayPal Payments Standardアドオンを使用します。
選択する支払いゲートウェイによっては、フォームに直接フィールドを追加する必要がある場合とない場合があります。たとえば、Stripeアドオンを使用している場合、フォームビルダーにクレジットカードフィールドが追加され、以前に行ったように選択できます。
ただし、PayPal Payments Standardアドオンはそうではありません。代わりに、顧客トランザクションでPayPalを使用するようにフォームを設定するには、Gravity Formsの指示に従う必要があります。
この記事では、これらの詳細については説明しません。これらは、Easy Digital Downloadsと統合されているかどうかにかかわらず、Gravity Formsに適用されます。したがって、ニーズに関連するドキュメントを見つけるには、Gravity Formsのドキュメントを使用することをお勧めします。
支払いゲートウェイの設定に必要なすべての手順を完了してください。新しいフィールドをフォームに追加する必要がある場合は、上記と同じ方法で追加してください。
最終的な支払い金額（合計）の追加
支払いオプションを設定する際に、受け入れる各支払いタイプに対してフィードを作成するように指示されたはずです。PayPal Payments Standardユーザーはこのドキュメントにアクセスしました。
そのフィードの作成時に、フィードの支払い金額を設定する必要がありました。これは、チェックアウトフォームが送信されるたびに、顧客が特定の金額を支払う必要があり、フィードはその金額をどこから取得するかを知る必要があることを意味します。
支払い金額設定は、フォームの合計金額を保持するフォームフィールドのいずれかからデータを取得するように設定する必要があります。ただし、まだそのフィールドを設定していません。フィードの進行状況を保存し、フィールドを追加するために保存済みのフォームに戻ってください。
フォームビルダー画面の右側で、価格フィールドセクションからフォームに合計フィールドを追加することを選択します。追加したら、新しいフィールドを展開します。
設定項目が非常に少ないことに気づくでしょう。このフィールドは、他のフォームフィールドや顧客の操作から取得した情報に基づいて、フォームの合計を自動的に計算するように設計されています。
このフィールドをフォームに追加し、フォームを更新したら、このフィールドをフィードの支払い金額として設定できます。
Gravity Formsのドキュメントの残りの部分に従って、フィード設定を完了し、新しいフィードを保存してください。
カスタムチェックアウトフォームの使用
支払いを処理できるカスタムチェックアウトフォームを作成したので、フォームを表示する必要があります。Gravity Formsは、[[gravityform]]ショートコードを使用してこれを非常に簡単にします。任意のページ、投稿、またはカスタム投稿タイプで、[フォームを追加]ボタンをクリックしてコンテンツにフォームを追加します。
ページが保存されると、フォームはフロントエンドに出力され、設定した製品の支払いを受け付ける準備が整います。
PayPal Standardが唯一設定されているゲートウェイの場合、PayPal関連のテキストはフォームに表示されないことに注意してください（カスタムテキストを追加した場合を除く）。フォームに入力して送信するだけで、顧客は支払いを完了するためにPayPalにリダイレクトされます。
条件付きロジックの例
この記事ですべての可能なフォーム構成を網羅することは不可能です。しかし、フォームをよりスマートで使いやすくするための開始点として、いくつかの例を共有できます。
Easy Digital Downloadsサイトで使用しているフォームの例を見てみましょう。新しいユーザーがストアを立ち上げるために必要な拡張機能を選択するのを支援するために、スターターパッケージを作成しました。（更新：全体的な購入オプションの変更により、スターターパッケージは現在利用できません。存在するかのように読み進めてください。）
このスタンドアロンフォームは、ショッピングカート機能に依存しません。
拡張機能の選択を含む論理的なセクションに分割されており、顧客が行う必要があるのは、ビジネスニーズに合った拡張機能を選択し、個人情報と支払い情報を入力し、利用規約に同意して、購入を完了することだけです。
フォームは完全にカスタムであるだけでなく、サイト上の多数のカスタムチェックアウトフォームの1つにすることもできます。上記の情報があれば、それを実現するための道を歩み始めることができます。
カスタム製品パッケージ
スターターパッケージフォームで、顧客が特定の製品を選択できるように、焦点を絞った拡張機能セクションが使用されていることに気づいたかもしれません。特にマーケティングセクションを見てみましょう。
ユーザーがマーケティング拡張機能のいずれかのチェックボックスをオンにすると、その拡張機能がカスタムスターターパッケージに追加され、フォームの合計が変更されます。
これを達成するには、次の手順を実行する必要があります。
- フォームに新しいチェックボックスフィールドを追加します。展開すると、選択肢セクションの下に3つのデフォルトのチェックボックスオプションが表示されます。たとえば、このチェックボックスフィールドを使用して5つの製品を選択できるようにする場合、5つの製品の名前を表す5つの選択肢を作成する必要があります。このフィールドを必須にしてください。
- フォームに新しい製品フィールドを追加します。製品フィールドを、チェックボックスの選択肢から参照したEasy Digital Downloadsの製品のいずれかに接続するように構成します。製品の一般設定タブで、フィールドタイプを「単一製品」に設定します（非表示にすることはできません）価格を設定します。詳細設定タブで、条件付きロジックを有効にする設定をオンにし、ステップ1のチェックボックスフィールドの正しい「選択肢」が選択された場合にのみフィールドが表示されるように設定します。
- ステップ1で作成したすべての選択肢に対して、ステップ2を繰り返します。
これにより、条件が満たされた場合にのみ製品フィールドがフォームに追加されます。これらの条件は、チェックボックスフィールドからの選択肢のチェックです。これらの選択肢が製品を表し、条件付きフィールドロジックを通じてそれらにリンクされている限り、顧客は独自のカスタムパッケージを作成できます。
支払い方法セレクター
スターターパッケージフォームの最後に、顧客に支払い方法を選択するように指示します。StripeとPayPalを通じて支払いを受け付けています。
前述のように、支払い情報をフォームに追加するためにさまざまな方法が使用されます。PayPal Payments Standardはフィールドを必要としませんが、Stripeは複数のフィールドを必要とします。Stripeのクレジットカードフィールドと追加のアドレスフィールドをフォームに追加して、クレジットカード決済を処理する必要があります。
これを作成するには、次の手順を実行する必要があります。
- フォームに新しいラジオボタンフィールドを追加します。展開すると、選択肢セクションの下に3つのデフォルトのラジオオプションが表示されます。2つの支払い方法から顧客が選択できるようにするため、支払い方法の名前を表す2つの選択肢が必要です。この場合、選択肢としてクレジットカード/デビットカードとPayPalを選択しました。このフィールドを必須にしてください。
- Gravity Formsの指示に基づいて、クレジットカード決済を受け付けるために必要なすべてのフィールドを追加します。必要なすべての情報を収集するようにフィールドを構成します。すべてのクレジットカード関連フィールドの詳細設定タブで、条件付きロジックを有効にする設定をオンにし、ステップ1のラジオボタンフィールドの正しい「選択肢」が選択された場合にのみフィールドが表示されるように設定します。
- PayPalはフォームにフィールドを必要としないため、フォームのPayPalフィードに移動し、設定で条件付きロジックを有効にする設定をオンにし、ステップ1のラジオボタンフィールドの正しい「選択肢」（PayPal）が選択された場合にのみフィードが使用されるように設定するだけで済みます。
選択はあなた次第です
条件付きフィールドロジックの概念を理解すると、カスタムチェックアウトフォームを作成するたびに、自由に使えるキャンバスが手に入ります。そのため、このテーマについて書くのは難しいことです。
例を提供することはできますが、可能性は無限です。すべては条件付きロジックと製品フィールドの戦略的な使用にかかっています。
製品に、より専門的なチェックアウトフォームが必要かどうかは、あなた次第です。同様に、スターターパッケージのようなものを作成することは、あなただけが下せるビジネス上の決定です。
機能で遊んでみて、儲かるアイデアがいくつか思いつくか試してみてください。
よくある質問
Recurring Payments拡張機能でGravity Forms Checkoutを使用できますか？
いいえ。Recurring Paymentsは上記の構成と統合されません。
メールレシートと購入確認についてはどうですか？
デフォルトのEasy Digital Downloads購入確認リダイレクトは適用されなくなります。ただし、Gravity Formsでは、必要に応じてカスタム確認動作を設定できます。標準的な静的リンクのページが推奨されます。
メールレシートは、レシートテンプレートにある製品関連情報を含めて、引き続きユーザーに送信されます。この動作は変更されません。
ヒント：Gravity Formsで作成したカスタム確認から、購入後にメールを確認するように顧客に指示し、混乱を最小限に抑えることができる重要な情報へのリンクを提供してください。
顧客がカスタムパッケージを作成できるようにした場合、それらはバンドルとして処理されますか？
Easy Digital Downloadsのコアバンドル機能は適用されません。顧客がカスタムチェックアウトフォームを通じて10個の製品を購入した場合、各製品は個別の購入として扱われます。
割引をどのように使用しますか？
カスタムチェックアウトフォームを使用する顧客に割引を提供するには、製品フィールドの価格を割引価格に設定するだけで済みます。顧客はデフォルトのチェックアウトフォームのように割引コードを入力することはできません。
カスタムチェックアウトフォームのスタイル設定方法は？
ここで説明したことはすべて、フォームとその機能の構築に関するものであることに注意することが重要です。これらは一般的なフォーム要素であり、他のHTML要素と同様に、テーマまたは独自のカスタムCSSでスタイル設定する必要があります。
フォームをテストするときは、適切な機能についてテストするようにしてください。見た目がどれほど魅力的かは、機能の良さの指標ではありません。ご想像のとおり、スターターパッケージの表示を作成するには、数時間のカスタムデザイン作業が必要でした。
この記事で述べたことについて質問がある場合は、コメントで下に質問を残してください。
サポートについては、サポートフォームをご利用ください。
