How to Create a RealTime Estimate Calculator by Using a WordPress Plugin, All Post Contact Form

  |  By using a WordPress Plugin, All Post Contact Form, you can provide a 'RealTime Estimate Calculator' to your potencial customers and you can get the result of the estimate as an email.   | https://www.rainbow-link.com/marketing_article16.htm

By using a WordPress Plugin, "All Post Contact Form", you can provide a 'RealTime Estimate Calculator' to your potencial customers and you can get the result of the estimate as an email. A 'RealTime Estimate Calculator' is a calculator which shows the result of the estimate your potencial customers calculate directly at the same webpage.

Of course, you can provide a 'RealTime Estimate Calculator' at 'Pages' or 'Posts', but, in this case, if a potencial customer uses the 'RealTime Estimate Calculator' and leave the page, you can't grab the result of the estimate. Then, in order to grab the result of the estimate, we recommend to set a 'RealTime Estimate Calculator' as the first page of "All Post Contact Form" and to set a booking form at the 'Submission Window' of "All Post Contact Form".

If you can grab the result of a 'RealTime Estimate Calculator', you can roughly grab what work your customer need beforehand. If you can roughly grab what work your customer need, you can anticipate the time you have to assign to the customer. Even if your customer books 40 minutes at the booking form, you can assign 1 hour 10 minutes for the customer secretly. If you use "WooCommerce Bookings" as your booking plugin(*1), your customer can't know the fact that you book more time for the customer.

If the result of the estimate by the customer is different from the work you do, you can save the fact as a memo in your WordPress Admin Window.

Then, we'll introduce how to lead your customer who have used your 'RealTime Estimate Calculator' to your booking form.

Whole composition of this project

First page of "All Post Contact Form": RealTime Estimate Calculator

Confirmation Window of "All Post Contact Form": confirmation of the result of the estimate at the previous page.

Submission Window of "All Post Contact Form": Booking Form set by another plugin

Composition of the first page of "All Post Contact Form"

<h2> Use our RealTime Estimate Calculator </2>
:::::::::: RealTime Estimate Calculator :::::::::::::::::::::::

<h2> Proceed to our Booking Form </2>
<input type="text" name="e-mail" value="your@email.address"> ← you can omit this line(*2)
<input type="submit" name="submit" value="Book Now!">
  • *2 The reason you don't need to get the customer's e-mail address.
  • The email that you get from "All Post Contact Form" displays IP Address at the subject of the email. So, if your customer book after running your 'RealTime Estimate Calculator', the IP Address which is displayed at the subject of the email by "All Post Contact Form" and the IP Address which is displayed in the body of booked-notice-email by your booking plugin will be the same one.

Then, let's create your 'RealTime Estimate Calculator'!

(1) Download the source of 'RealTime Estimate Calculator' from the URL of http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml.

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

(2) By using the html-source of (1)'s "See the DEMO" page, create your html-source for your 'RealTime Estimate Calculator'.

(3) In (2), edit 'totalPrice' as follows:

If you don't edit like above, the total price as the result of your 'RealTime Estimate Calculator' can't be tied to the 'Confirmation Window' of the "All Post Contact Form".

Then, in order to tie the booking form at the 'Submission Window' of "All Post Contact Form", estimate your submit-button as follows:

(4) Create a new design for the class of 'totalbar' which you created at (3). And add it to the bottom of 'cakeform.css'. Rename 'cakeform.css' to your own css name and upload it to your web-server.

(5) Create a javascript by using 'formcalculations.js' of (1). And upload it to your web-server.

(6) Add the URL of (4)'s CSS and the URL of (5)'s JavaScript to header.php.

(7) Copy your (3)'s html to a page of your WordPress 'Pages' ( or a template ).

(8) Create a new template by using 'apcf_template.php', and assign it to a page of your WordPress 'Pages' which you paste the short code of "All Post Contact Form".

In the new template, if you'd like to display the booking form at the part of 'Submission Window', create conditions by using submit-button. How to create conditions : I'd like to display different custom messages at "Confirmation Window" and "Submission Window". What should I do?