WordPressで注文フォームを作成する方法

WordPress注文フォームの作成方法(ステップバイステップ)

中小企業の経営者は、販売、サポート、フルフィルメントなど、あらゆる業務をこなさなければならないことが多いでしょう。

そして、オンラインで注文を受け付ける準備ができたら、機能的な注文フォームがあれば、時間を節約し、顧客にとって物事を楽にすることができます。

そこで、このガイドでは、WPFormsを使用してWordPress注文フォームを作成する手順を説明します。フォームの設定方法、支払いゲートウェイ(Stripe、PayPal Commerce、またはSquare)の接続方法、通知のカスタマイズ方法、そしてサイトへの公開方法を学びます。

WordPressの注文フォームを今すぐ作成!🙂

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

まず、注文フォームを簡単に作成できるフォームビルダープラグインが必要になります。WPFormsを使用してWordPressで注文フォームを作成する方法を示すビデオを作成しました。

オンライン注文フォームの作成方法の説明をお読みになりたい場合は、以下の手順でプロセスを説明します。始めましょう。

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

WPFormsは、注文フォーム、お問い合わせフォーム、その他多くの一般的なフォームの作成に最適です。最も良い点は、注文フォームの支払いを受け取るために有料のWPFormsライセンスが不要なことです。

すべてのWPFormsプラン(Liteを含む)は、フォームでのクレジットカード決済を受け取るためにStripeとPayPalの統合(3%の追加取引手数料がかかります)をサポートしています。

追加料金を削除したい場合は、WPForms Proにアップグレードして、同時に多くの高度な機能のロックを解除できます。Proでは、SquareとAuthorize.Netも追加の決済ゲートウェイとして利用できます。

WPFormsの価格ページです。

このチュートリアルではWPForms Proを使用します(WPForms Liteでも同じ手順で進めることができます!)。プランを購入したら、WordPressサイトにWPFormsをインストールしてください。

今すぐWPForms Proにアップグレード!:)

ステップ2:WPFormsとStripeを接続する

これで、注文フォームの作成を開始し、決済ゲートウェイに接続できます。WordPressダッシュボード内で、**WPForms » 設定**に移動します。

WPFormsの設定を開く

次に、ナビゲーションバーの**決済**タブをクリックします。

WPFormsの支払いタブ

下にスクロールすると、ここに**Stripeに接続**ボタンが表示されるはずです。接続を開始するにはボタンを押してください。

Stripeに接続

それが完了したら、Stripeログイン画面にリダイレクトされます。ログイン情報を入力すれば完了です。

WPForms Stripeアカウント

ログイン後、決済画面に戻ります。ここで、接続ステータスを確認して、Stripeアカウントとの統合が成功したかどうかを確認できます。

Stripe接続ステータス

素晴らしい。これで、ドラッグアンドドロップフォームビルダーを使用して注文フォームの作成を開始できます。

その他の決済ゲートウェイ

このチュートリアルではStripeを使用しますが、WPFormsは複数の決済ゲートウェイをサポートしています。

フォーム作成手順(ステップ3〜6)は、選択したゲートウェイに関係なく同じです。

別のゲートウェイを設定するには、PayPal CommerceSquare、またはAuthorize.Netのセットアップガイドを参照してください。

ゲートウェイ最適最小ティア
Stripeクレジットカード/デビットカード、サブスクリプションLite(3%手数料)/ Pro(手数料なし)
PayPalPayPalバイヤー+クレジットカードLite(3%手数料)/ Pro(手数料なし)
SquareSquare POSをすでに利用している場合プロ
Authorize.Netエンタープライズ/レガシー決済システムエリート

ステップ3:オンライン注文フォームテンプレートを作成する

Stripeとの連携が完了したら、WordPressダッシュボードからWPForms » 新規追加に移動して、新しいフォームを作成してください。

新規フォームを追加

これで、WordPressサイトに追加できる既製の注文フォームテンプレートを選択できるようになります。まず、注文フォームに名前を付けます(自由に名前を付けることができます)。

注文フォームの名前

さて、このタスクを非常に簡単かつ迅速に行うために、注文フォームテンプレートを選択します。WPFormsには2,100以上のテンプレートがありますので、お選びいただけます。

中小企業に最適なシンプルな注文フォームテンプレートを使用します。「シンプルな注文フォーム」を検索し、テンプレートを選択して読み込みを開始してください。

シンプルな注文フォームテンプレート

注意

このテンプレートはBasicプラン以上で利用可能です。無料プランをご利用の場合でも、同様のフォームをゼロから作成できますが、住所や電話番号のフィールドはありません。代わりに、複数の単一行テキストフィールドを使用して、完全な住所フィールドと電話フィールドを再現できます。

テンプレートの読み込みには数秒しかかかりません。読み込みが完了すると、フォームビルダーが表示され、必要に応じてテンプレートに変更を加えることができます。

シンプルな注文フォームテンプレート

ご覧のとおり、これは中小企業に最適なオンライン注文フォームです。このテンプレートのフィールドをいくつかカスタマイズして、顧客にとってさらに役立つものにしましょう。

デフォルトでは、注文フォームテンプレートにはチェックボックスアイテムフィールドがあり、ユーザーは選択肢のリストから1つ以上の商品を選択できます。

フォームを自分の商品やサービスに特化させるには、実際の商品名を追加し、それぞれに価格を設定できます。チェックボックスアイテムフィールドをクリックして、フィールドオプションを開きます。

チェックボックスの項目オプション

ここでは、フィールドのラベルとアイテムの名前を自分の商品に合わせて変更できます。

チェックボックスの項目の商品名を変更する

価格を変更するには、各アイテムの横にある列に数値を入力するだけです。

項目の価格を変更する

このフィールドにアイテムを追加したり、既存のアイテムを削除したりしたい場合は、各アイテムの隣にあるプラス(+)とマイナス(-)ボタンを使用してください。

項目の選択肢を追加または削除する

各選択肢に画像を追加できるため、人々が注文しているものを視覚的に確認できます。画像選択肢を使用するトグルをクリックして、この機能を有効にします。

画像選択肢 - チェックボックスの項目

この機能を有効にすると、各商品に画像アップロードボタンが表示され、注文フォームの商品と一緒に表示する画像を選択できます。

チェックボックスの項目に画像を追加する

このテンプレートにデフォルトで追加されているチェックボックスアイテムフィールドでは、ユーザーは一度に複数のアイテムを選択できることに注意することが重要です。

ユーザーが一度に1つの商品しか選択できないようにしたい場合は、代わりに複数アイテムフィールドを使用できます。WordPress注文フォームのカスタマイズが完了したら、必ず変更を保存してください。

プロのヒント

セールや割引を提供したい場合は、WordPressフォームにクーポンコードフィールドを追加する方法に関するチュートリアルをご覧ください。

ステップ4:フォームでStripe決済を有効にする

フォームの準備ができたので、この注文フォームでStripeがどのように支払い処理を行うかを構成する必要があります。フォームビルダーのサイドバーで、支払いをクリックします。

フォームビルダーの支払い設定を開く

その後、支払いリストのStripeをクリックします。

支払いでStripeを選択

右側のパネルで、Stripe決済を有効にするトグルスイッチをクリックします。

Stripe 決済を有効にする

これにより、Stripeの追加設定が展開され、以下のことが可能になります。

  • 支払い説明を入力する
  • フォーム送信時にStripeから領収書を送信するための顧客メールフィールドを選択します
  • 記録保持のためにStripeアカウントに追加する顧客メールフィールドを選択します
Stripe 設定

これらの設定はオプションですが、推奨されます。このステップが完了したら、保存を押してください。Stripeを使用すると、定期支払いのような便利な機能やワンクリック決済を顧客に提供することもできます。

このフォームが公開されると、注文のStripe決済を受け付ける準備が整いました。

ステップ5:通知と確認画面をカスタマイズする

ユーザーが注文フォームを送信すると、WPFormsは自動的にあなた(管理者)に通知を送信し、確認メッセージを送ります。

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

通知メールをカスタマイズして、便利な情報を含めることができます。

これにより、フォームに入力した各人の注文確認メールを簡単に見つけることができます。

まず、フォームビルダーの設定タブをクリックし、次に通知をクリックします。

フォームビルダーで通知設定を開く

チームの複数のメンバーに注文メールのコピーを送信したい場合は、 送信先メールアドレスフィールドに、カンマで区切ってメールアドレスを追加できます。

メールアドレスに送信

すべての注文メールが同じように見えないように、件名にスマートタグを使用することも良い考えです。簡単な方法の1つは、メール件名に名前スマートタグを追加することです。

これにより、各注文メールにはフォームに入力した顧客の名前が含まれます。スマートタグを表示をクリックしてスマートタグを追加できます。

スマートタグを表示

これにより、スマートタグとして使用できる利用可能なフィールドのリストが開きます。この例では、名前フィールドをスマートタグとして使用します。

件名に名前のスマートタグ

これで、このオンライン注文フォームから受信するすべてのメール通知には、件名に顧客の名前が含まれます。これは、名前で注文メールを追跡しやすくするための優れた方法です。

さらに、スマートタグを使用すると、顧客に通知を送信して、注文が受け付けられたことを知らせることもできます。これは、電子メールのやり取りを活用することが、中小企業にとって実績のあるマーケティング戦略であるため、良い考えです。

顧客向けの個別の通知を設定するには、右上にある新しい通知を追加ボタンをクリックします。

新しいメール通知の追加

これにより、ポップアップボックスが表示され、デフォルトの通知と区別するために通知に名前を付ける必要があります。

新しいメール通知の名前を付ける

次に、スマートタグを使用して、オンライン注文フォームに入力した人のメールアドレスを送信先メールアドレスフィールドに含めます。送信先メールアドレスフィールドのスマートタグを表示をクリックします。

メール通知のスマートタグにアクセスする

次に、Emailフィールドのスマートタグを選択します。これにより、WPFormsは注文フォームでお客様が提供したメールアドレスを取得し、そのメールアドレスに通知を送信できます。

メール通知のメールフィールドのスマートタグを選択する

同様に、プレーンテキストとスマートタグを使用して、WordPress注文フォームのメール通知のすべての異なる部分を必要に応じてカスタマイズできます。

メール通知に{all_fields}スマートタグを追加する

スマートタグの詳細については、WPFormsでスマートタグを使用する方法のチュートリアルをご覧ください。

WPFormsの通知は非常に柔軟です。WPFormsで複数のフォーム通知を作成する方法に関するこのガイドを確認することをお勧めします。

注文フォームの確認メッセージをカスタマイズする

フォームの確認メッセージとは、お客様が注文フォームを送信した後に表示されるメッセージです。選択できる確認メッセージの種類は3つあります。

  1. メッセージ
  2. ページを表示
  3. URLに移動(リダイレクト)

WPFormsで簡単なフォーム確認メッセージを設定する方法を見てみましょう。これにより、注文を送信した後にユーザーが表示するメッセージをカスタマイズできます。

まず、設定の下にあるフォームエディタの確認メッセージタブをクリックします。

注文確認

次に、作成したい確認メッセージの種類を選択します。この例では、最も簡単な確認メッセージ表示方法であるメッセージを選択します。

メッセージ確認タイプを選択する

次に、確認メッセージを好みに合わせてカスタマイズし、完了したら保存をクリックします。注文フォームの確認

素晴らしい!ほぼ完了です。

ステップ6:オンライン注文フォームをサイトに追加する

WPFormsを使用すると、注文フォームをWordPressサイトに簡単に埋め込むことができます。上部にある埋め込みボタンをクリックします。

フォームを埋め込むボタン

WordPress注文フォームを新しいページに埋め込むには、新しいページを作成をクリックします。

新しいページにWPFormsを埋め込む

次に、新しいページの名前を入力し、開始を押します。

新しいページに埋め込む

これで、作成した注文フォームのブロックがページ内に既に追加されたWordPressブロックエディタが表示されます。

公開する準備ができたら、公開ボタンをクリックします。

注文フォームを公開する

これで、公開された注文フォームがサイトでライブ表示されます。フォームでアイテムを選択すると、価格が自動的に変更されることに注意してください。

注文フォームが公開されました

これで完了です!WordPressで注文フォームを作成し、それを使用してオンライン決済を受け付ける方法がわかりました。まだ決済処理を行いたくないですか?支払いなしで注文フォームを作成する方法のチュートリアルをご覧ください。

追加のオプションステップとして、注文後もユーザーをウェブサイトに留めておくことで、追加注文の可能性を高めることができます。

フォーム送信後にユーザーをウェブサイトの別のページまたは別のウェブサイトにリダイレクトする方法を学ぶことで、これを実現できます。非営利団体の場合、上記と同様の手順で非営利団体向けの寄付フォームを作成することができます。

WordPressの注文フォームを今すぐ作成!🙂

注文フォーム vs. WooCommerce:どちらが必要?

フォームベースの注文フォームと完全なWooCommerceストアのどちらが必要か疑問に思っている場合、簡単な答えは次のとおりです。少数の製品またはサービスがあり、簡単なチェックアウトプロセスが必要な場合は、注文フォームを使用します。在庫管理、配送ゾーン、カート機能が必要な完全な製品カタログが必要な場合は、WooCommerceを使用します。

WPFormsの注文フォームは、設定が迅速で、サイトへの負荷も軽量です。サービス提供者、商品ラインナップが限定的な中小企業、そして本格的なeコマージャンプラットフォームのオーバーヘッドなしで注文を収集する必要があるすべての人に最適です。注文フォームから始めて、将来的に商品カタログが増えたらWooCommerceに移行することもできます。

WordPress注文フォーム作成に関するFAQ

WordPress注文フォームの作成に関するよくある質問をいくつかご紹介します。

WordPress注文フォームは無料で作成できますか?

はい。WPForms Liteを使用すると、無料で注文フォームを作成し、Stripeでの支払いを受け付けることができます。無料版には、すべての必須フィールド、ドラッグ&ドロップビルダー、基本的なテンプレートが含まれています。Lite版でのStripe支払いは、Stripe自体の手数料に加えて、3%のWPForms処理手数料がかかります。追加手数料を削除したり、PayPal CommerceやSquareのロックを解除したりしたい場合は、WPForms Proが年間$49.50から利用可能です。

WordPressでドロップダウン注文フォームを作成する方法は?

WPFormsには、注文フォームに含めることができるドロップダウンフィールドがあります。ドロップダウンフィールドを追加するには、フォームビルダーの左側のペインからクリックするか、フォームの必要な場所にドラッグ&ドロップするだけです。

ドロップダウンメニューは、選択肢が多い場合にフォームを短く簡潔に保つという利点を提供します。

したがって、利用可能なアイテムのリストが長い場合は、WPFormsの簡単なドラッグ&ドロップフォームインターフェイスを使用して、フォームにドロップダウンフィールドを追加することを検討してください。

フォームの送信と売上をどのように追跡できますか?

WPFormsを使用すると、注文フォームからの支払いデータを簡単に追跡できます。専用の「支払い」画面があり、これは無料版とWPForms Proの両方で利用可能です。

オンライン注文フォームの支払い画面

WPFormsの「支払い」画面では、総取引数、売上からの収益、サブスクリプションからの収益、クーポン利用状況などを追跡できます。

注文フォームのデザインとレイアウトをカスタマイズするにはどうすればよいですか?

WPFormsには、コードなしでフィールドの境界線、ラベル、エラーメッセージ、ボタンを編集できる包括的なフォームスタイリングオプションが含まれています。

これを使用して注文フォームのデザインをカスタマイズできます。この機能は、Liteを含むすべてのバージョンのWPFormsで利用可能です。

注文フォームのレイアウトを変更する必要がある場合は、便利なレイアウトフィールド(有料プランのみ利用可能)を使用するか、カスタムCSSコードを使用することで実現できます。

マルチステップ注文フォームを作成するにはどうすればよいですか?

WPFormsでは、他のフィールドの間にページ区切りフィールドを使用して、注文フォームを複数のステップに分割することで、マルチステップ注文フォームを作成できます。

または、WPFormsリードフォームアドオンを使用することもできます。これは、非常にインタラクティブなフォーム入力エクスペリエンスを作成し、フォームの疲労を最小限に抑えるために複数のステップを追加します。

1つのフォームに複数の商品を追加できますか?

はい、WPFormsを使用して1つの注文フォームに複数の商品をリストできます。複数選択フィールドなどをドラッグ&ドロップし、各商品と価格を追加するだけです。

税金と配送料の計算を設定するにはどうすればよいですか?

WPForms Calculationsアドオンを使用すると、フォームに税金や配送料を自動的に追加できます。フォーム内で基本的な計算ができるため、ユーザーが選択したものに基づいて合計金額が更新されます。

割引やプロモーションコードを提供することは可能ですか?

はい、WPFormsにはクーポンアドオンがあり、割引コードを作成できます。ユーザーがコードを入力するフィールドを追加するだけで、フォームはチェックアウト前に割引を適用します。

WordPressで注文フォームを作成するためにWooCommerceが必要ですか?

いいえ。簡単な商品やサービスの注文であれば、WPFormsのようなフォームプラグインは、完全なeコマースプラットフォームよりも高速で軽量です。

大規模な商品カタログ、在庫管理、または複雑な配送ルールが必要な場合は、WooCommerceの方が適しています。しかし、数点の商品やサービスの注文を収集するだけであれば、注文フォームで十分です。

次に、ウェブサイトからさらに収益を上げる

自分のウェブサイトからもっと収益を上げたいと思いませんか?「最高のWordPressアフィリエイトプラグイン」に関する投稿をチェックすることをお勧めします。

WordPressのメール設定は正しく構成されていますか?「WordPressでメール設定を調整する」ガイドを確認して、送信メールが正しく機能していることを確認してください。

WordPressフォームを今すぐ作成

フォームの作成準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください

オサマ・タヒル

オサマはWPFormsのシニアライターです。彼はWordPressプラグインをテストのために分解し、その洞察を世界と共有することを専門としています。もっと詳しく

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。

WordPress注文フォームの作成方法(ステップバイステップ)」に関する6件のコメント

  1. こんにちは。
    ユーザーに2つの通貨(例:CHFとEUR)から選択させることは可能ですか?
    ご回答とご協力ありがとうございます😊
    jm

    1. Jean-Marcさん、こんにちは。

      申し訳ありませんが、現在、異なる通貨を選択するための組み込み機能はありません。現在の機能では単一通貨のみが許可されています。この機能を将来の改善のための機能リクエストとして検討するよう、あなたの意見を追加しました。

      ありがとう

  2. 各商品の注文数を変更するセレクターを設けることは可能ですか?
    例えば、黒いシャツを10枚、赤いシャツを5枚注文したい場合などです。

    また、例えばユニークな商品の番号リストを作成し、一度注文された番号は利用不可にするということは可能ですか?

    私はWooCommerceストアを運営しており、何が可能かを知っていますが、クライアントには4〜5点の商品しかなく、コンピューターの知識が少ないため、WPFormsの方が適しているかもしれません。

    1. Troelsさん、こんにちは。現在、商品の数量に基づいて値を変更したり、注文後に利用できなくなる商品の数を設定したりする機能はありません。こちらに回避策がありますが、これは素晴らしい機能になるだろうという点には同意します。機能リクエストトラッカーに追加します。

  3. 注文フォームを「見栄え良く」する方法はありますか?ブランドに合わせてページをカスタマイズしたいのですが、あまりにも素っ気ないのです。どのようにすればよいでしょうか?

    1. Amberさん、こんにちは。フォームのスタイルをカスタマイズするには、こちらのドキュメントとこちらのドキュメントをご覧ください。

      サポートが必要な場合は、サポートにご連絡いただければお手伝いいたします。

      WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。

      それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。

      ありがとうございます 🙂

コメントを追加

コメントを残していただきありがとうございます。コメントはすべて、当社のプライバシーポリシーに従ってモデレーションされます。また、すべてのリンクはnofollowとなります。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareのプライバシーポリシーおよび利用規約が適用されます。