WP Estimation & Payment Forms Builder

WP Estimation & Payment Forms Builder

This awesome plugin allows you to create easily flat visual forms of cost estimation and payment.

Item Support

1. Install Plugin

Here's a brief information about how to install this plugin

Simply upload the file "WP_Estimation_Form.zip" from the plugins panel of Wordpress then activate it clicking the link "Activate" under the name of the plugin.

2. Use the plugin

Here's a brief information about how to use this plugin

In the menu, click the link "E& P Forms Builder".

This is the forms list. You can import existing form datas clicking the button "Import forms", or create a new form clicking the "New Form" button .
To edit an existing form, simply click the pencil icon in the row of the wanted form.

Here is the form view :

In the Step manager part, you can visualize each step composing your form.
In the Form settings part, you can edit all details and options of your form. To get more information on a field, simply move your mouse over it to show an informative tooltip.
Here are the available settings tabs :

  • General : This tab contains the main options of the current form, like its title, its currency, the prices format etc ...
  • Texts : This tab allows you to edit all the frontend texts of the form
  • Email : This tab contains the options relative to the send emails. It allows you to edit the templates of the admin and customer's order send as email and pdf.
  • Last step : Configure the final step of the form and its items form this tab.
  • Payment : This tab allows you to configure Paypal, Stripe and Razorpay payments and subscriptions.
  • Summary : The options placed in this tab allow you to customize the final summary displayed in the last step and sent by email.
  • Discount coupons : This tab allows you to create and manage reductions code for your form.
  • GDPR : If the option "Enable frontend customer account management" is activated in the global settings panel of the plugin, this tab allows you to add a link in the customer's email to allow him to consult and edit his data.
  • Design : This tab contains a lot of options to visually customize your form

Simply move the cursor over an option to see a tooltip giving more information about it.

To create a step, simply click on the "Add a step button".You will see it appears on the step manager preview panel.

To edit a step a step, move your mouse on the step circle, and click on the pencil icon.

If the "Use visual step builder" option is activated in the global settings of the plugin, you access to the step edition panel :

Simply click the "plus" icon in the toolbar to open the components panel, then drag & drop the wanted component in the step to create a new item .

The "Row" component allows you to place rows and configure columns inside, where will be placed the items.
Move the cursor over any item of the step to be able to edit it, duplicate it, stylize it or delete it .

If the visual step edition option is disabled, here is the displayed step panel :

From here, you can edit the step options and manage the items contained in this step. You also can sort your items using drag&drop in the list.

On the step view, click on the "Add a new item" button to create a new element in this step.

Here is the item view :

You can freely edit your element from here, choose its type (picture, checkbox, text field etc...) and its options .
To get more information on a field, simply move your mouse over it to show an informative tooltip that explains what is the goal of this option.

On the form view, if you have more than one step, move your mouse on a step, and click on the "link" icon :

Then click on a second step to create the link.
Now, when the customer will click on the "Next step" button, it will be redirected to the second choosen step.

But you can also link a step to several other steps, and add conditions for each link.
To edit a link a add conditions, click on the link pencil icon :

Here is the link view :

If you add conditions to a link, the linked step will be called only if all defined conditions are filled.
To add a new condition, simply click on the "Add a condition" button.
In the first field, you must select an element. It can be any item from any step, or the current total price .
Choose a condition using the second field. When a condition need a value (ex: price is superior to), you will see a third field to fill the value.

To use the form on a page, simply add the form shortcode on the desired page content .

To see shortcode of a form, click on the information icon, in the "Shortcode" column of the form lists :

You will see the shortcode information popup :

Example :
[estimation_form form_id="1"]

To show it as popup, simply add the option popup="true" in the shortcode.
Example :

[estimation_form form_id="1" popup="true"]

To show the popup, simply add the class "open-estimation-form form-[the-form-id]" to the desired link / button.
Example :
<a href="#" class="open-estimation-form form-1" >Open Form<a>

If you are using WooCommerce, you can assign a product of your catalog to an item, by using the option "Woo product" from the item panel. This option uses autocompletion, you simply need to fill the first letters of the target product title then select it in the displayed list.
From the "Last step" settings tab of the form, you can enable the option "Add selected items to cart" to automatically add the wooproducts assigned to the selected items to the woo cart at end of the form.

Woo products will be added to the cart with their price defined or calculated in the form.
The other data is sent by email to the admin when the form is submited, with the same order reference than the one added as woo product attribute in the cart.
You can fill your cart page url in the "Open a page at end" option of the form to redirect the user to the cart once the form sent.

If you are using Gravity forms, you can assign a gravity form on the last step :

  • Create a new gravity form, and add a "Paragraph text" field with custom css class (in the field advanced tab) "estimation_project".
    This field will be hidden and used to recover the final selection detail.
  • Create a new gravity form, and add a "Number" field with custom css class (in the field advanced tab) "estimation_total".
    This field will be hidden and used to recover the final total price.
  • Continue to create your form, without worrying about styles.
  • Then, go to the form settings, on "Last Step" tab, and select the created form in the "Use Gravityform" field .

To make a payment at end of the form, simply activate the option "Use Paypal payment", "Use Stripe payment" or "Use Razorpay payment" in the "Payment" settings tab of your form.
Then fill the corresponding fields with your paypal email or stripe keys .
By using paypal, at the end of the form, the user will be redirected to the paypal payment page.
By using Stripe or Razorpay, the form will ask form credit card informations in the last step to make the payment.

You can also configure a subscription from this settings tab. Once the option "Use subscription" enabled, you can define if the price of each item is a part of the subscription total cost or of the single total cost.
If the result of the form has both single and reccurring costs, the single cost is paid immediately, and the subscription will start at the next scheduled deadline (the next month by defualt).

Calendars management

You can open the calendars management panel by clicking the calendar panel icon placed in the header bar of the plugin from the forms list panel :

From the calendars panel, you can freely manage your calendars, events, categories and reminders.
Select the wanted calendar from the calendar dropdown then simply click a date to add a new event .

You can manage the categories of events by clicking the label icon in the top menu of the calendars panel :

You can manage the default email reminders that will be applied to the new events by clicking the bell icon in the top menu :

You can also manage the available days of week and hours by the same way :

When you edit a datepicker item, you can assign it a specific calendar and choose to register a new event when an order is placed.
You can also define the event duration and its category.
The unavailable dates and hours will be automatically disabled in the datepicker.

Google Analytics

If you fill the option "Google Analytics ID" of a form, you can recover the different visited steps of your form in your Analytics dashboard thanks to anchors in the url :

  • https://www.yourwebsite.com/the-form-page/#step-1-title
  • https://www.yourwebsite.com/the-form-page/#step-2-title
  • ...
  • https://www.yourwebsite.com/the-form-page/#final-step
Send values to Zapier

To send the values & prices of the items of the form to Zapier, you need to create a new Webhook Zap from the Zapier dashboard .
It will give you the Webhook url, and will ask you to send a test call . Simply fill this url in the "Zapier Webhook" option of the form, in the "Last step" settings tab.
Then activate the option "Send as variable" on some items and complete the form, Zapier should receive it and list all the received variables .

Automatic Updates

To apply an automatic update, click on the Dashboard > Updates menu link in the WP menu, then select the plugin in the list and click the "Update plugins" button to apply the update.

Manually apply an update

To manually apply an update, simply replace the files of the plugin using ftp.
The path is :
/wp-content/plugins/WP_Estimation_Form .

Simply click the button "Global Settings" from the plugin toolbar to open the global settings window :

General Settings

  • Enable frontend customer account management :
    This option allows you to define an existing page of the website as customer account management page.
    This page will show a login page, from where your customers can ask for a password (sent by email) to access to their data and orders.
    Once logged, they can modify their information from the account page, view and download their orders .
  • Encrypt data in the database :
    When this option is activated, all the orders and customers data are automatically encrypted in the database .
  • Admin email :
    This email address will be used in the emails sent to the customers.
  • Sender name :
    This name will be used as sender name in the emails sent to the customers.
  • Use SMTP to send emails :
    Enabling this option allows you to configure a custom email smtp account. All the emails sent by the plugin will be sent from the configured account .
Customer account texts

All the texts used on the frontend customer management page are editable from this panel .

Main colors

This panel allows you to define the colors used in the frontend customer management page .

3. Custom calculations

How to use custom and distance calculations

To use a custom calculation instead of a static price of an item, edit this item and activate the option "Use custom calculation".
You will see the custom calculation panel :

The calculation code uses Javascript, you can use any javascript function inside. The result of the calculation filled in the field will define the price of the current item.
If the item uses quantities, this result price will be multiplied by the selected quantity.

Above the calculation field, you can see 3 buttons :

  • Add a value : this button allows you to easily recover the value of any item in your form. Simply click the button, select the desired item and the wanted attribute (price, quantity ...) and press the "Insert" button. You will see the generated code directly in the calculation field.
  • Add a condition : clicking this button, you can visually define conditions (as on a link) using the items of your form. The generated code of the condition will be added in the calculation field at end. The calculation you will add between the two "{" and "}" of the created condition will be used in calculation only if the condition is filled.
  • Add a distance : this button will be enabled only if you filled the "Google Maps browser key" (in the "General" tab of the form) is filled. Clicking this button, you can add a distance depending on different textfields of your form (addresses, cities, countries ...) to your custom calculation. More information at point 3.2 .

The 4 usual calculation operators are + (add up), - (subtract), * (multiply) and / (divide) .

Example of calculation :


Click here to watch a video tutorial showing how to use custom calculations

To use distance calculations in your form, you first need to fill the "Google Maps browser key" with a valid key. To get a browser javascript API key for Google Maps, please follow this link : https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en

Here are the services to activate from the Google API console :

  • Distance Matrix API
  • Maps JavaScript API
  • Places API
  • Geocoding API

As explained in the previous paragraph, you can use distance calculations in your custom calculations. You can also use it as quantity, enabling the "Use distance as quantity ?" option on an item.
In this second case, the calculated distance will be automatically defined as quantity on this item (this automatic quantity can't be modified by the customer).

Here is the distance calculation panel you can see clicking the "Add a distance" button in a custom calculation, or the "Configure distance" button of the "Use distance as quantity ?" option :

Simply select the corresponding fields (textfields and selects) of your form on each dropdown for departure and arrival addresses. If a field doesn't exist in your form, you can simply leave the dropdown value to "Nothing".
Then choose if the result must be generated in km or miles and click the "Insert" button to finish.

The distances are calculated by Google Maps for a normal vehicle, taking into account the real path taken.
If the distance can't be calculated by Google Maps, an error message will be displayed (you can edit it from the "Texts" tab) and the next step button will be hidden, so that the user can't continue the form without correcting the filled fields.

You can freely create global variables by clicking the "Variables" button above the Steps Manager. The variables can be used from any price or quantity calculation. They also can be displayed in Rich text items or in the email content .

Then you simply need to use the option "Modify a variable" from the item panel of any elemnt of the form to dynamically change the value of the selected variable when this item is selected in the form :