注文フォーム作りの基本

飲食店のベーシックな注文フォームをステップバイステップで作りながら、 AForms Eatsの使い方の基本を説明します。

「ベーシック」ということで、お食事の受け渡し方法はテイクアウトということにします。（デリバリーの場合はページの下の方に書きました）

ではさっそく始めましょう。

フォームビルダーを開く

フォーム一覧から「新規追加」をクリックして、フォームビルダーを開いてください。
フォームビルダーを開くと4つのタブがあります。それぞれ、次のような役割があります。

「全般」タブは初期状態で問題ありません。
ですので、さっそく「明細」タブでメニューを登録していきましょう。

メニューを登録する

画面左側にある部品リストから、部品をフォームに追加していきます。
AForms Eatsは商品をグループごとに表示するようになっていますので、まずはフォームにグループを登録してください。
グループは、たとえば「サラダ」「ハンバーグ」「パスタ」…のような感じです。

グループの設定は名前だけ入力してあげれば十分です。
名前を入力したら、画面下部の「変更を確定」ボタンを押して内容を確定しましょう。

次に、グループに商品を追加していきます。
グループを選択していると部品リストで「商品項目」が選べるようになりますので、それをクリックして商品を追加します。

商品の設定は、写真、名前、金額の3つだけ入力すればそれなりのフォームを作れます。

画面右上の「プレビュー」をクリックすると注文フォームの簡易的なプレビューを見られます。
プレビューで確認しながら商品を登録していけば、間違いが少なくなって良いです。
プレビューを開く前にはフォームを保存するのを忘れないようにしてください。

入力フォームを作る

次に、「注文フォーム」の「フォーム」の部分、つまりお客様に入力してもらう部分を作ります。
「お客様の属性」タブを使います。

先ほどの明細タブとは違って、ここには「グループと商品」のような構造はありません。ですので、入力してもらいたい内容に応じた部品をフォームに追加していけば大丈夫です。

この記事では、典型的な項目を説明していきます。

テイクアウトですので、お客様がお店に商品を取りに来ます。
取りに来たお客様を呼ばなければいけませんので、「名前」部品で名前を入力してもらいましょう。

また、お客様が取りに来てない場合に連絡が取れないといけませんので、「電話番号」部品で電話番号を入力してもらいましょう。

次に、お客様がいつ取りに来れるのかを入力してもらいます。「ドロップダウン」部品を追加して、設定項目「選択肢」に選択肢を入力します。
たとえば「11:00,12:00,13:00」とすると、選択肢が「11:00」「12:00」「13:00」のドロップダウンメニューを作れます。

お客様が任意のメッセージを入力できるように、通信欄を設けておくのも良いかもしれません。「テキスト」部品を追加して、設定項目「入力必須」を「自由」に、設定項目「行数」を「複数行」にします。
これで、お客様は「少し遅れますが必ず取りにいきます」とか「サビ抜きでお願いします」とか、雑多な連絡事項を伝えられるようになりました。

通知メールが届くようにする

フォームから注文があったらメールで通知が届くようにします。
「メール」タブを使います。

AForms Eatsのメール機能は、本来はお客様に注文確認メール（自動返信メール）を送るためのものです。
ですが、これの設定項目「通知先アドレス」に飲食店のスタッフのメールアドレスを入力しておけば、サンキューメールのコピーがお店スタッフにも届くようになります。

初期状態では、メール本文が簡素すぎて使いものになりません。
ですので、{{details}}、{{total}}、{{attributes}}を追記して、注文内容、金額、お客様情報がメールに記載されるようにするとよいです。

フォームをページに貼り付ける

これでフォームは完成です。
AForms Eatsで作った注文フォームは、WordPressの投稿や固定ページに埋め込んで使います。
フォームビルダーの「全般」タブにショートコードが表示されていますので、これを投稿や固定ページに埋め込んでください。

埋め込んだら、そのページをブラウザで開いて、思い通りに出来てるか確認しましょう。

ヒント

確認画面を省略する場合

AForms Eatsで作った注文フォームは、初期状態で確認画面を表示するようになっています。
確認画面を省略したい場合は、フォームビルダーの全般タブで設定項目「確認画面を表示する」を「表示しない」にしてください。

注文完了画面を表示する場合

注文フォームを送信したお客様に「ご注文ありがとうございました」画面（注文完了画面）を表示したい場合です。
この場合は、注文完了画面をあらかじめWordPressで作っておいて、そのページのURLをフォームビルダーに設定します。
設定箇所は、全般タブの設定項目「サンクスURL」です。

デリバリーの場合（配達先）

テイクアウトでなくデリバリーの注文フォームの場合です。
デリバリーの場合は配達先をお客様に入力してもらう必要があります。
フォームビルダーのお客様の属性タブで「住所」部品を追加してください。
設定項目「自動補完」を「Yubinbango（日本）」にすると、郵便番号から住所が自動補完されて、使いやすいフォームになります。

デリバリーの場合（配達料）

上記に加え、配達料を注文金額に上乗せしたい場合です。
その場合は、フォームビルダーの明細タブで「自動項目」を追加してください。
これは、内容が固定された行を明細に追加する部品です。
設定項目「名前」には「配送料」などを、設定項目「金額」には配送料をセットします。

なお、テイクアウトでもデリバリーでも、食事代は軽減税率の対象（消費税8%）です。が、配達料は軽減税率の対象外ですので、配達料の消費税は10%です。
AForms Eatsはこんな状況も適切に取り扱えます。詳しくは「税の設定（軽減税率）」をご覧ください。

注文確認メールを送信する場合

お客様がフォームから注文したときに注文確認メールを送信したい場合です。
この場合、メールの送り先をお客様に入力してもらう必要がありますので、フォームビルダーのお客様の情報タブで「メールアドレス」部品を追加してください。

AForms Eatsは、お客様がフォームを送信したとき、メールアドレスが入力されていれば自動返信メールを送ります。

自動返信メールの内容は、フォームビルダーのメールタブから設定できます。