Form Elements Explained 2020 | Stylish Cost Calculator for WordPress

hello everybody and welcome to stylish cos calculator in this video we will just show off all the different elements that you can add to your cost calculator so this will be called elements tutorial video i'm just going to create a new calculator for this example we're not going to load a template because we're just going to show off the different elements from scratch so you start off with a um basically a section down here and then in the section you got to start adding elements so the first would be a drop down and this would be a group of products or services that you can kind of add here you can say product one you give it a price click down here product two give it a price as well and let's see what that looks like so it's pretty simple you name what the products are and you give the options and then the person selects one or two and that price will down will vary down there i like to actually add the price here in the name so the person knows how much it's going to cost them when they're clicking on it i think that's that's gives a better user experience okay so let's go into the next element um which would be check boxes and again this is kind of like a group of services so you can say product one and product two or service one service to whatever it is that you use oh again i should have added the the price i think it's good so you can see that the price is here i think it's also good to maybe add the price in these products as well so as they click on them they know how much it's going to cost them although in the check boxes if you go to additional options you can turn on the price hint feature that's really cool so every time that they click on it the price hint goes up so i'll show you that when we save it again the next one will be toggle switches and within the toggle switch you got the single choice radio button which forces them to either pick a product or service so it's either they pick product one or they pick product two they can't pick more than one or the other so i'm going to put the word only here because they're only able to choose one of those two options and you'll kind of see what it looks like so here again this one here you're allowed to select multiple and that's that price hitch feature i was telling you about just kind of gives you a little bit of a hint to how much that's costing you and here you can only pick one or the other it's super simple to a and b between different styles hence why we called it stylish cost calculator so if you wanted to switch for example this guy here from an animated to let's say a checkbox circle animated you can go ahead and refresh and see what that looks like the first one was that little checkbox that kind of animates as you're clicking it and this one's more of a is a circular uh animation looks kind of like a radio button but doesn't behave like a radio button because you're able to select more than one so it really depends what you're looking for i like to just add the price here again just gives a better user experience i think and also too you can click the detail list button here and get a breakdown for how much things are costing so for product two let's make that two hundred dollars here yeah two hundred dollars and here should be uh 200 as well so that can show you that difference so we have the drop down menus we have the different checkbox toggles or buttons we also have another kind of toggle switch button called simple simple buttons and let's say we do service 1 or service 2 100 200 whatever it is i'll show you what this is the simple buttons stacked beside them beside each other so that's good if you want to stack multiple options and they can just select as many as they want that's good for a la carte services i notice so for example if you're a web designer and you want to you want to add on add-ons or if you're a wedding photographer or whatever it is and you have add-ons to your main services these are good to to use that by the time you're watching this video we might even have more features because we're actually in the middle of developing a few more actually the sliders is um a little in terms of how the math works uh there's two different ways you can use a slider but we're going to create another video on that but let's say for example you want number of days you know they're gonna rent your apartment for a number of days or they're gonna whatever it is or if you're a website a web developer you can say the number of web pages that you want built pick the maximum of whatever it is that you want and choose a price per item that you want also we do have the bulk pricing and what bulk pricing is is to say well 0 to 10 costs you 10 per unit but if you're gonna go from 11 to 20 well we're gonna bring it down to nine dollars per unit we're giving you that dollar per unit off because you're doing bulk pricing we do have a new feature coming out as well that's called sliding scale which is going to be a little bit different than that and we'll have another video on that as well so i can show you how the slider works down here you get the number of days because this slider is added to this subsection any of these elements here is gonna get multiplied by the slider so if this is a hundred dollars it becomes a hundred dollars per item that that is because these are linked if you don't want to link them you just have to remove the slider and click on new subsection so that new sub section still keeps it in the same section so it's still going to be within these lines down here okay it just separates the math of the slider see now you just grab that new slider and say number of days one two hundred is a dollar each and let's go ahead and refresh that and now for this slider here it's only 49. if you click on this it's only it's adding the 200 plus the fit the 41 so it's not multiplying it whereas here is going to multiply that number so that's the two different ways of using a slider and as you can see here because it's in the same subsection it's there they're they're beside each other but if you were to create a new section down here not subsection and add a slider then you're going to get a new title a new title and a new description which is going to be added above here and right there so that's kind of the basics to that um if we add another element uh we got the comment box this is good to get user input so you can say what is your name and you can add another comment box and say what is your address or something like that now we do collect information on the email quote but it doesn't get put into the invoice so if you need that information you'll have to re you'll have to ask it almost from them twice but that way you'll get their email here and then you also get their information here as well this also allows the user to email themselves the quote to a separate email than what it is than the email and name that they want their form because maybe they're buying a product or service for someone else or maybe it's for the office and they want it to go their personal email or vice versa another element besides the comment box is the quantity box the quantity input box or also known as the number input box is very similar to the slider but it behaves a little bit differently it just multiplies any input by the price so if you're charging 50 bucks for a number so let's say for every day that someone rents your car you want um to charge them 50 per day you can say number of days let's go ahead and refresh that and now you've got the number of days you do 100 and now you got let's turn those off 100 now you got let's see here so we have our number of days input box and for every quantity 5 times 50. let's remove that and it's just going to keep adding that there we go so 10 10 times 50 500 go the detail list number of days 10 50 500.

Channel: Stylish Cost Calculator

Views: 1,977

Keywords: wordpress, price calculator

Id: raCTfxff7HA

Length: 9min 44sec (584 seconds)

Published: Wed Dec 16 2020