This awesome plugin allows you to create easily flat visual forms of cost estimation and payment.
Author: | Loopus |
Item website : | http://codecanyon.net/user/loopus#contact |
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.
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 :
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 .
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.
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 :
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).
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.
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 :
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 .
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.
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 :
All the texts used on the frontend customer management page are editable from this panel .
This panel allows you to define the colors used in the frontend customer management page .
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 :
The 4 usual calculation operators are + (add up), - (subtract), * (multiply) and / (divide) .
Example of calculation :
([item-1_quantity]*10)/2
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 :
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.
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 :