WordPressプラグインAFormsで金額計算機能付きの注文フォームを実装する

2022年2月13日2022年5月10日

AForms最高すぎます。
注文金額の自動計算（見積もり）が可能な注文フォームが実装できる無料Wordpressプラグイン。

多機能なフォームの要望

問い合わせフォームでかなり複雑な機能を求められるケースは意外と多いですよね。
たとえばこんな内容。

予約フォームで特定日・特定曜日だけ予約可能時間を変えたい
前の選択内容によって、入力項目を切り替えたい
異なる複数の商品・数量を組み合わせて入力したい
入力内容で金額を見積り表示したい
在庫・枠数管理したい

（アトリエ・ロフィルでは、問い合わせフォームの機能追加やカスタマイズのスポット対応も承っております）

さて、あるクライアント様のホームページで、ECサイトとか本格的なものは不要だが、問い合わせフォームのレベルで、メールによる注文の受付だけ行いたい、という案件がありました。

決済も不要とのことで、Woocommerceで銀行振込のみ運用、とかも有りかなぁと思ったのですが、工数とコスト面で断念。MW WP FormやContact Form7のカスタマイズ、Calculated Fields Formなども検討したものの、ユーザビリティーの面でNG。

複数ある商品を、数量・色などのオプションを含めて注文できて、かつ使いやすく、少ない工数で実装するにはAFormsが最適でした。

最高すぎる注文フォームプラグイン：AForms

WordPress.org 日本語

自動見積と料金シミュレーションのためのフォームビルダー「AForms」 Form builder for Cost estimation and Custom order.

デモサイト

飲食店向けの「AForms Eats」の方が多機能ではあるんですが、無料で使う場合には、Eatsでない無印の方が使い勝手が良い印象です。

在庫管理や決済、本格的なECサイトは必要ないけれども、注文を受け付けるのに必要な情報は網羅したいというニーズにぴったり。もしフルスクラッチで作ろうものならかなりの金額のシステムになろうかと思います。素晴らしいプラグインです。

いいところ

商品画像を見ながら注文できるので分かりやすい
商品の個数を選択できる
刻み値（ロット数）をコントロールできる
カテゴリをまたぐ異なる商品を選択してまとめて注文できる
消費税の計算ができる（税率変更可能）
料金の自動計算（見積もり）ができる
計算式が使える
条件分岐（ラベリングロジック）で自動割引・上乗せができる（送料とか）

無料プラグインでここまで柔軟にコントロールできると、概ねの要望はカバーできるのではないでしょうか。1万円未満の注文なら送料1000円を追加とか、3000円以上でないと注文できない、なども条件分岐可能です。

少し分かりづらいのが、選択項目の「複数選択」の項目で、複数選択が「不可」の場合は項目が必須項目になります。「可」の場合は、任意項目になります。複数商材から任意の項目を選択させる場合は、「複数選択：可」に設定する必要があります。

よくないところ

フォーム内に要素（テキストとか画像）を追加できない
ステップ分割できない（商品選択と個人情報入力が1画面）
確認画面はページ遷移なし
メールヘッダー（reply-to）の設定ができない

たとえば商品選択パートと、個人情報入力パートに、それぞれ見出しを追加したいな〜という場合、AFormには、フォーム内にテキストやHTML要素を挿入する機能がありません。

シンプルにjs（jQuery）のappendとかで要素追加を試みましたが、DOMの変更はうまくいきませんでした。

CSSの方は問題ありませんので、beforeやafterの疑似要素を用いて見出しっぽいものを追加することは可能です。（マークアップ的に嫌だなぁという感じはしますが）

個人情報入力パートに見出し（っぽいもの）を追加するcssの例

wq-Attributes:before {
    content: "お客様情報";
    font-size: 1.3em;
    font-weight: 600;
    border-bottom: 2px solid #ccc;
    display: block;
    margin-bottom: 2em;
}

また、ステップ分割の機能がありませんので、注文＋見積もり＋個人情報入力で、かなり1画面が長い仕様になります。注文者と発送先を分けたい場合とか、入力項目が多いと、ちょっとしんどいかもしれません。

注文完了画面は、特定のページを指定することができますが、確認画面での遷移はありません。注文用のページと同じページ内に、確認内容が表示される仕様なので、ページタイトルや注意書き等は注文ページの内容を引き継ぎます。

以上でよろしければ「送信」ボタンを、修正する場合は「戻る」を押下してください。

といった記載の追加ができませんね。
これもCSS疑似要素で（wq–leadTextに）無理やり追加する感じになるかなぁ。

なおデフォルトで用意される文章やボタンテキストについては、フォーム設定の「文言」から変更可能です。

reply-toの設定

A-formsの標準仕様では、自動送信メールのReply-toを設定する機能がありません。

reply-toが設定できないと何が困るかというと、

注文したユーザーからの返信を、送信したアドレスとは異なる特定のメールアドレスで受けたい場合
管理者宛メールに返信（引用）する形で、ユーザーへ連絡を取りたい場合に、送信先の設定が手間

特に後者は注文内容についての確認や、納期連絡など、ユーザーへの連絡が別途必要なケースは多々ありそうです。

実際に、A-formsを導入した案件では、管理者宛メールのreply-toに注文したユーザーのアドレスを挿入するカスタマイズ対応を行いました。標準機能としてreply-toが設定できるようになることを期待しています。

有料オプションがめっちゃ便利そう

飲食店向けのAForms Eatsも

WordPress.org 日本語

AForms Eats An order form builder for restaurants. You can create comfortable order forms and sell your food online.

AForms Eatsデモ

概ねAFormsと同じですが、飲食店向けにカスタマイズされ、多機能になっています。

AForms（無料版）は、上から商品選択・見積もり・個人情報入力のフォーム構成ですが、AForms Eatsは、商品選択と見積もりが横並びで、その下に個人情報入力の仕様となっています。

また、AFormsでは1画面に全て表示されていた商品のカテゴリが、AForms Eatsではタブで切り替えて表示する仕様になっています。

よくないところ（採用を見送った理由）

画面幅が固定（PC版）
レスポンシブ対応が微妙（有料版では編集可）
カートに増やすのは簡単だけど減らすのが大変

画面幅が固定（PC版）

無料版ではPC／スマホ表示を切り替えるBreakpointの設定ができません。
また、フォームの幅が、商品選択エリア（600px）／カート・見積もりエリア（350px）で固定幅のため、テーマによっては左右に不要な余白ができたり、Breakpointと一致しない、特定の画面幅で見切れる、等の可能性があります。