メインコンテンツまでスキップ

Checkout Forms

Checkout Forms は、新規顧客の獲得を目指す際に、さまざまなアプローチを試すための簡単で柔軟な方法です。

Ultimate Multisite 2.0 には Checkout Form エディターがあり、必要なだけフォームを作成できます。項目や提供する商品なども変えられます。

この機能にアクセスするには、左サイドバーの Checkout Forms メニューに移動します。

Checkout Forms 一覧

このページでは、所有しているすべてのチェックアウトフォームを確認できます。

一覧テーブルには ステータス 列があり、各フォームが現在顧客に利用可能かどうかを確認できます。

ステータス意味
有効そのショートコードまたは登録ページが公開されている場所なら、どこでもフォームを使用できます。
無効フォームは保存されていますが無効化されています。再度有効にするまで、顧客はこのフォームでチェックアウトを完了できません。

公開中の登録フローを編集する前に、ステータス列を使用してください。特に、下書きや季節限定のチェックアウトフォームを本番用フォームと並べて保持している場合に役立ちます。

新しく作成する場合は、ページ上部の Add Checkout Form をクリックするだけです。

開始点として、単一ステップ、複数ステップ、空白の 3 つのオプションから 1 つを選択できます。その後、Go to the Editor をクリックします。

開始点として単一ステップまたは複数ステップを選ぶと、フォームテンプレートには標準でテンプレート選択フィールドが含まれるようになりました。このフィールドにより、顧客は登録手続き中にサイトテンプレートを選択できます。エディター内の他のフィールドと同じように、そのまま残すことも、削除することも、位置を変更することもできます。

チェックアウトフォームエディター

または、名前の下にあるオプションをクリックして、既存のフォームを編集または複製できます。そこには、フォームのショートコードをコピーするオプションや、フォームを削除するオプションもあります。

チェックアウトフォームのホバー操作

チェックアウトフォームエディターの概要​

チェックアウトフォームエディターは、登録フォームを作成するための包括的なインターフェースを提供します。エディターのレイアウト概要は次のとおりです。

チェックアウトフォームエディターの概要

チェックアウトフォームの編集​

さまざまな目的に合わせてチェックアウトフォームを作成できます。この例では登録フォームを扱います。

チェックアウトフォームエディターに移動したら、フォームに名前（内部参照にのみ使用）とスラッグ（ショートコードの作成などに使用）を付けます。

チェックアウトフォームエディター

フォームはステップとフィールドで構成されます。新しいステップを追加するには、Add New Checkout Step をクリックします。

新しいチェックアウトステップを追加

モーダルウィンドウの最初のタブで、フォームのステップ内容を入力します。ID、名前、説明を設定してください。これらの項目は主に内部で使用されます。

購入手続きフォームのステップ内容タブ

次に、ステップの表示条件を設定します。「常に表示」、「ログイン中のユーザーのみに表示」、「ゲストのみに表示」から選択できます。

購入手続きフォームのステップ表示条件タブ

最後に、ステップのスタイルを設定します。これらは任意項目です。

購入手続きフォームのステップスタイルタブ

これで、最初のステップにフィールドを追加できます。Add New Field をクリックして、必要なセクションの種類を選択してください。

フィールド付き購入手続きフォームステップ

各フィールドには、入力するパラメーターが異なります。最初の入力項目として、「ユーザー名」フィールドを選択します。

フィールドタイプ選択ドロップダウン

ユーザー名フィールドの内容設定

ユーザー名フィールドの表示条件設定

ユーザー名フィールドのスタイル設定

必要なだけステップとフィールドを追加できます。顧客が選ぶための商品を表示するには、Pricing Table フィールドを使用します。クライアントにテンプレートを選ばせたい場合は、Template Selection フィールドを追加します。ほかも同様です。

新しい項目を追加ダイアログ

注: ユーザー名、メール、パスワード、サイトタイトル、サイトURL、注文概要、支払い、送信ボタンは、決済フォームを作成するための必須項目です。

決済フォームを作成している間は、いつでもプレビューボタンを使って、クライアントにフォームがどのように表示されるかを確認できます。既存ユーザーとして表示するか、訪問者として表示するかを切り替えることもできます。

決済フォームのプレビューボタ��ン

決済フォームのプレビューモーダル

最後に、詳細オプションでは、「ありがとうございます」ページのメッセージを設定したり、コンバージョンを追跡するスニペットを追加したり、決済フォームにカスタムCSSを追加したり、特定の国に制限したりできます。

詳細オプション

右側の列にあるこのオプションを切り替えることで、決済フォームを手動で有効または無効にすることも、フォームを完全に削除することもできます。

有効切り替え

フォームを削除するには、フォーム操作内の削除オプションをクリックします。

決済フォームの削除オプション

決済フォームの保存を忘れないでください！

保存ボタン

フォームのショートコードを取得するには、「ショートコードを生成」をクリックし、モーダルウィンドウに表示された結果をコピーします。

ショートコード付き保存ボタン

料金表項目​

料金表フィールドは、購入手続きフォームに商品を表示し、顧客がプランを選べるようにします。このフィールドを編集すると、いくつかのオプションを設定できます。

料金表フィールド設定

フロントエンドの登録フォームでは、料金表は次のように表示されます。

フロントエンドの購入手続き料金表

  • 商品: 表示する商品と表示順を選択します。
  • 異なる期間を強制: 有効にすると、現在選択されている請求期間に一致する価格バリエーションがあるかどうかに関係なく、すべての商品が表示されます。無効（初期設定）の場合、選択した期間のバリエーションがない商品は非表示になります。 料金表の期間強制オプション
  • 事前選択時に非表示: URL（例: /register/premium）経由でプランがすでに選択されている場合、料金表を非表示にします。
  • 料金表テンプレート: 料金表の見た目のテンプレート（シンプルリスト、レガシーなど）を選択します。

フォームにその商品の購入手続きを完了するために必要なフィールドが含まれる前に商品を料金表へ追加すると、エディターに警告が表示されます。本番の登録フォームを公開または変更保存する前に、この警告を使って不足している必須フィールドを追加してください。

期間選択切り替えの追加​

商品に価格バリエーション（例: 月額料金と年額料金）を設定している場合、チェックアウトフォームに期間選択フィールドを追加できます。このフィールドは、顧客が請求期間を切り替えられるトグルを表示し、価格表はリアルタイムで動的に更新されます。

ステップ 1: 商品に価格バリエーションを設定する​

期間選択フィールドを追加する前に、商品に価格バリエーションが設定されていることを確認してください。Ultimate Multisite > 商品に移動し、商品を編集して、価格バリエーションタブを開き、別の請求期間（例: 割引価格の年額）を追加します。

商品の価格バリエーションタブ

ステップ 2: チェックアウトフォームに期間選択フィールドを追加する​

  1. Ultimate Multisite > チェックアウトフォームに移動し、チェックアウトフォームを編集します。

  2. 価格表フィールドを含むステップまで下にスクロールし、新規フィールドを追加をクリックします。

  3. フィールド種別の選択ダイアログで、期間選択をクリックします。

期間選択を表示している新規フィールド追加ダイアログ

  1. 期間オプションを設定します。各オプションには次が必要です:

    • 期間: 数値（例: 1）
    • 期間単位: 期間の種別（日、週、月、または年）
    • ラベル: 顧客に表示されるテキスト（例: 「月額」、「年額」）

  2. + Add Optionをクリックして、期間の選択肢をさらに追加します。これらの選択肢は、商品で設定した価格バリエーションと一致している必要があります。

期間選択フィールド設定

  1. Period Selector Templateを選択します（Clean が初期設定で、カスタムCSSに対応したシンプルなスタイル付きセレクターを表示します）。

  2. Save Fieldをクリックします。

ステップ3：Pricing Tableの上にフィールドを配置する​

最適なユーザー体験のため、チェックアウト手順で Period Selection フィールドが Pricing Table フィールドの前に表示されるようにしてください。チェックアウトフォームエディターでフィールドをドラッグして並べ替えられます。これにより、顧客はまず請求期間を選び、その期間の価格を確認できます。

フィールド順序を表示しているチェックアウトフォームエディター

フロントエンドでの動作​

設定が完了すると、登録ページを訪れた顧客には、価格表の上に期間セレクターが表示されます。別の請求期間をクリックすると、次のように動作します。

  • 価格表は即座に更新され、選択した期間の価格が表示されます（ページの再読み込みは不要です）。
  • Pricing Table フィールドで Force Different Durations が無効になっている場合、選択した期間の価格バリエーションがない商品は非表示になります。
  • Force Different Durations が有効になっている場合、選択した期間のバリエーションがない商品でも、すべての商品が表示されたままになります（初期設定の価格が表示されます）。

URLで請求期間を事前選択する​

URL から製品と請求期間を事前選択することもできます。Ultimate Multisite は次の URL パターンに対応しています。

  • /register/premium — 「Premium」製品のみを事前選択します
  • /register/premium/12 — 製品と 12 か月の期間を事前選択します
  • /register/premium/1/year — 製品と 1 年の期間を事前選択します

テンプレート選択フィールド​

テンプレート選択フィールドでは、購入手続き中に顧客がサイトテンプレートを選べます。Ultimate Multisite v2.6.1 で追加された単一ステップおよび複数ステップの購入手続きフォームテンプレートには、現在は標準で含まれています。

フィールドを手動で追加する​

v2.6.1 より前に作成されたフォームを使用している場合、または空のテンプレートから始めた場合は、次の手順を行います。

  1. Ultimate Multisite > 購入手続きフォームに移動し、購入手続きフォームを編集します。
  2. サイト詳細を収集するステップで、新しいフィールドを追加をクリックします。
  3. フィールドタイプのダイアログからテンプレート選択を選択します。
  4. フィールドを設定します。
    • ラベル — テンプレートグリッドの上に顧客へ表示される見出しです（例：「サイトテンプレートを選択」）。
    • 必須 — 先に進む前に顧客がテンプレートを選択する必要があるかどうかです。

仕組み​

顧客が購入手続き中にテンプレートを選ぶと、Ultimate Multisite は新しいサイトをプロビジョニングする際にそれを使用します。表示されるテンプレートは、サイトテンプレート一覧（Ultimate Multisite > サイトテンプレート）から取得されます。顧客が利用可能としてマークされたテンプレートのみがここに表示されます。

購入手続きフォームのベースドメイン​

Ultimate Multisite v2.13.0 は、checkout フォームの サイト URL フィールドに設定されたドメインをネットワークのベースドメインとして扱います。example.com や sites.example.com のように、1 つ以上の共有登録ドメイン配下で顧客にサイトを作成させたい場合は、そのフィールドの利用可能ドメイン設定を使用してください。

共有 checkout フォームのベースドメインは、サイトごとのカスタムドメインマッピングとしては扱われません。顧客がそれらのベースのいずれかにサブディレクトリサイトを作成しても、Ultimate Multisite は、その共有ホストをその 1 つのサイトだけに所属させるマッピング済みドメインレコードを作成しません。共有ホストは、同じ checkout フォームベースを使う兄弟サイトでも引き続き利用できます。

customer-example.com のような顧客ごとのマッピング済みホストには、カスタムドメインを使用してください。多くのサイトで使える共有登録ホストには、checkout フォームのベースドメインを使用してください。

フィールドの削除​

サイトテンプレートを提供しない場合は、フォームからテンプレート選択フィールドを削除してください。顧客には、Ultimate Multisite > 設定 > サイトテンプレート で設定されている既定のテンプレートが割り当てられます。