ワードプレスプラグイン『All Post Contact Form』を使って、リアルタイムお見積もり計算機を作ろう！

当社が開発して無料で配布しているワードプレスプラグイン『All Post Contact Form』を使うと、見込み客に「リアルタイムお見積もり計算機」を提供することができ、見込み客のお見積もり結果を、メールとして受け取ることができます。「リアルタイムお見積もり計算機」とは、同一ページ上に、お見積もり結果がすぐに反映される仕様の計算機です。

「リアルタイムお見積もり計算機」は、固定ページや投稿ページで作成することもできます。しかし、この場合、訪問者がリアルタイムお見積もり計算だけをしてページを去ってしまうと、御社は、お見積もり結果を取得することができません。そこで、「リアルタイムお見積もり計算機」をコンタクトフォームプラグイン『All Post Contact Form』の最初の入力画面として設置し、予約フォームへとつなげることで、お見積もり結果を取得できるようにします。

お見積もり結果を取得することができると、予約者がどのような作業を御社に依頼しようとしているのか、事前にある程度把握することができます。依頼内容を予想して、御社が「この依頼は込み入ってそうだな」とご判断になった場合は、御社のほうで、予約プラグイン（たとえば、『WooCommerce Bookings』など）の管理画面内で予約の延長をかけることができます。つまり、予約者が「３０分を予約したつもり」でおられても、御社は「１時間余裕をみている」という状況を作ることができます。( 参考： ワードプレスプラグイン『WooCommerce Bookings』 で、一旦受け付けた予約時間を任意の時間で延長する方法)。『WooCommerce Bookings』をお使いの場合、予約者には、御社が「１時間自分のために余計に時間をとった」という事実はわかりません。予約者には、別の予約者が予約を入れただけのように見えます。

お客様本人の見積もりと実際の作業内容とが違った場合は、管理画面内で、その内容を「お客様カルテ」として残しておくことができます。

というわけで、今回は、当社のワードプレスプラグイン『All Post Contact Form』と別の予約プラグインとを組み合わせて、「リアルタイムお見積もり計算」をしたお客様を、そのまま「ご予約フォーム」へとおつなぎする方法をご紹介いたします。

全体の構成

入力画面の構成

• ＊２　メールアドレスを取得する必要のない理由

• ワードプレスプラグイン『All Post Contact Form』は、メールの件名に表題に「リアルタイムお見積もり計算機」を動かした人のIPアドレスを表示します。そのため、「リアルタイムお見積もり計算機」を動かした人がお見積もり後そのまま予約フォームを使って予約をした場合、IPアドレスが一致することが多いからです。

それでは、早速「リアルタイムお見積もり計算機」の作り方をご紹介しましょう。

（１）リアルタイムお見積もり計算機の本体プログラムを、http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtmlからダウンロードします。

http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

（２）（１）の「 See the DEMO 」ページの html ソースをベースにして、御社用のお見積もりフォーム html を作ります。

（３）（２）のうち、リアルタイムで表示される「お見積もり総計」にあたる場所（ totalPrice ）を、次のようにカスタマイズしてください。

このようにカスタマイズしないと、『All Post Contact Form』の確認画面に「お見積もり総計」を引き継ぐことができないからです。

さらに、『All Post Contact Form』の送信完了画面で予約フォームにつなぐため、submit ボタンを次のようにカスタマイズします。

（４）（３）で作成したクラス「 totalbar 」のために、デザイン（ CSS ）を書き下ろし、cakeform.css の末尾に追加してください。cakeform.css を御社用にリネームして、サーバーにアップロードしてください。

（５）（１）の「 See the DEMO 」ページの「 formcalculations.js 」をベースにして、御社用のお見積もりフォーム javascript 計算機を作ります。作り終えた「 formcalculations.js 」を、サーバーにアップロードしてください。

（６）（４）のスタイルシートの URL と（５）の JavaScript ファイルの URL とを、header.php に追加します。

（７）（３）で作り終えた御社用のお見積もりフォーム html を「固定ページ」に貼り付けます。もちろん独自のお見積もりフォーム用のテンプレートに貼り付けても OK です。

（８）wp-content/plugins/allpost-contactform の中の「 allpost-contactform-str_replace.php 」を利用して、key と value がアルファベットになっているのを日本語に直します。直し方ですが、（３）の html フォームの内容をコピペすれば直すことができます。 たとえば、フォームが、

となっている場合、「 allpost-contactform-str_replace.php 」での日本語訳は、

となります。

• 参考：　『allpost-contactform-str_replace.php ( "All Post Contact Form"'s Filter File - String Replace - ) の使い方を教えてください。』

（９）wp-content/plugins/allpost-contactform/assets の中の「 apcf_template_ja.php 」を利用して、「確認画面」と「送信完了画面」とに表示されるテンプレートを作成してください。ワードプレス固定ページの『All Post Contact Form』のショートコードを貼り付けたページを開き、できあがった新しいテンプレートを適用してください。

送信完了画面が表示されたときに予約フォームを表示したい場合は、確認画面用の submit ボタンを利用して、条件を作って分岐してご適用ください。条件の作り方は、こちらのページをご覧ください：　『「確認画面」と「送信完了画面」とに、それぞれ違う独自のメッセージを表示したいです。どうしたらよろしいでしょうか。』