WordPressでWPFormsを使用してオンライン注文フォームの作成

Last Updated:2021年05月25日| | 6のコメント

WordPressでWPFormsプラグインを使用すると、シンプルなオンライン注文フォームでの訪問者や顧客から注文を受けることができます。

WordPressは WooCommerce (WooCommerce)プラグインを使用して、電子ショッピングモールを作ることができますが、簡単な注文を受ける目的では過度な側面があります。 商品やサービスについて、シンプルな注文フォームをご希望の場合コンタクトフォームのプラグインを利用することができます。

WordPress コンタクトフォームのプラグイン:WPForms

WordPress コンタクトフォームのプラグインWPForms

WPFormsは、ドラッグ・アンド・ドロップ方式で簡単に WordPress サイトでお問い合わせフォームを作成することができるプラグインで現在300万を超えるサイトに設置されて使用されています。

WordPress用コンタクトフォームのプラグインでContact Form 7がよく知られているが、CF7にお問い合わせフォームを作成するには、HTMLとCSSを少し知っておく必要目的のレイアウトにお問い合わせフォームを作成することができます。

WPFormsはフィールドをドラッグしてほしいところドロップ方式で簡単にお問い合わせフォームを作成することができており、ユーザーがますます増えています。 WordPressでシンプルなお問い合わせフォームを作成したい場合は、この二つのプラグインのいずれかを選択することができます。 他にも Quform、Gravity Formsなどの有料コンタクトフォームのプラグインもあります。

WordPressでWPFormsを使用してオンライン注文フォームの作成

WordPressでWPFormsを使用してオンライン注文フォームの作成11

WPFormsはStripe、Authorize.Net、PayPalと統合されるため、WPFormsプラグインを使用して、複雑な過程なし注文を受けることができます。 ただし、韓国では、国内のPayPalアカウント間の送金が政府によって禁止されています。 このため、使用に制約があります。 もし海外を対象にしたり、または海外PayPalアカウントがある場合は、複雑な WooCommerce プラグインを使用していなくても、比較的容易に決済を受けることができます。

支払いを受けるWPForms有料版が必要です。 WPForms有料版の詳細については、 WPFormsサイトを参照してみてください。

WPFormsをインストールして有効した場合は、次のような手順に従って、注文フォームを作成することができます。

ステップ1:注文フォームの作成

WPFormsには、あらかじめ作成されたテンプレートが提供されます。 WordPress 管理者ページ> WPForms> Add Newをクリックします。

WordPressでWPFormsを使用してオンライン注文フォームの作成12

注文書を作成する場合は、空のフォーム(Blank Form)で始めてもされるが、あらかじめ作られた Billing/Order フォーム テンプレートを使用すると便利です。

注文フォームをロードした後、フォームを必要に応じて変更することができます。 販売する商品やサービスは、 利用可能なアイテム の部分で構成することができます。

WordPressでWPFormsを使用してオンライン注文フォームの作成13

右のAvailable Items部分をクリックすると、左側にラベルと項目を設定できるように画面が変わります。

各項目に画像を表示したい場合 Use image choicesを選択することができます。

WordPressでWPFormsを使用してオンライン注文フォームの作成14

このオプションを選択すると、アイテムの名前と一緒に画像をアップロードすることができます。 これにより、ユーザーは、写真を見てアイテムを注文することができます。

フィールドを追加するには、左のフィールドをドラッグ右の​​適切な位置にドロップします。 フォームを完成した場合の上部の セーブ ボタンをクリックして、フォームを保存します。

ステップ2:注文フォームの通知を構成する

注文フォームのフィールドを完成した場合は、通知(Notifications)の設定と、フォームの送信後の動作(Confirmations)の設定を構成する必要があります。

通知の設定は、 Settings> Notificationsで設定することができます。

WordPressでWPFormsを使用してオンライン注文フォームの作成15

From Email(送信者の電子メール)は、そのサイトのドメインにされた電子メールアドレスを設定する必要がメール配信事故が発生しません。 たとえば、example.comサイトには、このフォームを使用する場合webmaster@example.comのような電子メールアドレスを入力することができます。 このメールをないメールであっても構いません。 (返信しないという意味でnoreply @ドメインアドレスに設定することも可能です。)

もし返信を受けるメールアドレスを設定したい場合はReply-Toにメールアドレスを入力するようにします。

複数人が受けるように通知を設定したい場合には、 WordPress WPFormsで複数の受信者に通知メールを送信を参照してください。

注文を提出した相手先に確認メールを送信することは通常である。 受信者のメールアドレスに注文者の電子メールアドレスを追加するには、 Send To Email Address フィールドの スマートタグを表示しますをクリックします。

WordPressでWPFormsを使用してオンライン注文フォームの作成16

その後、受信者の電子メールアドレスフィールドに使用可能なフィールドが表示されます。 以下の場合 メール をクリックすると、そのフィールドが受信者のメールアドレスに設定されます。

WordPressでWPFormsを使用してオンライン注文フォームの作成17

有料版では、複数の通知(Notification)を設定することができます。 受信者に応じて異なる内容を伝えたい場合は、複数の通知を構成することができます。

ステップ3:注文フォームを送信した後の動作を設定

Settings> Confirmationsユーザーが注文を提出した後、メッセージを表示するか、または、監査ページや別のURLが表示されるようにするかどうかを設定することができます。

WordPressでWPFormsを使用してオンライン注文フォームの作成18

確認タイプで、次のXNUMXつのオプションの中から選択することができます。

  • Message(メッセージ)。 WPFormsで基本確認タイプです。 顧客が注文フォームを送信すると、ここで設定したフレーズが表示され、注文が処理されたもので確認できるようになります。
  • Show Page(ページの表示)。 サイト内の特定のページを表示します。 たとえば、ありがとうございましたページ(Thank You Page)を作成することができます。
  • Go to URL(Redirect)。 ご注文後に別のサイトにユーザーが移動することになります(リダイレクト)。

メッセージを選択すると、下にメッセージを直接入力することができます。 ショーページ オプションを選択すると、サイト内のページを選択できるドロップダウンが表示されます。 三番目のオプションを選択すると、ユーザーがリダイレクトされるURLを直接入力することができます。

ステップ4:支払いを設定する

最後に、顧客からのコストを支払い得ることができるよう、お支払い方法を設定する必要があります。

WordPressでWPFormsを使用してオンライン注文フォームの作成19

決済方法でPayPal Standard、Stripe、Authorize.Netを利用することができます。 クレジットカードでのお支払いを受けるStripe(ストライプ)を利用すればよいが、我が国では利用できず、米国通帳が開設されている申請が可能であるとします。

我が国では、ペイパルを利用することができます。 しかし、前述のように、韓国では、規定のため、国内のPayPalアカウント間の送金が禁止されて制限的に使用が可能です。

支払いオプションを選択せず​​に振込み方法でも可能です。

ステップ5:ページへの注文書を挿入する

今WPFormsで作成された注文書をページに追加して、サイトに表示することができます。 WPFormsは、ブロックエディタのウィジェットを提供していますので、ブロックエディタ(Gutenberg)で簡単に注文書をページに追加することができます。

WordPressでWPFormsを使用してオンライン注文フォームの作成20

そしてショートコードをコピーして好きなところに貼り付け方法で注文を追加することも可能です。 ウィジェットが提供されていないページビルダーを使用している場合にショートコードで追加します。

一部のページビルダーでは、WPFormsウィジェットがサポートされます。 確認してみる エレメンターページビルダー(Elementor ページビルダー)ビーバービルダーではウィジェットが提供されているため、要素検索で「wpforms」を検索してWPFormsフォームをすぐに追加できます。

参照


6のコメント

コメント

  1. こんにちは、常に助けだけ受けて。申し訳ありませんし、監査しています。 製品注文するシステムを作成しようとしています。 方式は、Excelのセル(WPDATATABLE)のように画面に出てきて、フロントエンド方式でハンセルをクリックすると、検索ウィンドウが出てきて、製品を検索クリックすると、選択セルの項目が入り、発注数量を入れて、次のセルをクリックすると、再び製品検索ウィンドウに出て、発注が完了したら、sendボタンを押すと、発注を入れるシステムを作成しようとしています。 WordPress プラグインで探していた当然になく、もしかしたら、プラグイン推薦や、いやば開発依頼が可能と約開発コストはどのくらいかお問い合わせください。

    応答
  2. 有益な記事ありがとうございます。
    このオーダーフォーム製作時の商品アイテムを入れるとき
    【商品名】【価格】そして数量まで選択できるようにはできませんでしょうか?
    製品のマルチ選択はできますが、数量設定はありません...

    応答