Latest SeedProd News

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

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

WordPressサイトでオンライン注文フォームを作成する方法 

Written By: 著者アバター Stacey Corrin
著者アバター Stacey Corrin
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.
    
Reviewed By: レビュアーアバター Turner John
レビュアーアバター Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

要約:WordPressでオンライン注文フォームを作成する方法 WPFormsを使用して約10分で動作する注文フォームを設定します。

  1. テンプレートを選択 – WPFormsの組み込み注文フォームテンプレートから始めれば、ゼロから設定する必要がありません。
  2. 通知を設定 – 自分宛てのメールアラートと顧客向けの注文確認を設定します。
  3. 確認メッセージをカスタマイズ – 送信後に顧客に表示される内容を選択します:メッセージ、お礼ページ、またはリダイレクト。
  4. 支払いを接続 – PayPal CommerceまたはStripeをリンクして、顧客が送信時に支払えるようにします。WPForms Proが必要です。
  5. フォームを公開 – WPFormsブロックを使用して、任意のWordPressページに埋め込みます。
  6. 分析を追跡 – MonsterInsightsで送信と放棄を監視します。

メールや電話で注文を受けている場合、その問題点はすでにわかっているはずです。顧客が注文をすると、どこかに書き留めますが、数日後には詳細が失われてしまいます。

デジタル注文フォームでこれを解決できます。このガイドでは、私が長年個人的に使用しているドラッグ&ドロップフォームビルダーであるWPFormsを使用して、WordPressでオンライン注文フォームを作成する方法を説明します。コーディングは不要です。

WPFormsを使用して約10分でWordPressでオンライン注文フォームを作成できます。プラグインをインストールし、注文フォームテンプレートを選択し、PayPal CommerceまたはStripeを接続し、フォームをサイトの任意のページに公開します。

WPForms Liteは無料で開始できます。支払いを受け取るにはWPForms Proが必要です。

注文フォームとは?

WordPressでオンライン注文フォームを作成する前に、それが何であるか、そしてそれがあなたのサイトに何ができるかを理解することが重要です。

オンライン注文フォーム(購入注文フォームとも呼ばれる)は、オンラインビジネスまたはeコマース小売業者から製品、サービス、または商品をリクエストするために使用される支払いフォームです。フォーム自体には、顧客情報と顧客の注文に関するすべての情報が含まれており、商品や製品が顧客にタイムリーに届けられるようになっています。

注文フォームには通常、次の情報が含まれます:

  • 顧客の氏名。
  • 電話番号。
  • 配送情報と配達先住所。
  • クレジットカード情報などの請求および支払い処理の詳細。
  • 購入されているアイテムのリスト。
  • 数量、サイズ、スタイルなどのアイテムの詳細。
  • 利用規約。
  • 配送料。
  • 注文合計。

その後、顧客はフォームをオンラインで送信し、ビジネスまたは会社によって処理されます。

注文フォームは、Authorize.net、Google Sheets、Salesforce、Zapier、ソーシャルメディアなどの複数のアプリ、CRM、およびサービスと統合されることがよくあります。さらに、一部のフォームでは、購読者を増やしたり、HTMLフォームのポップアップを表示したりする機能が提供される場合があります。

注文フォームの機能が理解できたところで、どのように作成しますか?次に説明します。

オンライン注文フォームを使用する理由

効率性。オンライン注文フォームは、メールのやり取りを1回の構造化された送信に置き換えます。すべての注文詳細を1か所で自動的に取得できます。

支払い収集。WordPressの支払いフォームを使用すると、顧客は送信時に支払います。請求書の催促や手動での支払いフォローアップを待つ必要はありません。

正確性。カスタム注文フォームでは、顧客は送信前にすべてのフィールドに入力する必要があります。サイズの間違い、不明瞭な住所、不完全な仕様はもうありません。

オンライン注文フォームの種類

WPFormsには、最も一般的なタイプの注文フォームのテンプレートが含まれています。それぞれの機能の簡単な内訳を次に示します。

  • 商品注文フォーム – 顧客がアイテム、数量、およびサイズや色などのバリエーションを選択できます。
  • サービス予約フォーム – サービスビジネスのジョブ詳細と希望する日付をキャプチャします。
  • カスタム見積もりフォーム – プロジェクトの要件を収集し、それに基づいてカスタマイズされた請求書を作成できるようにします。
  • 食品またはベーカリー注文フォーム – アレルゲンに関する注記と受け取りまたは配達のオプションを備えたカスタム注文を処理します。

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

独自のオンライン注文フォームの作成は、思っているほど難しくありません。このチュートリアルでは、ほとんどの作業を代行してくれるWordPressプラグインの助けを借りて、自分で簡単に作成できる方法を紹介します。

ここでは、WordPress向けの最高のドラッグ&ドロップオンラインフォームビルダーであるWPFormsを使用します。この注文フォームビルダーを使用すると、次のようなほぼすべてのタイプのオンラインフォームを作成できます。

そして、WPFormsのスマートフォームテクノロジーと簡単な決済ゲートウェイ連携により、オンライン注文フォームを数分で稼働させることができます。

詳細については、この詳細なWPFormsレビューをご覧になってはいかがでしょうか?

WordPress用WPFormsのドラッグ&ドロップフォームビルダー

WPFormsの注文フォーム作成を開始するには、Proバージョンを入手する必要があります。WPForms Proは決済処理業者と連携して、顧客からの支払いを受け付けます。次に、WordPressサイトにWPFormsプラグインをインストールして有効化する必要があります。

WordPressにプラグインをインストールする方法がわからない場合は、このステップバイステップガイドがお役に立ちます。

すべてがインストールされ有効化されたら、次のステップに進み、新しいフォームの構築を開始する準備が整いました。

1. 注文フォームテンプレートを選択

オンライン注文フォームを作成する際に最初に行うことは、WordPressダッシュボードに移動し、WPForms »新規追加をクリックすることです。

これにより、選択できる多くの事前作成済みテンプレートが表示されます。

このチュートリアルでは、無料の注文フォームテンプレートを使用します。フォームに名前を付けて、そのオプションをクリックしてください。

WordPress用WPFormsの注文フォームテンプレートプレビュー

次に表示される画面はフォームエディタです。ここで注文フォームの外観、コンテンツ、設定をカスタマイズできます。

請求書/注文フォームテンプレートは、シンプルな注文フォームに必要なデフォルト設定でフォームを自動的に入力します。

フォームフィールドのいずれかをクリックすると、画面左側にフィールドオプションが表示されます。ここで各フィールドのラベルを編集したり、項目を追加または削除したり、特定のデータ収集フィールドを必須にしたりできます。

WPForms注文フォームのフィールドをカスタマイズする

たとえば、利用可能な項目フィールドの高度なオプションタブを展開すると、別の列レイアウトを選択できます。フォームに条件付きロジックを追加して、一部のフィールドがフォーム送信の情報に基づいてのみ表示されるようにすることもできます。

WPFormsでの高度なフィールドカスタマイズオプション

フォームのレイアウトを並べ替えるには、任意のフィールドをドラッグアンドドロップできます。さらに、追加フィールドの追加も簡単です。支払い方法など、画面左側から右側にドラッグするだけです。

注文フォームのレイアウトに満足したら、保存ボタンをクリックして変更が失われないようにしてください。

2. オンライン注文フォームの通知を設定

次に、オンライン注文フォームの設定を構成します。まず、フォーム通知ワークフローから始めます。通知は、フォームが完了したときにメールを送信します。

これらを設定するには、[設定] » [通知]に移動すると、利用可能なオプションが表示されます。

デフォルトでは、WPFormsは顧客がフォームに入力すると自動的にメール通知を送信します。ただし、このオプションを希望しない場合は、ドロップダウンボックスでオフを選択して無効にすることができます。

WPFormsのオンライン注文フォームの通知設定

また、送信先メールアドレスフィールドに他のビジネス関係者のメールアドレスを追加することで、通知を他の人に送信することもできます。

これに加えて、顧客がフォームに入力したときに顧客に通知を送信することも簡単です。これにより、顧客は注文が受け付けられ、処理されていることを確認できます。

WPFormsのスマートタグを使用してこれを設定できます。

送信先メールアドレスフィールドの隣に、スマートタグを表示というオプションがあります。これは、その特定のフィールドで利用可能なタグを示します。

WPFormsのフォーム通知でスマートタグを使用する

メールをクリックすると、タグがフィールドに自動的に入力されます。このタグは、顧客がフォームに入力したメールアドレスに直接関連しています。

WPFormsの注文フォームメールフィールドのスマートタグ設定

次に、次のフィールドを含むフォームの残りの部分を編集します。

  • メール件名。これは、受信トレイで最初に表示されるものの1つです。たとえば、「ご注文を受け付けました」と記述して、フォームの目的を説明できます。
  • 送信者名。メールはどこから送信されましたか?ブランド名または会社名はこのフィールドに適しています。これにより、顧客はそれがスパムではないことを知ることができます。
  • 送信者メールアドレス。ここでも、顧客がメールの送信元と連絡先を知ることができるように、会社または営業部門のメールアドレスを入力する必要があります。
  • 返信先。ここに連絡先メールアドレスを追加して、問題が発生した場合にお客様が連絡できる方法を提供してください。
  • メッセージ。お客様がこのメールを受け取った理由と、次に取るべき手順を説明するパーソナライズされたメッセージを含めてください。{all_fields}タグを挿入して、注文の詳細を含めることもできます。
WPFormsの通知メールの内容とタグ設定

オンライン注文メールレシートを自動送信したい場合は、このステップバイステップチュートリアルで方法を説明します。

変更を保存して、確認メッセージセクションに進みましょう。

3. フォームの確認メッセージをカスタマイズ

確認セクションでは、フォームが正常に送信された後にお客様に表示できる3種類のメッセージを提供しています。

選択できる3つの確認メッセージタイプは次のとおりです。

  1. メッセージ。これはWPFormsのデフォルトの確認タイプです。お客様にフォームが送信されたことを伝える簡単な成功メッセージを表示します。
  2. ページを表示。ページを表示オプションは、フォームを完了した後にお客様をウェブサイトの特定のページに送信します。ここではお客様をサンキューページにリダイレクトする方法を学ぶことができます。
  3. URLに移動(リダイレクト)。この確認タイプは通常、フォームが送信された後にお客様を別のウェブサイトに送信するために使用されます。

フォームエディタからこれらの設定をカスタマイズするには、設定 » 確認をクリックします。次に、提供されているドロップダウンリストから確認タイプを選択し、メッセージを編集します。

WPFormsで確認メッセージを設定する

確認メッセージの設定に関するヘルプについては、WPFormsのドキュメントを参照してください。次に進む前に、必ず変更を保存してください。

4. 支払い設定を選択

オンライン注文フォームを公開する前に、お客様が製品の支払いを行う方法を提供する必要があります。

WPFormsは、オンライン決済を受け付けるための2つの人気のある決済オプションを提供しています。これらはPayPal CommerceStripeアプリ連携です。これらのオプションを有効にするには、PayPal CommerceとStripeアドオンをインストールする必要があります。

これを行うには、WPForms » アドオンに移動します。次に、インストールして有効にしたい決済アドオンをクリックします。

どちらを使用すればよいかわからない場合は、Stripe vs PayPalに関するこの記事が判断に役立つはずです。

WPFormsで注文支払いのためにStripeまたはPayPalを有効にする

アドオンをインストールしたら、オンライン注文フォームエディタに戻り、設定 » 決済をクリックして、希望する決済オプションを選択します。

WPFormsで支払いオプションを選択して設定する

この例では、フォームと連携するためにPayPal Commerceを使用します。

PayPal Commerceを設定するには、フォームエディタで設定 » 決済 » PayPal Commerceをクリックし、セットアップウィザードに従ってPayPalビジネスアカウントをリンクしてください。

本番環境に移行する前に、モード本番に設定して、実際の決済が正しく処理されるようにしてください。

WPForms PayPal連携設定画面

決済情報のセットアップが完了したら、保存をクリックして変更を保存します。 

次にフォームを公開します!

5. オンライン注文フォームをWordPressに公開

オンライン注文フォームを公開する時期が来ました。これは非常にエキサイティングですよね?さらにエキサイティングなのは、WPFormsを使えば、ウェブサイトの多くの場所にフォームを埋め込めることです。

これは、投稿、ページ、サイドバー、その他のWordPressサイトのウィジェット対応エリアにフォームを表示できることを意味します。

ページにフォームを公開するには、まずダッシュボードから投稿 » 新規追加に移動して新しいページを作成し、タイトルを付けます。

その後、プラスアイコンをクリックして、ページに新しいコンテンツブロックを追加します。

WPFormsブロックを挿入して注文フォームを埋め込む

次に、検索ボックスにWPFormsと入力して、WPFormsコンテンツブロックを表示します。

WordPressエディターでWPFormsブロックを見つけて選択する

次に、ブロックをクリックしてページに追加します。

次に、提供されているドロップダウンボックスからオンライン注文フォームを選択する必要があります。

WPFormsのドロップダウンから注文フォームを選択する

ページを公開する準備ができたら、公開をクリックして公開します。

これで、オンライン注文フォームがウェブサイトで公開されます。サイトのフロントエンドにあるその特定のページにアクセスするだけで、表示されます。

WordPressで公開済みのオンライン注文フォームのライブ例

しかし、まだ終わりではありません。送信を追跡および測定する方法なしに、優れた注文フォームは完成しません。次にそれを調べましょう。

SeedProdで専用の注文ページを作成する

フォームが作成されたら、どこに公開するかが重要です。サイドバー、ヘッダー、ナビゲーションのあるページでは、訪問者が注文を完了する前に離脱する可能性が高すぎます。

SeedProdは、数分でフォーム用の注意散漫にならないランディングページを作成できるドラッグアンドドロップのウェブサイトビルダーです。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

私の個人的な調査からわかったことですが、ナビゲーションの注意散漫をなくすことは、実際にフォームを完了する人の数に大きな違いをもたらします。

SeedProdとWPForms注文フォームを連携させる方法は次のとおりです。

  1. WordPressダッシュボードで、SeedProd » ランディングページに移動し、新しいランディングページを追加をクリックします。
  2. テンプレートを選択し、ビジュアルエディターでヘッドライン、コピー、ブランディングをカスタマイズします。
  3. WPFormsブロックをレイアウトにドラッグし、ドロップダウンから注文フォームを選択します。
  4. 保存をクリックし、公開をクリックしてページを公開します。
WPFormsオンライン注文フォームが埋め込まれたSeedProdで作成されたランディングページの例

WPFormsのショートコードを使用して、既存のページにフォームを埋め込むこともできます:

完全なチュートリアルについては、WordPressでフォーム付きランディングページを作成する方法に関するガイドをご覧ください。

6. フォーム分析を追跡

見た目の良いオンライン注文フォームがあっても、誰も記入して製品を購入してくれなければ、無駄な努力になってしまいます。

ご存知ないかもしれませんが、フォーム放棄はウェブサイト所有者が直面する最大の課題の1つです。

実際、Baymard Instituteの調査によると、平均放棄率は約70%です。これは、フォームに入力してから送信をクリックする直前に離脱する人が非常に多いことを意味します。

しかし、フォーム放棄に対処する方法はあり、それは注文フォームの分析を適切に追跡することから始まります。

ほとんどのサイトオーナーはGoogleアナリティクスを使用しています。しかし、Googleアナリティクスでフォーム放棄を追跡するのは簡単ではありません。非常に紛らわしいのです!だからこそ、この種のデータを追跡するのに私たちが最も好きな方法は、MonsterInsightsを使用することです。

MonsterInsightsを使用すると、WordPressサイトのGoogleアナリティクスを数分で素早く設定し、収集したデータを実際に理解し始めることができます。WPFormsの優れたコンパニオンでもあります。

MonsterInsightsダッシュボードで注文フォームの分析を追跡する

MonsterInsightsは、フォーム放棄の追跡をはるかに簡単にします。イベントカテゴリとアクションの下でフォーム追跡を設定できます。

さらに、MonsterInsightのレポートはWordPressダッシュボード内に直接表示されます。そのため、必要な情報を取得するためにウィンドウやタブを切り替える必要はもうありません。

この簡単なステップバイステップガイドで、MonsterInsightsを使用してWordPressでフォーム放棄を追跡する方法についてすべて学ぶことができます。

WordPressオンライン注文フォームに関するFAQ

WordPressで無料のオンライン注文フォームを作成するにはどうすればよいですか?

WPForms Liteは無料で、基本的な注文フォームテンプレートが含まれています。何も支払うことなく、顧客の詳細と選択した商品情報を収集できます。フォームを通じて支払いを受け付けるには、WPForms Proが必要です。これにより、PayPal CommerceとStripeの連携が解除されます。

WordPressの注文フォームで直接支払いを受け付けることはできますか?

はい。WPForms ProはPayPal CommerceとStripeと連携しているため、顧客は送信時に支払うことができます。希望するプロセッサの支払いアドオンをインストールし、フォームの支払い設定でアカウントを接続する必要があります。

注文フォームにサイズや色などの商品オプションを追加するにはどうすればよいですか?

WPFormsでドロップダウンまたは複数選択フィールドを使用して、商品のバリエーションを提供します。また、条件付きロジックを追加して、顧客が最初に選択したものに基づいて特定のオプションのみを表示することもできます。たとえば、顧客が特定の商品を選択した後にサイズ選択を表示するなどです。

オンライン注文フォームに含めるべきものは何ですか?

最低限、顧客の名前、メールアドレス、配送先住所、注文した商品とその数量およびバリエーション、支払い情報を取得します。利用規約のチェックボックスと注文概要フィールドを追加すると、顧客は情報を得られ、紛争が減少します。

この記事では、WordPressサイト用のオンライン注文フォームの作成方法と、結果を追跡するための最良の方法を学びました。

あとは、離脱した訪問者を支払いを行う顧客に変えるだけです。カート放棄の修正に関する当社のソリューションが、その方法を示します。

サイトをさらに構築している場合は、これらのガイドも役立つかもしれません。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
Stacey Corrin Content Marketing Specialist
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]