
和菓子屋さんのホームページのリニューアルを受注しました。WordPressでリニューアルするにあたり、既存サイトの注文フォームもWordPressで作成する必要がありました。普段使っているContact Form 7と連携して簡単な注文フォームを作ることができたので備忘録として書いておきます。
まずは、作った注文フォームはこちらです。
動画を再生するにはvideoタグをサポートしたブラウザが必要です。
制度設計としては、注文商品と料金はあらかじめ設定しておき、商品・注文個数・配送地域のユーザーに選択してもらって、その選択に応じて自動で料金を出力できるようになっています。
この記事の目次
なぜ、Contact Form 7で注文フォームをつくったのか?
普通のWebサイトとは違い、決済情報を含む個人情報を扱うにはかなりのセキュリティコストがかかることを認識する必要があります(個人商店が特に決済情報を扱うのはかなりリスキーだと考えています)。
大きな会社であっても個人情報の流出のニュースは枚挙にいとまがありません。こういった点から、注文・決済フォームもしくはECサイトなどのご依頼があった場合は、個人情報を自分のサイトのデータベースに格納するようなタイプではなく、カラーミーなどのASPのカートシステムやBASE、shopfyなど受注側で決済情報・個人情報を所持しない設計の提案をすることが多いです。
ただし、今回のサイトでいえば、お客様のクレジットカード等の決済情報は元々取り扱ってませんでした(支払い方法は代金引換のみでした。)
ですので、通常のWebサイトにContact Form 7をカスタマイズして簡易版の注文フォームを作成することにしました。
「Contact Form 7 Cost Calculator」を使う
今回のボトルネックは、商品・送料を選択してから、自動で計算するシステムでした。色々とプラグインを試していたんですが、無料プラグインかつメンテナンス・更新性の部分で決めました。
今回作った注文フォームのように、ラジオボタン(注文商品)とセレクトボタン(送料設定)に対応していて使いやすかったです。
※今回は使用しなかったですが、チェックボタンにも対応しているようです。
「Contact Form 7 Cost Calculator」の実装方法
では、順序立てて説明していきます。
プラグインを導入
上記サイトからダウンロードするか、「Contact Form 7 Cost Calculator」で検索してプラグインを導入してください。

有効化ボタンを押して「Contact Form 7 Cost Calculator」プラグインをサイトに導入してください。
Contact Form 7をカスタマイズしていく
今回、既存のContact Form 7の設定は終わってる過程で進めていきます。
4つのボタンが選択できるようになる
「Contact Form 7 Cost Calculator」を有効化することで、下記の画像のようにボタン設定が表示されます。

- 「checkboxes Custom」
- 「radio buttons Custom」
- 「drop-down menu Custom」
- 「Calculated」
の4つのボタンが表示されます。
「checkboxesCustom」はチェックボックス形式での項目表示、「radio buttons Custom」はラジオボタン形式での形式での項目表示、「drop-down menu Custom」はセレクト形式での項目表示となります。
「Calculated」は数値の合計を出力する部分の項目になります。
注文商品の設定
では具体的に見ていきましょう。

注文商品のところはラジオボタンで作っています。画像のように、ダブルクォーテーションで『数値+「|」+出力名』で商品を入力していきます。
今回の例でいくと、”194|スイートポテト¥194″ “1025|スイートポテト5個入り¥1,025” “2105|スイートポテト10個入り¥2,105″・・・と続けています。
※ダブルクォーテーション同士の間は半角の空白です。
注文商品の個数の設定

注文商品の個数設定に関しては、input要素のnumber型を使用します。これはContact Form 7の機能としてあります。「数値」と書かれたボタンはこれに当たります。
画像にあるように今、min:1 max:20 と設定することで、最低1個から最大20個まで選択できるように設定しました。これに関しては各種フォームの仕様に合わせて設定していけばいいですね。もちろんここの設定はしなくても問題ありません。
注文フォームは注文商品を2つ選択できるようにしていますがその部分の説明は重複になるので省きます。
送料設定

送料設定の項目については、「drop-down menu Custom」のボタンを使用しました。これはいわゆるセレクトボタンになります。
ここはラジオボタン同様に、ダブルクォーテーションで『数値+「|」+出力名』で設定していきます。
送料の部分になるので、”907|中部・北陸・関西・中国・四国¥907″ “1663|北海道¥1,663” “1231|北東北¥1,231″・・・と設定しています。
合計金額の設定
最後に、合計金額を自動出力する部分を作成していきます。
「Calculated」ボタンで作ります。

ダブルクォーテーションの中で、計算の設定を作ります。
ここでは、注文商品や送料設定などで使用した各項目の名前タグを使用します。
今回でいえば、
<1>注文商品:radio_custom-item01
<1>注文個数:number-item01
<2>注文商品:radio_custom-item02
<2>注文商品:number-item02
送料設定:delivery-price
です。
この各項目の名前タグを使って計算方法を設定します。
今回で設定したのは下記の内容です。
radio_custom-item01*number-item01+radio_custom-item02*number-item02+delivery-price
*は「×」、+は「+」ですね。
今回は使用していませんが、-は「−」、/は「÷」となります。
<1>注文商品の値段×その個数+<2>注文商品の値段×その個数+送料といった設定になっております。
少し気になった点
プラグイン側で少し複雑な設定ができない
合計計算の部分に「¥」やカンマの設定ができない。この辺りはJavaScriptを自由に書ける方であれば問題なさそうですが、プラグインの方では設定はできなさそうでした。
ただ、「Contact Form 7 Cost Calculator」は有償版もあるみたいで、もしかするそっちでは設定できるかもしれないですね。そこまで調べきれていないのでわからないですが・・・
あくまで簡易版の注文フォームとして
今回の注文フォームで問題があるとすれば、商品を3つ以上選びたい場合の選択肢がないことです。注文商品点数が多ければ多いほど、商品をたくさん選択したいケースが出てきます。
設計上は何個でも選択できるように設定はできます。ただ、増えすぎてくると注文商品が重複して縦に長くなり、UXを悪くしてしまう恐れがあります。
そこはJavaScriptなどで条件分岐することで避けるなどして、工夫が必要になってきますね。今回は注文商品の形態が2パターンだったので問題がありませんでした。
まとめ
動画を再生するにはvideoタグをサポートしたブラウザが必要です。
Contact Form 7とContact Form 7 Cost Calculatorプラグインを使用して、簡単な注文フォームを作成しました。
そこまで複雑な設定はなく、簡単だったんじゃないでしょうか?仕組みさえわかったらもう少し複雑な注文フォームでも対応できそうですね。
自分の備忘録として残してはいるものの、皆さんにとってもご参考になれば大変嬉しいです!