WordPressでオンライン注文フォームを作成する方法（2つの方法）

レストランや小規模なブティックのようなビジネスを経営している場合、完全なオンラインストアは必要ないかもしれません。

多くの場合、シンプルなオンライン注文フォームが、顧客が食事や特定の商品を注文できるようにする最善の方法です。

これにより、ショッピングカートシステムの複雑さを回避できます。そのため、自分で作成するのに役立つ最高の注文フォームオプションを調査しました。

この投稿では、お気に入りのツールである WPForms と WP Simple Pay を使用して、これを実現する 2 つの簡単な方法を紹介します。早速始めましょう！

WordPressでオンライン注文フォームを作成する理由

オンラインストアをセットアップして注文を受け付け、支払いを行い、在庫を管理するビジネスもあります。しかし、ショッピングカートを備えた複雑なeコマースウェブサイトは必要ないかもしれません。

たとえば、レストランを経営している場合、オンラインストア全体を作成する必要はありません。販売している商品が数点しかない場合も同様です。

多くの場合、シンプルなオンライン注文フォームで十分です。フォームをカスタマイズして、顧客がオンライン、受け取り時、または配達時に支払えるようにすることができます。

オンライン注文フォームの使用は、中小企業にとっていくつかの重要な利点をもたらします：

• 注文プロセスが簡素化されます。 お客様は、製品仕様、数量、配送情報などの必要な詳細をすべて入力できます。
• 正確性が保証されます。 電話での注文よりもエラーが少なく、必要な情報を正確に入手できます。
• 収益が増加します。 お客様が注文しやすくなることで、エンゲージメントが高まり、売上が増加することがよくあります。

WordPressでオンライン注文フォームを簡単に作成する方法を見てみましょう。このチュートリアルでは2つの方法を説明します。以下のリンクを使用して、選択した方法にジャンプできます。

注文フォームに最適なツールを選択する

WPFormsとWP Simple Payはどちらも複数の製品とサブスクリプション設定をサポートしていますが、それぞれ異なるニーズに対応しています。決定に役立つ簡単な比較を以下に示します。

プラグイン	最適	主な機能
WPForms	多機能でカスタマイズ可能な注文フォーム	✅複数の決済ゲートウェイ ✅条件付きロジック ✅複数アイテムの合計、✅高度なフィールド ✅ファイルアップロード ✅カスタム通知
WP Simple Pay	シンプルなStripeベースの注文フォーム	✅1回払いまたは定期払いを受け付ける ✅後払い ✅Apple PayとGoogle Pay ✅Stripeサブスクリプション ✅最小限の設定

方法1：WPFormsで注文フォームを作成する（複数商品＆amp;高度な設定）

複数の商品、条件付きロジックを処理し、合計金額を自動計算できる完全にカスタマイズ可能な注文フォームが必要な場合は、WPFormsが最良の選択肢です。

WPFormsを使用すると、コーディングなしで柔軟な注文フォームを作成できます。複数の製品、カスタムフィールド、条件付きロジックを追加でき、Stripe、PayPal、またはAuthorize.netを介して支払いを統合できます。

これにより、簡単なチェックアウト以上のものが必要なビジネスに最適です。

私たちはWPBeginnerのウェブサイトでフォームを作成するためにWPFormsを何度も使用してきましたが、一度も失敗したことはありません。私たちの経験について詳しくは、WPFormsレビューをご覧ください。

WPFormsはAIフォームビルダーも提供していますが、このチュートリアルでは、すべての機能を実際に確認できるように、カスタム注文フォームを手動で作成することに焦点を当てます。

今回はプラグインの既製の注文フォームテンプレートの使いやすさをお見せしたいので、これを使用しません。しかし、将来的に複数のフォームを作成する必要があることがわかっている場合は、非常に役立つ可能性があることを覚えておいてください。

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

さて、始めるには、WPFormsをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインを有効にした後、WordPressダッシュボードから「WPForms » Settings」ページにアクセスして、ライセンスキーを入力します。この情報は、WPFormsウェブサイトのアカウントで見つけることができます。

ステップ2：新しい注文フォームを作成する

次に、WordPressダッシュボードからWPForms » 新規追加ページに移動します。

ここで「テンプレートの選択」ページに移動し、フォームの名前を追加することから始めることができます。次に、フォームテンプレートを選択する必要があります。「請求書/注文フォーム」テンプレートの使用をお勧めします。

このテンプレートを選択するには、カーソルを合わせるだけで「テンプレートを使用」ボタンをクリックしてください。

ステップ3：注文フォームフィールドをカスタマイズする

これで、WPForms のドラッグ＆ドロップエディターに移動します。ここでは、右側にフォームのプレビューが表示され、画面の左側の列にフォームフィールドが表示されます。

サイドバーからフィールドをドラッグアンドドロップして、オンライン注文フォームを自由に編集できるようになりました。

デフォルトのテンプレートには、名前、住所、電話番号など、必要となる情報のほとんどが含まれています。ただし、実際の商品をリストアップする必要があります。

これを行うには、「利用可能な商品」フィールドをクリックして編集します。これにより、左側の列に設定が開かれ、顧客が注文できる各商品の名前と価格を入力できます。

価格はフォームに自動的に表示されないため、商品名に追加することを検討してください。

追加オプションをさらに追加するには、追加アイテムを挿入したい場所にある(+)アイコンをクリックするだけです。(-)アイコンをクリックしてアイテムを削除することもできます。

注意: いくつでもアイテムを追加できます。ただし、顧客はこのフィールドから1つのオプションしか選択できません。

オプションのカテゴリがいくつかある場合は、フィールドをコピーしてグループを作成することを検討してください。

「利用可能なアイテム」フィールドは、カーソルを合わせたときや選択されているときに表示される「コピー」アイコンをクリックすることでコピーできます。

各グループに適した名前にフィールドの「ラベル」を変更することも忘れないでください。

1つのフィールドで顧客が2つ以上のオプションを選択できるようにしたい場合は、別のタイプのフィールドを使用する必要があります。

このためには、「フィールドを追加」タブに切り替え、「支払いフィールド」セクションまでスクロールダウンします。次に、「チェックボックスアイテム」フィールドを選択してフォームに追加します。

これで、以前のようにそのフィールドを編集し、アイテムの名前と価格を入力できます。顧客は注文したいアイテムをいくつでも選択できます。

製品の画像を表示したい場合も、簡単にできます。「画像選択を使用」スイッチを切り替えるだけです。

これを行うと、「画像をアップロード」ボタンが各アイテムの下に表示されます。

その後、お好みに応じて、コンピューターから、またはWordPressのメディアライブラリから画像を追加できます。

WPFormsは画像をリサイズまたは圧縮しないことに注意してください。最適なレイアウトのためには、ウェブ用に最適化された正方形の画像（例：250×250ピクセル）を使用することをお勧めします。

これで、残りのフォームフィールドを同様の方法でカスタマイズできます。それが完了したら、上部にある「保存」ボタンをクリックして設定を保存します。

ステップ4：注文フォームが送信する通知を設定する

注文フォームを作成している場合は、通知を設定することをお勧めします。これにより、ウェブサイトで誰かが注文を行ったときにすぐにメールアラートを受け取ることができます。

これを行うには、左側の列から「設定」セクションに切り替え、「通知」タブをクリックします。デフォルトでは、完了した注文フォームはWordPressサイトの管理者アドレスにメールで送信されます。

ただし、これを変更したい場合や、注文フォームを複数のアドレスにコピーしたい場合があります。

「送信先メールアドレス」ボックスに、メールアドレスまたはアドレスを簡単に入力できます。複数のメールアドレスを入力する場合は、コンマで区切ってください。

注文ごとに同じにならないように、件名を変更することも検討してください。これにより、混雑したメール受信トレイで注文を追跡しやすくなる可能性があります。

ここでは、メールの件名を「お客様からのご注文」とし、その後に顧客名を表示するように変更しました。件名に名前フィールドを挿入するために「スマートタグを表示」を使用しました。

好みに応じて、他のすべての詳細を変更できます。

お客様にメール通知を設定することを強くお勧めします。これにより、注文した内容を思い出させ、注文を受け取ったことを知らせることができます。

新しいメール通知を設定するには、「新規通知を追加」ボタンをクリックします。

新しい通知の名前を入力するように求められます。

顧客はこの名前を見ないので、好きなように呼んでください。「顧客レシート」や「顧客メール確認」のような名前をお勧めします。

「送信先メールアドレス」は、お客様のメールアカウントにする必要があります。これは、このボックスから {admin_email} を削除する必要があることを意味します。

次に、「スマートタグを表示」をクリックし、利用可能なリストから「メール」フィールドを選択します。

メールに関するその他の詳細も入力します。件名は「ご注文は」と会社名を使用することをお勧めします。

「メールメッセージ」フィールドには、お客様へのメッセージを追加することになるでしょう。

{all_fields}タグは、顧客がフォームに入力したすべての情報を提供します。詳細な手順については、WordPressフォーム送信後に確認メールを送信する方法に関するチュートリアルをご覧ください。

ステップ 5: お客様への確認メッセージを設定する

お客様にメールレシートを送信するだけでなく、画面上の確認画面を表示して、注文が送信されたことを知らせることもできます。

これは、設定 » 確認タブで行うことができます。

デフォルトの確認メッセージは、「お問い合わせいただきありがとうございます！まもなくご連絡いたします。」です。

これは好きなように変更でき、ビジュアルエディターを使用してテキストをフォーマットできます。

または、お客様をウェブサイトの「ありがとう」ページ、あるいはまったく別のウェブサイトにリダイレクトすることもできます。

確認メッセージを設定したら、画面上部の「保存」をクリックします。

ステップ 6: 注文フォームと支払いを連携させる（オプション）

注文フォームを通じて支払いを受け付けたい場合は、支払い処理業者と連携する必要があります。

WPFormsは複数の決済ゲートウェイ（Stripe、PayPal、Authorize.net）をサポートしており、柔軟なチェックアウトオプションを備えた完全な注文フォームを作成できます。お客様はオンラインで支払いを行い、注文の詳細をすべて1つのフォームで収集できます。

このチュートリアルではPayPalを使用しますが、Stripeの手順も同様です。

まず、フォームビルダーを終了する必要があります。これは、右上にある「X」をクリックすることで実行できます。保存されていない変更がある場合は、フォームを保存するように求められます。

次に、WordPressダッシュボードの「WPForms » Addons」ページに移動します。「PayPal Standard Addon」までスクロールダウンし、その下にある「Addonをインストール」ボタンをクリックします。

アドオンは自動的にインストールおよび有効化されます。

次に、**WPForms » すべてのフォーム**の下にあるフォームに戻ります。フォームビルダーが起動したら、「支払い」タブに切り替え、「PayPal Standard」オプションをクリックします。

次に、「PayPal Standard支払い」を有効にするスイッチを切り替えます。

次に、フォームの詳細を入力します。PayPalアカウントに関連付けられたメールアドレスを追加することから始めることができます。

「モード」ドロップダウンは「本番」のままにし、「支払いタイプ」は「製品とサービス」のままにします。

注文フォームで配送先住所を収集している場合は、「配送」を「住所を尋ねない」に変更できます。

「キャンセルURL」を入力する必要はありませんが、チェックアウトプロセスを完了しなかった場合に顧客を送信するウェブサイト上のページを作成することをお勧めします。

入力が完了したら、「保存」ボタンをクリックします。

これで、ユーザーがフォームを送信すると、自動的に PayPal にリダイレクトされて支払いが行われます。フォームに余分なフィールドを追加したり、他に何もする必要はありません。

詳細については、WordPressにPayPal支払いフォームを追加する方法に関するチュートリアルをご覧ください。

ステップ 7: 注文フォームをウェブサイトに追加する

最後のステップは、注文フォームをウェブサイトに追加することです。

フォームを追加したいページを選択するか、ページ » 新規追加 で新しいページを作成します。

次に、「ブロックを追加」（+）ボタンをクリックして新しいブロック（フォームを配置したい場所）を追加し、WPFormsブロックを見つけます。ブロックの「ウィジェット」セクションの下にありますが、検索バーに「WPForms」と入力して見つけることもできます。

WPForms ブロックが表示されます。「フォームを選択」ドロップダウンをクリックし、フォームを選択します。

その後、WordPressエディターでフォーム自体のプレビューが表示されます。

準備ができたら、ページを保存して公開（または更新）します。サイトでライブ表示して、フォームが機能していることを確認できます。顧客と共有する前に、期待どおりに機能することを確認するためにフォームをテストすることをお勧めします。

詳細については、WordPressにフォームを埋め込む方法に関するガイドをご覧ください。

フォームが送信されたときにメール通知を受信することを確認することも良い考えです。そうでない場合は、WordPressでメールが送信されない問題を修正する方法に関する投稿をご覧ください。

メールを見逃したり、誤って削除したりした場合でも、WPFormsはWordPressデータベースにフォームデータを保存します。WordPressダッシュボードのWPForms » Entriesに移動すると、すべての注文を見つけることができます。

エントリのリストを表示するには、フォームの名前をクリックします。詳細を表示するには、これらのいずれかの横にある「表示」をクリックします。

方法 2: WP Simple Pay で注文フォームを作成する (サブスクリプション & シンプル設定)

ショッピングカートなしでStripe中心の注文フォームが必要な場合は、WP Simple Payが理想的です。

一括払いまたは定期払いを受け付け、後払い（Buy Now Pay Later）を利用し、Apple PayやGoogle Payなどのモバイル決済を受け付け、複数の商品のフォームフィールドをカスタマイズできます。

Stripeの機能を最大限に活用しながら、迅速に注文フォームを設定するのに最適です。

このツールをさまざまなシナリオで徹底的にテストしましたが、非常に気に入りました。テスト体験の詳細については、WP Simple Payのレビューをご覧ください。

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

まず、WP Simple Payプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

プラグインをアクティブ化すると、画面にセットアップウィザードが表示されます。「開始する」ボタンをクリックしてください。

次に、プラグインのライセンスキーを追加する必要があります。

この情報は、WP Simple Payウェブサイトのアカウントで見つけることができます。

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

次に、WP Simple Pay を Stripe アカウントに接続します。これにより、サブスクリプション、Apple Pay/Google Pay、後払いなどのすべての Stripe 決済機能が利用可能になります。

Stripe を接続しないと、フォームで支払いを受け付けることができません。プロセスを開始するには、「Stripe で接続」ボタンをクリックしてください。

手順については、WordPressでStripe支払いを受け付ける方法に関するチュートリアルをご覧ください。

StripeとWP Simple Payの接続に成功すると、セットアップウィザードでメールの設定を求められます。

ここでは、支払いレシート、今後の請求書、支払い通知のメール通知を受信するオプションを有効にできます。これらのメッセージを送信する必要があるメールアドレスも入力する必要があります。

次に、「保存して続行」ボタンをクリックし、好みに応じてセットアップウィザードの残りの手順を完了してください。

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

次に、WordPressダッシュボードのWP Simple Pay » Payment Formsページに移動します。

ここで、「支払いフォームを作成」ボタンをクリックするだけです。

これにより、「テンプレートの選択」画面に移動し、プラグインが提供する既製のテンプレートのリストが表示されます。

必要に合った注文フォームテンプレートを見つけるために、「製品とサービス」タブに切り替えることをお勧めします。そこには、清掃サービス、洗濯サービス、武道レッスン、ウォーキングツアー、プール清掃などのフォームテンプレートがあります。

特定のニーズに合った既製のテンプレートが見つからない場合は、「支払いフォーム」オプションの使用をお勧めします。その下にある「テンプレートを使用」ボタンをクリックするだけです。

これで、「新しい支払いフォームを追加」ページに移動します。ここで、フォームのタイトルと説明を追加することから始めることができます。

たとえば、ユーザーの住所にフルーツバスケットを配達するための注文フォームを作成している場合、決済フォームを「Home Delivery Payment Form」のように呼び出すことができます。

その後、フォームの種類を「オンサイト支払いフォーム」として選択します。スパムエントリからフォームを保護するために CAPTCHA を有効にすることもできます。

ステップ 4: 商品と価格の追加

次に、左側の列から「支払い」タブに切り替え、「税金徴収」オプションの下のドロップダウンメニューから希望する税金徴収率を選択します。

次に、販売したい商品またはサービスを追加します。「価格を追加」をクリックして、商品名、価格、通貨を入力します。

複数の商品を販売したい場合は、再度「価格を追加」をクリックするだけです。これにより、同じ注文フォームに複数の商品またはサービスをリストできます。

WP Simple Pay は価格を自動的に表示しないため、顧客が支払う金額を明確に確認できるように、商品名に価格を含めることをお勧めします。

Pro バージョンを使用している場合は、サブスクリプションを提供することもできます。「価格をサブスクリプションとして購入可能にする」を有効にするだけです。

これにより、フォームにサブスクリプション オプションが追加され、顧客は 1 回限りの支払いか、定期的な請求（月々の支払いなど）かを選択できるようになります。

ステップ 5: 支払い方法とフォームフィールドの設定

その後、「支払い方法」セクションまでスクロールし、ドロップダウンメニューから「すべて」オプションを選択します。

次に、カード、ACH直接デビット、Klarna、Cash App、GrabPay、iDEAL、およびその他の多くのオプションを、横にあるボックスをチェックすることで支払い方法として追加できます。

支払い方法オプションを選択したら、「フォームフィールド」タブに切り替えます。これで、ドロップダウンメニューからフォームフィールドを追加し、タブを展開して設定を構成できます。

ドラッグアンドドロップで既存のフィールドを並べ替えることもできます。

例えば、物理的な商品を配送する予定がある場合は、フォームに住所フィールドを追加してカスタマイズできます。これにより、顧客は購入時に自宅の住所を入力する必要があります。

ステップ 6: 購入制限と確認の設定

次に、「購入制限」タブに切り替えます。ここで、「指定された支払い数後に支払いフォームを非表示にする」ボックスをチェックして、値を入力できます。

この機能は、販売したい製品の数が決まっていて、売り切れを防ぎたい場合に非常に便利です。たとえば、フルーツバスケットを販売していて、20個しか在庫がない場合、それを制限として設定できます。20件の注文に達すると、フォームはサイトから自動的に削除されます。

特定の日付以降にフォームを表示または非表示にするようにスケジュールすることもできます。これは、季節商品向けの注文フォームを作成している場合に特に役立ちます。

例えば、クッキーを販売していて、季節限定でクリスマス クッキーを提供する予定であれば、需要がある時期にのみ表示されるように、支払いフォームのスケジュールを設定できます。

次に、左側の列から「確認ページ」セクションに移動します。

ここで、ユーザーが注文を完了したときに画面に表示される成功メッセージを入力できます。また、配色を選択したり、ヘッダー画像を追加したりして、このメッセージをカスタマイズすることもできます。

その後、「メール通知」タブに切り替えて、ユーザーが支払い領収書とともに受信するメッセージを追加します。

この支払いフォームで支払いが行われたときに、自分に通知するカスタムメールメッセージを追加することもできます。

ステップ 7: 注文フォームをウェブサイトに追加する

最後に、「支払いページ」タブに移動し、「専用支払いページを有効にする」ボックスをチェックします。

プラグインは、支払いフォームのカスタムページを生成します。これにより、新しいページを手動で作成する必要がなくなります。

支払いフォームページをカスタマイズするには、パーマリンク、配色、画像、フッターテキストを追加できます。

次に、「公開」ボタンをクリックして設定を保存します。

これで、WordPress サイトにアクセスして、オンライン注文フォームが実際に動作しているのを確認できます。

ただし、フォームを追加したい既存のページがある場合は、カスタムメールメッセージを追加した後、「公開」ボタンをクリックしてください。

次に、支払いフォームを追加したいページまたは投稿を特定し、WordPressコンテンツエディターで開きます。次に、左上隅にある「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここから、WP Simple Payブロックをページに追加し、ブロック内のドロップダウンメニューから作成した支払いフォームを選択します。

その後、「更新」または「公開」ボタンをクリックして変更を保存します。

最後に、WordPress サイトにアクセスして注文フォームを表示します。

ステップ 8: オンライン注文の追跡

ユーザーが注文フォームを使用して注文を開始すると、WordPress ダッシュボードから WP Simple Pay » アクティビティ & レポート ページにアクセスできます。

WP Simple Pay は、1 回限りの購入、サブスクリプション、失敗した支払いを含むすべての Stripe 決済を追跡するためのダッシュボードを提供します。これにより、完全な e コマースシステムを管理することなく、注文状況を明確に把握できます。

さらに、プラグインを使用すると、任意の期間のレポートを生成できます。開始日と終了日を選択すると、支払い方法、支払いステータス、および成功した支払いの内訳を含む詳細な分析が表示されます。

これにより、注文フォームをより効果的に管理できます。

動画チュートリアル

ビデオでの手順に沿って進めたい場合は、以下のYouTubeチュートリアルをご覧ください。

WPBeginnerを購読する

ボーナス：WordPressにレストラン予約システムを追加する

レストランのウェブサイトをお持ちの場合は、予約システムを追加したい場合もあります。

便利なオンライン予約オプションを提供することで、顧客体験を向上させることができます。電話予約の必要性を最小限に抑え、長い保留時間を短縮できます。

これを行う方法については、WordPressにレストラン予約システムを追加する方法に関するチュートリアルをご覧ください。

よくある質問：WordPressでオンライン注文フォームを作成する

WordPress でオンライン注文フォームを作成することについて、読者からよく寄せられる質問をいくつかご紹介します。

WPFormsとWooCommerceで注文フォームを使用する際の違いは何ですか？

シンプルな注文フォーム（カスタム見積もり、サービス予約、または一度限りの商品注文など）が必要な場合は、WPForms が最適な選択肢です。軽量で設定が簡単で、完全なショッピングカートシステムは必要ありません。

一方、WooCommerceは本格的なeコマースプラグインです。多くの製品、カテゴリ、配送オプション、税金計算があるストアに適しています。

ただし、注文と支払いを収集するための基本的なフォームが必要なだけの場合は、過剰になる可能性があります。

注文フォームが送信されたときにメール通知を送信できますか？

はい、ほとんどのフォームプラグインでは、誰かがフォームを送信した後に自動的にメール通知を送信できます。WPFormsとWP Simple Payを使用すると、次のように送信するように設定できます。

• 顧客への確認メール
• あなたまたはあなたのチームへの新しい注文通知
• エントリのコピーを別のメールアドレスに送信（必要な場合）

メールコンテンツをカスタマイズして、名前、注文詳細、支払い情報などのフォームフィールドを含めることができます。これは、コミュニケーションを合理化し、新しい注文に迅速に対応するための優れた方法です。

モバイルフレンドリーな注文フォームを作成することは可能ですか？

もちろんです！WPFormsやWP Simple Payを含むほとんどのモダンなフォームプラグインは、デフォルトでモバイルレスポンシブです。これは、注文フォームが電話やタブレットのような小さな画面に自動的に調整されることを意味します。

最適なユーザーエクスペリエンスを確保するために、WordPress のブロックエディターまたはフォームビルダーのプレビューツールを使用して、さまざまなデバイスでフォームをプレビューできます。

また、フォームは短くシンプルに保ちましょう。フィールドが少ないほど、モバイルでのコンバージョン率が高くなります。

これで完了です！この記事がWordPressでオンライン注文フォームを作成する方法を学ぶのに役立ったことを願っています。また、究極のWordPress eコマースセットアップガイドや、最高のWordPressクーポンコードプラグインのトップピックも気に入るかもしれません。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。