技術メモ
橋本貢著「エンジニア・デザイナー・ライターのための案件獲得」を読んでの備忘録

和菓子屋さんのホームページのリニューアルを受注しました。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 Cost Calculator」を有効化する

有効化ボタンを押して「Contact Form 7 Cost Calculator」プラグインをサイトに導入してください。

Contact Form 7をカスタマイズしていく

今回、既存のContact Form 7の設定は終わってる過程で進めていきます。

4つのボタンが選択できるようになる

「Contact Form 7 Cost Calculator」を有効化することで、下記の画像のようにボタン設定が表示されます。

Contact Form 7 Cost Calculatorで4つのボタンが選択できるようになる
4つのボタンが選択できるようになる
  • 「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プラグインを使用して、簡単な注文フォームを作成しました。
そこまで複雑な設定はなく、簡単だったんじゃないでしょうか?仕組みさえわかったらもう少し複雑な注文フォームでも対応できそうですね。
自分の備忘録として残してはいるものの、皆さんにとってもご参考になれば大変嬉しいです!

ホームページ制作ご対応エリア

LIVALESTは、個人のフリーランスとして活動しています。全国対応ではなく、大阪を中心とした関西圏の直接お会いできる距離を重要視しています。

直接、お話をお伺いすることで、広く深くクライアント様のビジネスを理解し、ホームページを通じて、要望を実現いたします。

  • 大阪府:
  • 池田
  • 泉大津
  • 泉佐野
  • 和泉
  • 茨木
  • 大阪狭山
  • 旭区
  • 阿倍野区
  • 生野区
  • 北区
  • 此花区
  • 城東区
  • 住之江区
  • 住吉区
  • 大正区
  • 中央区
  • 鶴見区
  • 天王寺区
  • 浪速区
  • 西区
  • 西成区
  • 西淀川区
  • 東住吉区
  • 東成区
  • 東淀川区
  • 平野区
  • 福島区
  • 港区
  • 都島区
  • 淀川区
  • 貝塚
  • 柏原
  • 交野
  • 門真
  • 河内長野
  • 岸和田
  • 四條畷
  • 吹田
  • 摂津
  • 泉南
  • 高石
  • 高槻
  • 大東
  • 豊中
  • 富田林
  • 寝屋川
  • 羽曳野
  • 阪南
  • 東大阪
  • 枚方
  • 藤井寺
  • 松原
  • 箕面
  • 守口
  • 八尾
  • 兵庫県:
  • 神戸
  • 姫路
  • 尼崎
  • 明石
  • 西宮
  • 洲本
  • 芦屋
  • 伊丹
  • 相生
  • 豊岡
  • 加古川
  • 赤穂
  • 西脇
  • 宝塚
  • 三木
  • 高砂
  • 川西
  • 小野
  • 三田
  • 加西
  • 丹波篠山
  • 養父
  • 丹波
  • 南あわじ
  • 朝来
  • 淡路
  • 宍粟
  • 加東
  • たつの
  • 京都府:
  • 京都
  • 福知山
  • 舞鶴
  • 綾部
  • 宇治
  • 宮津
  • 亀岡
  • 城陽
  • 向日
  • 長岡京
  • 八幡
  • 京田辺
  • 京丹後
  • 南丹
  • 木津川
  • 和歌山県:
  • 和歌山
  • 海南
  • 橋本
  • 有田
  • 御坊
  • 田辺
  • 新宮
  • 紀の川
  • 岩出
  • 奈良県:
  • 奈良
  • 大和高田
  • 大和郡山
  • 天理
  • 橿原
  • 桜井
  • 五條
  • 御所
  • 生駒
  • 香芝
  • 葛城
  • 宇陀
  • 滋賀県:
  • 大津
  • 彦根
  • 長浜
  • 近江八幡
  • 草津
  • 守山
  • 栗東
  • 甲賀
  • 野洲
  • 湖南
  • 高島
  • 東近江
  • 米原

ホームページ制作やWeb集客、
リニューアルやサイトの管理・運用・更新まで、
あなたのご相談・ご依頼をお待ちしております。

お電話でのお問い合わせ

050-5604-7128 平日10:00 - 18:00

24時間以内に必ず、ご連絡させていただきます。

ホームページ制作実績一覧