How to Create a Wordpress Cost Calculator for Free?

hey guys what you see here is a nice coast calculator which you can build for free and use it as you like what does it do based on what the visitor selects you see the cost here it even uses conditional logic for example right now here are the numbers of pages and number of posts but if i choose e-commerce there is also a number of products here based on what i select you see the price change and if i go to the last one even here everything changes and here is a approximate price i'm gonna fill the fields and send the message to the site owner if you're interested then take a look how did i create it and you'll see it's quite easy to do now let's go to the back end go to plugins add new and search for forminator install and activate it and then you'll see the menu on the left click on forms and now create choose blank form continue give it a name estimate calculator create and now let's add some fields click on insert fields you can choose couple of fields all together or you can choose them later right now i know that i'm going to use the radio button calculations button page break checkbox name email phone and text area click on insert fields name email phone and text they are going to be the last ones here now i'm going to start with a radius selection here in order to edit this field press on this icon here and click on edit field give it a name for example website type here are the options static html cms for example wordpress or joomla [Music] another option maybe ecommerce site and you can add as much options as you want now go to the settings if you want option slate layout to be horizontal then you can choose it here also you can choose whether it's optional or required i'm going to set it to required now i'm going to set up the calculations calculations enable and for static html 100 200 for cms and 300 work e-commerce styling and visibility those i'm not going to touch you now i'm going to press apply next one since i'm the lazy one here i'm going to duplicate this field and now i gonna i'm gonna drop it here in one row now i have two fields next field is going to be the design complexity two options pre-made template and custom design i'm going to delete the last one here calculations pre-made template 150 custom design 400 and apply first one done now since i'm gonna make a page break here i'm gonna drop it here and i'm gonna duplicate this one next thing on my calculator was the number of pages or number of posts or number of products therefore i'm going to duplicate this one here and drag it here i'm going to set up the options again none 1 to 20. oh one more thing number of pages 21 to 40 4260 and last one more than 60. once again calculations none means zero 20 euros for that 40 euros or this one here 60 euros for this option and 100 euros for more than 60 pages and apply and once again i'm going to duplicate and drag it here i'm going to rename it number of posts since the calculation will be the same i'm not going to change anything here once more apply and once more duplicate and drag it here this is going to be number of products the pricing will be the same but the visibility i'm going to set the rule that this field is going to be shown only if the website type is e-commerce that means that if somebody chooses website type ecommerce only then this field will be shown so apply if i want to preview it i'm going to click here and this is what we'll see right now next this wheel is required next there it is and previous now we have to set the page break here next one there will be extra modules for this i'm going to use the checkbox option edit field give it a title for example extra modules and set up the options custom logo design image slider contact form events calendar image gallery and last one booking system go to settings set it to required layout will be vertical for me and once again enable calculations logo design 400 image slider 50 contact form 40 events calendar 150 image calorie 50 poking system 500 and apply these are the extra modules for regular site now i'm going to set up the module for e-commerce i'm going to duplicate it and drag it here let's edit it i'm going to give it the title ecommerce extra modules and once again some options here paypal payments credit card payments maybe someone wants the custom shipping calculator or role-based pricing maybe even the dynamic pricing or points and rewards calculations paypal payments 50 euros credit card payments 80 euros shipping calculator 120 role-based pricing 200 dynamic pricing 250 points and rewards 400 and once again under the with ability we're going to add the rule that this block will be shown only if website type is chosen e-commerce and apply now we're going to set up the name and the email phone and text area if you want you can rename it i'm gonna set it to required apply email address also required phone number will be optional and text i'm gonna delete the label and inside the place order i'm going to add enter your message and apply last we need to set up the calculations therefore let's open it up label it total go to settings and prefix i'm going to set approximate price this one is going to be shown in front of the price and as a suffix i'm going to enter the euro sign decimal places will be now let's up the calculations i want to calculate website type plus design complexity plus number of pages plus number of posts plus number of products plus extra modules and e-commerce extra modules formula preview is here if you know a bit mathematics then you can set up every kind of formulas here i set it up i'm going to apply and i want this to be here and the page break is here now i'm gonna go up to the pagination and i'm gonna set this one also up here i'm gonna rename the page one as a website type and design page two i'm gonna rename content and last one i'm gonna rename extra modules under the settings you can choose either it is shown as steps or as a progress bar i like steps more therefore i'm going to leave it as it is if you want to change the buttons text then under the custom you can do also that one here so i'm gonna apply that and okay it seems that this page break is the wrong place therefore i'm gonna drag it here now let's publish it let's grab the code now i'm going to create a page for it for example estimate calculator let's add the shortcode block or if you don't fancy that one here then remove it and add the form block this one here choose a calculator publish it now let's see what happened it's here but doesn't look very good therefore i'm gonna edit the page and i'm gonna get rid of the sidebar i'm using here the cadence team it's really great you can find the link to the theme in the description of this video so i'm gonna get rid of the sidebar here and set the vertical padding to enable also i want to show the page title update and preview well looks already better but if i compare it to the cost calculator i made before then that one looks a bit better therefore we have to tweak it a bit go to the appearance here under that you can change the appearance of your form i'm using the material version update refresh and already a bit better next scroll down and enable custom css the code i'm going to show you you can find it also in the description of this video but if i paste it here and update it and refresh the page well much better now let's see how does it work let's choose cms custom design next let's try to go next nope field is required go back choose the e-commerce this one also now appeared next well the total is the wrong place we have to move it below here and also i would like to show the total under every page here it's easy to fix therefore go to fields total goes to under extra modules now let's duplicate it twice and move first one here and the second one here update let's refresh again well there you go here is our approximate price seems to be working great last thing we have to do is go to the behavior that means what happens after someone is pressing on the send button here is a message you can change that one also take a look at the other options here you can change the text which appears after the custom repressed on the submit button you can enable the autofill i suggest you to enable honeypot protection it protects you from the spam a bit so load form using ajax and prevent page casting caching from pages update and now go to email notifications and set up who gets the notification for example message from your website and pressing the plus button you can choose whatever field you want to know for example name of the sender under the recipients you will add the email who gets the message you can also set the multiple emails just separate them with comma under the conditions you can set up that send this email only if website type is e-commerce then email will be sent to this email here but if website type is cms send this email to this email and now you can set up the message you can choose by the field types here for example website type this one but it's gonna be a bit easier if you paste this all fields merge stack here that one shows all the fields which have been chosen by your customer and now just that so as you saw it wasn't too difficult to create such a estimate or cost calculator based on this you can basically create every kind of forms you can use conditionals you can use calculations basically you can do whatever you want to do with it now if you find this tutorial helpful then press thumbs up subscribe to this channel and you will be the first to be notified about the new tutorials meanwhile take care

Channel: WP Simple Hacks - Wordpress tips and tricks

Views: 15,341

Keywords: wordpress cost calculator, wordpress price calculator, wordpress estimate calculator, cost calculator wordpress plugin, cost calculation, cost calculator builder, cost calculator wordpress, cost calculator wordpress tutorial, cost calculator wordpress plugin free, cost calculator - project estimation wordpress plugin, wordpress cost calculator plugin, free cost calculator wordpress, wordpress price calculator plugin, how to create a price calculator for wordpress

Id: KsJK3-GzwLI

Length: 17min 38sec (1058 seconds)

Published: Fri Oct 16 2020