WP Cost Estimation & Payment Forms Builder

hey what's going on guys my name is George and this is sass master today we're gonna check out WPS tomato and payment for builder it's one of my new favorite plugins that I really want to recommend to you if you guys want to Brad the deal that's going on check out the link in the description now what this does it lets you create estimated forms that look super nice let me give you a quick example of one of the ones I created for my website development this is a Spanish but don't worry I'm going to show you how to build one in a bit from scratch now for example what I do with my clients is I send them this link and they can estimate the cost of the website they want so for example they can choose it they look really nice and you do a whole lot with them so they can select what they want and as they select you can see the price gauge move up or down so this way it's a clear message of what you're gonna be able to get when you estimate the website in this case something that I recommend also is like physically when you visit a client you can do this physically with them just open this page and do it along with them so they actually know what they are getting and if they add something it asks a cost to it so they can actually visually see that so it's a really cool plugin that you can use and I really recommend it now it's it's not just about estimator you could do a whole bunch of things with it forms bookings you can make for example if you're selling health products this could be a health estimator so this could be like for example instead of these pictures it could be like the body right so it could be like a body of a skinny person of an overweight person and based on the end results you can like provide them hey you should buy this product right or you need this or that so it gives you the results so it's pretty cool that you could do that with this form now to head over to the fun part how to build your estimator forms so the first thing you would have to do is head on over to plugins add new and install your brand new plugin once you install it you would get a brand new menu right here which is the EMP 4 builder now the cool part about this is that when you start it comes with pre-built templates so if you saw something that you liked on the live preview well you can use it right here and you get beauties right here if there's something that you like and there's so many things that you could do with it like the form I showed you already or something like this let me show you a preview of this maybe you like it and you want to customize it a bit more so for example we got a menu right here for the dates we got simple beds double beds TV balcony you get a summary on the bottom or you can have different type of things so there's a lot of things you can do now let me show you how to build the form from scratch so let's add a brand new form right here and I'm going to show you how the menus work what you can do so at the end when you see this video you would be making your own forms in a breeze so the first thing I'm gonna show you before we actually view the let me just add a step right here what you're gonna see before we actually see the the Builder right here the visual builder is the general options in the bottom so I would suggest that you start up from here so for example it's a title order of reference prefix so for example the forms if you put 100 the next one will be 101 and then jump 102 103 or ABC 100 and it'll jump to the next one so on and so forth you can get at your Google Analytics ID Google Maps browser key if that's something you need in your browser if you're using the distance calculation so it's route direct progress bar it's gonna be a price a step number all steps or no progress bar you can remove it if you like the type of currency signal is it gonna be euros pounds dollars you can set the currency right here currency position left and a little bit of more advanced options like Ajax and some custom js4 the form initial price so for example if you want to start off with an initial price you can do that there or an initial price when they select the product the price starts up from there so that's possible maximum progress bar price so let's just say the maximum price of a product that you are doing in your form is about I don't know five thousand dollars so you would say five thousand as a maximum price right so let's just set that do you want to hide the initial price in the progress bar if you want to do that so it only at the end you see the price maybe you want people to go through all the steps and then get the price or maybe you just want to see as they go along how the price reflects on each movement hi tooltip on touch devices automatic next step so when they click something and if there no other option it'll just go to the next step date picker language you can select the language right here all these languages are available you have the useful hours time form or if you remove it it's a 24 hours time form decimal separator separators and just general things next let's head over to text this is I think a really awesome feature because all of this can be translated so if you want to create a Spanish I don't know a German language or whatever you just replace these it tells you what it is so for example this is the invoice instead of invoice if you want to say quote or something in Spanish or English I mean just whatever language you want it's possible right here just replace these enable introduction yes or no so for example when you start off a new form it starts off with a button and it says you know get started if it's removed it'll just jump to the to the start of the simulator for the quote next thing we have is the email settings so you can set your email settings that when they're sent they send these right here and you can add all these right here and you can also add your mailing list they got MailChimp mailpoet get response and contact as soon as the fema field is done last step okay so when the form is finished from all the flow that you build up here so you got all the flow that we're gonna see in a bit this is the last step so for example open at the end page if you want get values as get variables conditions on redirect if you want to redirect delay before the redirection use signature if you want to put a sign hide final price use reCAPTCHA s-- and email automatically download order as a PDF that's really important one legal notice that's the important one also and you have this app here send values so with zapier you can actually send this form to anywhere that you want connecting it and the fields that you're gonna use at the end so for example by default you have enter your email and in message maybe you want to know their name their last name in my case where i built a website estimator i asked also what would you like your domain to be there's just a little things that you might want to know when you are bored a client so you can add these right here and edited if you want them let's uh number two payment you can also use payment gateways right here so you got PayPal stripe and Racer pain summary you can set what you want to activate or deactivate here on the summary if you want to create discount coupon codes so for example we can add a coupon right here GD of Gd P R if you want to add your own compliance and design by default the design are these colors and you're going to have this option and a visual designer that we're also going to see now let's get over to the fun part how to build your form on the visual way so I added this step let's add another step right here and let's drag it over here on the top and what we're gonna do first off is we're gonna select this as it flag the flag is like I'm the flag I'm the one that's gonna start so this is gonna be my first step so I'm gonna flag it so everything's gonna be based off from here now let's edit this step so I'm gonna click that little pencil button and there's gonna be start you can add the maximum items per row description if you want to add a description this is the starter form okay show it depending on the condition so only if a condition is met it can show what is a condition condition is basically if this happens do this so if someone selects this do that that's how it would work selection required do you want to have a selection required yes in this case the first step obviously we want them since they like something show an email summary so that means it's gonna show at the end and add the email hide the next step button if that's something you want to do and let's add an item right here so in this case we're gonna say website so let's add a website and this is in the step category I can add it somewhere else if I want just by moving it here what is this going to be it's gonna be an image type or do you wanna apply in a check field all of these for this case and purpose is gonna be an image type we can add a small description this is for websites and you can add notes group name if you add these two they can select one or the other let's select an image right here let me see if I have something already pre-loaded so we don't take longer just anything for this case of purpose no let's actually load something from the computer so let's drag something in let's drag this right here hold on so let's wait for these to upload and once it's uploaded we're gonna select one of them to activate it so give me a second alright now that we have to lower it we're gonna show one of them in this case and we're gonna insert into form okay so now that we loaded that one is just for this testing purposes if we can tint the image what that means it's gonna set a color to it so if it's selected it's gonna turn into pink blue green so that's a pretty nice option if you want to use that shadow effect open Earl on a click so if you want to set an earl for that Kali method there's so many things a price for this one so a base price whatever you want to set it for whatever your product is gonna be just set it right here for example the base price for this one is I don't know $200 it's gonna be price calculation a price calculation let's use set values for this with more advanced values you can add a value a condition to that value a distance if that's gonna be something they're going to do or add a difference operator there's gonna be a plus so it's gonna add if they add more in this case it's just one product for that don't add price at all total if you want is selected is hidden what this means is selected it means it's already selected by default so once you start off that's the first thing that's selected so let's not use that is it hidden you can hide it if you want to use it for other purposes at the end you can like let's just say that's something that has to be added and you don't want to show it in the forum you can hide it is required so they have to add two like selected show an email summary so that means at the end and high price summary high quantity in summary hide summary is zero price or enable quantities choice so that means they can select the quantity choice if they the offence if this is something that they can select more so for example I need five websites then or up to they can select up to one 100 you can set that also I'm gonna disable that and modify variable if you want so let's save this one right here all right now it's showing let's add another value this is gonna be a sells website and the social website it's gonna start off from five hundred dollars ever is in it add the image and we're gonna head through because all the rest are just variables that you would have to customize for your case and purpose in this case we're gonna select something from the media library okay and it's just insert into post save it and now we have two sections now let's close this let's connect this right here so let's use this little link connect it to that already and let's kind of preview and see how it's going basically we just created the first step only so let's see how that is viewing and then we can continue all right so this is the first thing remember we created this one the website and we added the description now you can see it's kind of grayed out and you can't view it we can edit that in the general colors or we can edit that in the visual settings so let's just say select this one remember we set it to $200 well that's one set and this one is oops $500 now I can set the variable to select one or the other so that's possible there if we group it so they can only select one and they are forced to select one of them okay let's move forward and let's head over to the next step so let's actually create two steps right here once you see this you're gonna see that the power of it and how easy it is to build okay now we have two steps let's link it again user link and connect now we have these little pencils here what those means well we could set the condition for it so let's hit this little pencil and what you see right here visually is that my step jumps to this step so let's add a condition so if a condition is met so I'm gonna select if website is selected right here you could use select and unselected if the price is appeared to this so for example if it's a high-end product you could send them to another section of the step in this case we didn't do something simple if that's if this is selected it's gonna jump to there all right so let's save that and we're going to do the same with this step but with this step we're gonna set a different section so instead of selecting website is gonna be sales websites so if they select the sales website it's gonna go to a different flow so let's save that flow right here and now we set our first conditions so it's super easy now we can continue with our form builder all right and now we have the conditions man so let's click on the pencil to create steps in here so let's create in this form and you can call this something else like website add-ons okay and like you said you can call it whatever you want description if we want to add that so let's save and let's add a new item in this case we're just gonna call it test oops test and it's gonna be a button in this case and you can the settings change as you can see so let's just try to save these let's create a couple of them with different settings just you can see how they're gonna view and you're gonna use to your liking let's add another one and then this one is gonna be a color picker at check box and this is test two let's save that and just add one more for five test three and let's select let's see it could be a text field a numeric field rich you see something interesting a a date picker would be okay so let's save that and now we have three of them now bear in mind these aren't just for testing purposes we didn't even add a numeric count to it so it's not gonna if we select it it's not gonna add any money to it so this let me add one over here in the bottom steps and this is four so side save that I just want to show you that the Builder goes to different sections and let's add a brand new section this one is just gonna be a check box and this is test five it's gonna be a switch box or a check box I have a switch box it looks much nicer and this one we will add 100 so let's save that all right so let's click X now we have a variable so let's view this form and then like preview okay so for example if I select website and I hit next step it should go to my website add-ons now we've added three different ones so there's a test one there's a check field right here and we have a calendar selected okay and let's look at this let's set that and go to the next step and it goes to our final cost right here now you don't see the estimator form because we didn't activate it but if we activate it you can do that so that's the end price you can enter your email and message like I said you can add more fields if you want now let's refresh this test one remember we had two website add-ons what happens if now we go to sales website so let's go to next step and now we head to the sale sites so we went to a different section now did you see how this visual flow builder went to a different section well you can add more of these and just go step-by-step it could be like add-ons it could be other things like choose your hosting and we could just start linking one to the other one to the other and for example let's just say it separates here but at the end we join to that that one because at the end of day it's gonna be like the same same settings after that so that is possible and you can do a whole bunch of things with it so it's a really powerful estimator form builder now for the visual part of the plugin so like I said before you can head on over to design and we can change the colors remember we saw some of the gray that's kind of not visible with grey with grey so you could change this right here secondary color selector switch box and you can just edit this as you'd like you also have a custom CSS if you want to customize this even more now we can head over to the form designer let's click there so we actually can edit in a visual way so in this case if we want to independently select colors for different sections that is possible here so for example the first thing that we're going to do in this visual designer is this so we can click select an element and we can select independent these from the others so let's just say we had two titles we can put one title and like green and the other one in red if we want independent but we're just gonna select this right here and we don't want to move the color for the title in every single step we just want to do it here so that is possible by heading over to the style of this step so you can set the background the borders of margins shadows whatever you want to edit right here let's just change this color to pink for example it just said okay you can set the size positions padding's all you can do with the visual filter right here and like I said this can be independent step by step so if I want to edit something here I would just apply the setting that I did right here select another element so now it could be a this element and we can change the style for this element independently so it's a pretty cool thing that we have this visual editor also in the plugin there you go guys it's super easy to build and if you guys want to grab the deals going on check out the link in the description thank you for watching my name is George and this is sass master I'll see you guys later

Channel: SaaS Master

Views: 15,041

Keywords: wp cost estimation & payment forms builder, payment forms, plugin wordpress, estimator plugin, cost plugin, estimator form, wp cost estimation & payment forms builder tutorial, cost estimation form, plugin wordpress tutorial, plugin wordpress 2020, codecanyon, codecanyon wordpress, Payment Forms Builder, zapier, webhooks, mailpoet, getresponse

Id: n4107OrGgFo

Length: 19min 56sec (1196 seconds)

Published: Thu Jun 25 2020