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

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

日本(千葉県)の会社が開発しているので、日本語UIでめちゃ簡単に実装できます。導入ガイド・ドキュメントもしっかり用意されています。

日本人向けの注文・見積もりフォームとしては、ベストなWordpressプラグインと思います。ECサイト構築や決済機能までは要らないけれど、注文だけ受け付けたいニーズにベストマッチ。便利すぎて、開発相場価格を破壊しかねない・・・秘密にしておきたいくらい超オススメです。

最近お手伝いさせていただいた、株式会社テイクオー様のウェブサイトで実装していますので、よろしければ御覧ください。

※エアコン用の省エネフィルターと、健康腹巻き、とっても良い商品です。キャンペーン割引の期間に、ぜひお試しください!

目次

多機能なフォームの要望

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

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

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

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

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

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

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

AForms

飲食店向けの「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が設定できるようになることを期待しています。

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

  • 見積書PDF発行(5,500円)
  • スタイル拡張(5,500円)
  • アップロード拡張(4,400円)

それぞれ1サイト用のライセンス(+半年間のメールサポート)。案件に使うならスタイル拡張があると心強いですね。

スタイル拡張により、色や余白・Breakpoint等の調整だけでなく、画像の幅や折返し(複数行表示)の設定、サイドバーへの表示が可能になります。

飲食店向けのAForms Eatsも

AForms Eats

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

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

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

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

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

画面幅が固定(PC版)

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

レスポンシブ対応が微妙

AForms Eats

これは個人の好みもあると思いますが、スマホ表示の際のカートボタン(合計金額表示)の位置が独特です。ナビゲーションバー(カテゴリ切り替えメニュー)の上に重なっており、画面をある程度スクロールすると、メニューと一緒に上部に固定表示されます。

CSSのposition:fixedあたりで画面右下に持っていくことは可能ですが、本体テーマとのバランスを取るのが少し難しいかもしれません。なお、有料版(PRO)では、スタイルカスタマイザの機能により、ナビゲーションバーと、カートボタンの高さと幅を変更することが可能なようです。

カートに増やすのは簡単だけど減らすのが大変

AForms Eatsでは、商品をクリック(タップ)でカートに追加、クリックする度に数量が増えます。カート(合計金額の表示)の「+」「ー」ボタンで増減ができる仕様です。

増やすときは簡単ですが、減らしたい・取りやめたい場合は、人によっては混乱しそうです。
PC表示の時は、初めからカートと「+」「ー」ボタンが見えている良いのですが、スマホ表示の時は一度カートボタンを押して内容を表示させる必要があるので、パット見どこで数を増減するのか分からないかも。

ここのユーザビリティは、Eats版ではなく、無印のAFormの方が使いやすいと感じました。

AForms Eats Pro(有料)は機能豊富で便利そう

AForms Eats
  • 組み合わせ商品
  • 日時項目
  • スタイルカスタマイザ
  • 割引・割増
  • 属性監視項目
  • 顧客情報の記憶・自動補完
  • HTML項目
  • 注文データCSV

8,800円(1サイトライセンス)

組み合わせ商品の機能を使うと、セット商品だけでなく、焼き鳥→塩/タレの選択→数量増減のようなことができます。
Tシャツ→色の選択→サイズの選択、といったことも可能ですね。

日時項目では、別のプラグイン(OpeningHours)と連携することで、曜日ごとや祝日、特定日の営業時間による注文受付のコントロールが可能となります。飲食向けの機能ですが、簡易な予約受付システムとしても使えそうですね。

当初の要件と方針(ダメな参考)

参考までに、当初実装予定だった要件としてはこんな感じでした。

  • 商品A:10,000円 x 数量
  • 商品B:5,000円 x 数量
  • 商品C:3,000円 x サイズ(S/M/L) x カラー(白/黒/茶) x 素材(綿/麻)

A、Bはシンプルに、数量を選択するだけ。Cがやや複雑で、3x3x2=18のSKUと数量の選択肢が必要です。

ユーザーによって、A〜Cのうち1点しか買わないこともあれば、いくつかを組み合わせて購入することもあるとのこと。なので、当初の方針としては以下の内容を目指していました。

  • A〜Cの商品の選択によって、追加入力項目(数量・サイズ・カラー・素材)の表示を分岐させる
  • 複数種類の商品を購入したい場合に、「+」ボタンを設けて入力項目を増やせる(無限に)

必要なのは、「条件分岐」と「繰り返しフィールド」。
「Contact Form 7」の追加プラグインや、有料のフォーム系プラグインで実装できるかなと考えていました。

で、ある程度やったところで気が付きました。
複数商品をSKUまでフォームで扱うと、テキスト情報だけじゃ不安しか無いということに。

ほげほげTシャツ(3,000円)サイズM カラー黒 素材綿 数量1
ほげほげTシャツ(3,000円)サイズM カラー黒 素材麻 数量1
ほげほげTシャツ(3,000円)サイズS カラー白 素材綿 数量3
もぐもぐTシャツ(10,000円)数量1            (+)(ー)

確かに入力自体はできたとして、間違いなく望む商品を選択できるか?
合計金額の表示がなくて、確認できるか?
自分で金額計算させるとか、怖くて注文できないのでは?
注文受付後、担当者による確認の上で注文確定とはいえ不親切すぎでは?

ということで、以下の要件を加えて再度プラグインを探す旅に出たのでした。

  • 合計金額の計算ができること
  • 商品を画像で選択できること
  • 条件分岐により計算ができること

結果、AFormsが最高でした。

候補にあった他のWordpressプラグイン

無料系

ちなみにCF7 Repeatable FieldsとConditional Fieldsの併用は動作NGでした。

有料系

Elementorサイトなら、Piotnet Addonsが実装工数少なくて良さげですね。

  • URLをコピーしました!
  • URLをコピーしました!

WHO WROTE

地方テレビ局、歯科コンサル、中堅SIerを経て独立。ダイヤルアップ接続の時代にHTMLに魅せられ、なんだかんだ10年以上WEB制作に関わり続けている。愛車はプジョー5008。

目次