DIVI USE CASE: How to Add a Cost Estimation Form to your Site Using the Web Agency Layout

hey Debbie nation welcome to a brand-new Debbie use-case live stream every week we do a live stream to brought to provide some extra value in and around our Debbie design initiative and for those of you don't know the first wave of our new initiative is to give away a new divvy layout pack each Monday if you've been receiving those they've been wonderful they look great and this is part of our larger mission to make you the divi nation the most empowered community on the web so these layouts are created by our super talented the design team they published on the blog each Monday and every Tuesday someone from the elegant themed staff does a use case related to the layout in this case we're going to be using the web agency layout packing and today I'm going to show you how to add a cost estimation form to your newly web agency layout pack and I'm going to be using the plug-in called WP cost estimation and payment form and this is a plug-in from ThemeForest and it's a it isn't a free plugin but it's a pretty affordable and it it's packed with a whole bunch of features that I think you're going to love so you can download this layout pack the web agency layout pack for free right now from our website and I've also placed a link to the plug-in as well so let's go ahead and get started so let me just kind of bring you up to speed on kind of what or where I am or where you should be when going through this live stream with me there are some things that I've already done and I just kind of walk through those with you and again I am going to be showing you how to build a cost estimation form and you can see it actually the finished product right here at the bottom this is actually at the bottom of my services page this is the services layout for the web agency layout pack and right down here I just simply embedded this new estimation or cost estimation form which I build built using the plug-in and then if you click on this button here to get started you can see the form in action which looks awesome and it's I mean it's a really powerful plugin and I'm excited to kind of show you how to embed one of these on your new layout all right so we're about to jump in and get started but please before I forget please feel free to reach out in the comments and post any questions that you have don't forget to check out the video description for those links and give us a shout out tell us where you're from and don't be shy and we have some people on standby to answer any questions if I don't get to them and I'll try to do my best to do that all right so I see it's checking out the comments here just for a moment all right people are joining in that's awesome I'm gonna I'm gonna keep rolling here and so like I said I'm just going to bring you up to speed on what I've already done so far I've actually already imported my layout back to my Divi thing so I have a copy of my Divi theme installed and ready on a fresh install I have the I went to my Divi library here and I went ahead and uploaded all of my layouts to do that you simply use that web agency all that JSON file that comes in the layout pack and that's going to upload all of those at once to your library and then after that's done see if you can see it there Oh too much you're going to go ahead and add a new page for each of your layouts which I've already done and so after that after you have all of your pages added it's go ahead and check out all the pages that I've added and then I assign the alright I added the layout to each one of those pages and then I went ahead and built my menu to do that you just go to the parents menus and then I just went over here to my pages and I selected them and I just added them to my menu and then I selected primary menu so that we display as my primary menu and I click Save and so now that's kind of like the initial steps and setting up a layout pack for your new website and there's actually some other key steps and I've actually put a link in the description to a blog post article that walks you through you know some ten key steps when setting up your new layouts so please feel free to check that out when you have time all right so I've created my menu after that you're going to want to go ahead and grab the plug-in then we're going to be using and it's actually I got a link to it in the description and it's called WP cost estimation and payment forms builder and the that's a pretty long name but it it really does what it says in the name it gives a great form that is able to calculate the cost as a user clicks through features to the form that they want whether it be to buy a new website or whatever the case may be and it not only does that very well it also gives you the option of processing those payments right then and there which is pretty cool and I mean I've been using this form a lot for this use case but I really feel like I haven't even scratched the surface because it has so many options available for you the I mean I'm just looking here I mean it's good it's got over 8,000 sales so I think they're doing something right with five-star ratings so it's a good plugin and I definitely would recommend it and we're gonna use it right now so once you grab the copy of your it's $28 right now so once you buy it and you get the download it's going to come in a pack here and let's see if I can show it to you so here's the actual folder contents and let me zoom in here see if you can see it better not able to zoom right now but if you can see here this is a once you open the pack you can see this WP estimation formed that zip and that's what you're going to use to upload in your backend of your WordPress library when you add the plug-in so you would go to your backend of your website go to your dashboard WordPress dashboard go to plugins go to add new and then you're going to go up here to this upload plug-in button here you're going to go ahead and choose file and then that's when you choose your file you're going to be grabbing that that zip file that I just showed you here and that's it file once uploaded is is going to install your plugin obviously and there's some other contents in here that I'm gonna need one of them is going to be this example data it's actually called example data can be imported that zip and this is what you're going to be using whenever you import the example data to give you some example forms to use and I'll show you that in a little bit so but after you install your plug-in you're gonna see in the sidebar here you can see the NPD form builder is now available these are this is your plug-in options so if you go and click here to your NP form builder you can see that I already have my example forms imported already but but to do that you're going to want to I do suggest this as a first step because I don't know how you feel about you know importing dummy data or example data but I mean sometimes it's kind of a you know a setback from you actually going through the process of learning the software or the plug-in options from scratch but a lot of times it's really easy just to have a working example that you can reference and make sure whatever you're doing you're doing it correctly so I really like the example the the option to import the example forms they were a real big help and I'm actually going to use one of these forms to walk you through the settings here today so when when you first get it you may be asked to enter your your I think there's an ID that a proof of purchase code or something that they're going to want you to input in to verify that you have purchased it and you have an install verification code I think is what it's called and then once that happens you can kind of move around freely throughout these options a lot better but to import the forms you're going to click this yellow button up here at the top and then here's where you would go ahead and choose the zip file that I showed you before and I do realize that I still have my Finder window open I apologize it's kind of a nuisance alright but that that actually is that window is where you would find your dummy data zip file or example that a zip file and once you do that it's going to import those forms in for you alright and there's going to be four included first ones is called the my estimation form and the subscription demo a distance calculation which is pretty cool and then the layered image and single step so just to kind of give you a idea of what these look like we're going to be using the Maya nation form as an example and but there's also a subscription demo this means like if you were offering them just show you a preview if you were offering a hosting or something that was a subscription you can here's a example of like server features and once you click through you can see it's adding a a month a monthly total here at the top there's an example of a subscription form the distance calculator this this one would be you know you get an example would be you give two addresses a beginning point an end point and then it calculates the distance between those two and then and you you can assign a price value to that distance all right I won't go through all of these but what you're going to want to do is find this my estimation form and you're going to duplicate it and to duplicate it you're going to click this duplicate this form button here once you do that you're going to see it down here it's the same name with a 1 by it and that's going to give us a good head start on creating our own estimation form alright so next thing you want to want to do actually before I jump in here let me just go ahead and welcome you if you're just joining us and this is our weekly dippy use-case livestream and each week we're going to we've been taking one of our free Divi layout packs and we show you practical ways that you can use this for your own website and this week I'm going to be showing you or today I'm showing you how to add a cost estimation form to the web agency layout pack that was just released on Monday so if you need to download that layout pack there's a link for that in the description there's also a link to the plug-in I'm using which is called the WP cost estimation and payment forms builder plug-in and you can find a link to that as well and of course as always if you don't have Divi go ahead and there's a link to the product page as well so check out that description if you're just joining us to get what you need to go through this with us today alright so back to our estimation form we've just duplicated one and now I'm going to go through the to edit and see these options all right let's check out some of these comments the yes the plugin is $28 it's not a free one but I promise you it's worth the $28 considering how many options are available to you it is yeah just make sure and check the link in the description some of you are asking where where you can find it all right very cool and okay let's continue on here are our options so this would be the steps manager here at the top you see this is a kind of like a a model of your form here so you can see how all of the steps are connected and how they're linked together so you can see kind of the progression and I don't know if you can see it here but there's kind of a cool little feature where there's a you can see a green it looks like a green color traveling through this line in a certain direction kind of reminding you which way this this is the flow of this form so as you can see right out the back this is a pretty powerful plugin that gives you the ability to kind of work with this model here so let's go through some of the settings these are each bubble here represents a step in your form that's why this is called the steps manager and so this green one here is actually the first step in the form so it's been given a title called mobile or web site and the depending on your selection of this step it will take you to one or the other funnels if you will of other steps so this is a if you're familiar with our own contact form you know about conditional logic and other form builders have similar things or you can set conditional logic statements to you know bring a user from one step to another based on whatever their selection is and form this is that shown visually to you here and so this hovering over a step brings up this menu here much like you would find in a Divi module where I can choose to delete the step I can choose to duplicate it I can choose to me see if I can zoom in maybe just a little can't here but the Edit this step icon here which is what we're going to use and you can also click this link which would then be used to link this step to another step in the process this little flag icon allows you to choose which of these steps is going to be your first step so this one has been selected as my first step I hope that makes sense to everyone but that's kind of the general overview of what you're looking at in the steps manager but below that you'll find a are some tabs where you can go through all of the form settings these are general settings here in this general tab you can set a title for your form here you can also you can put whatever you want for the title obviously and and there's a over here I want to show you that you can set a max price for your form so by default if I were to you know go to preview this form lets you can do that by clicking this view form up here button when I do that see you'll see that when I hover over the button there's this kind of like what do they call it I think it's called a it's in it's in the design it's kind of like a a glare effect over the button which is cool but you can disable that but when I click on get started you'll see that as I there's this the form has the total cost estimate represented in this kind of like a slider up here and it's going to you know slide across as the price increases in value so let's just do some clicks here to show you how it's working out of the box so I click on here and then I have features so if I start adding features you'll see the price start to go up now let's go ahead and click through it to the next step all right just you can see as I click through the price keeps increasing all right now the reason why I'm showing you this is because the max and this is the final step here which would then for this form display the total cost and then the call to action is simply to enter your email and then to order the website which would then send you and the user and notification email and then the conversation starts at that point obviously you can choose to customize this final step however you want I'll show you you know in a little bit how to do that but what what you need to understand is that at this point you have a choice you can either just send some emails and then start the conversation that way or you can actually start processing this final cost now whenever you're ordering a website I think it may be rare that a person is just going to click through and just order it right then and there unless you have well-defined packages and things like that but the option is there for you to make but to process the payment but the reason why one of the main reason I wanted to walk you through this is because this slider will only go so far if I choose the maximum price to be four thousand so it's just kind of a way to gauge how you how far you want this slider to go through the forum you can choose not to have a maximum price and then it's going to automatically calculate that for you so if you're unsure of what to do just kind of leave it blank I like to set the automatic next step here you know and one of the reasons for that is that it takes out the need to click on this next step button whenever it's not needed so let me just kind of show you I'm going to refresh the page and I'm gonna get started here now if you notice that well I have one of two selections I can you know choose here do I want a website or do I want a mobile app well I can't select both so it's kind of a little bit redundant to select one and then have to click on next step so to get rid of that extra step I like to click on this or or choose the automatic next step so that's what that is and also I think the default animation speed of the forum is a little bit slow so right now it's set to 0.5 I would set it to something like 0.1 just barely anything because I like the form to be you know a little bit faster as the user goes through it alright let's go ahead and I mean I can't go through all of these options because we'd be here all day but I mean you can already see there's a whole lot of different ways I can customize my form I can even link Google Analytics to it and Google Maps as well I'm gonna save that for now and let's jump over to our design tab so that's our form general settings I'm going to go to my design tab here and you can see that I have another pretty extensive list of options that would allow me to make sure my design fits the design of my website and so this would be a good time for you to go and grab your colors from your your um your layout pack in this case let's go to our services page here and I would want to go and find you know the colors used in my layout pack so I can then match it with my form so what I've done is I've grabbed this blue here and this darker blue over here to use for the blue for like my icons and stuff like that and then my darker blue for my text alright and so let's just go ahead and do that to do that I'm just going to copy and paste it in here there's my blue that's my main color and the main color is going to be the the one that if I look at my form here it's going to be what colors this cost area here at the top bubble and then my icons and my buttons and everything is going to get colored with that main color alright and then let's just paste in my new text color here and I'm gonna my intro title and tooltips color as well okay all right the Google font can be selected here so if you don't select the Google font it's going to pull from your default theme font but if you do know it it's a good idea to go ahead and put it in here and since the web agency layout uses monsura I'm gonna put it in there all right and there it is the shining effect on the buttons if I don't really like it because it doesn't really match the sight but I'm gonna so I'm gonna take it off but you can keep it if you like it and then I'm gonna save and that's gonna pretty much do it for our purposes for today as far as customizing the design the other thing that you can do that I fail to mention in the design tab here are it may not be in the design tab let's see let's go back to the general tab nope I believe it is in the design tab and oh well this there's so many forms I mean so many options I've forgotten where this specific one is but I know I will find it in the near future here but let's continue on if you are just joining us I want to welcome you to our Divi use-case livestream each week we are taking one of our free ditty layout packs and we're going to show you how to use it on your own website this week we're taking the web agency layout pack and I'm showing you how you can add a cost estimation form using the WP cost estimation and the payment forms builder plug-in and this link to the layout and the link to the plugin can be found in the description so please be sure and grab it if you don't have it already and also if you need a copy of Divi the Divi theme there's a link in the description for that as well so we've been going through the setting up the form settings for the plug-in and in an effort to match the design of our web agency layout and what I've already added the the Blues for my main color and my text color and now I'm just going to show you a couple more setting options here there's a text tab in the forum settings as well this is where you can basically control all of the calls to action throughout the form all the text the copy being used you can customize it to fit your own needs you can even choose to enable or disable the introduction so if I look at my form here again there's an introduction at the top in this case it says how much to make it and then there's a I guess they would call it an introduction title and introduction text so you can customize those things here you can even add an introduction image which is nice in that image just sit above there as well and so all of these Texas options are there for you excuse me for there for you to use along with setting up your stripe payment credit card information or I'm sorry labels whenever they they're going to process their payment all right so there's your text settings there's an email tab here where you can you know set your admin email and customer email information this is going to handle you know the notification process you know you have this powerful customizer here where you can control what the email is going to look like and you can even attach this to MailChimp or I think mailpoet is another one okay so there's mailing list options for you as well like I said a whole lot of options here in this plugin so please take the time to check all those out all right let's continue on this next tab is last step and this allows you to control the when I took you through the the plugin there's that I'm not gonna do it again but there's that last step where it shows you you know it gives you the final cost of your estimate and then the call to action which was to enter your email address and this is the settings of the general form settings for this last step which you can see I can add a payment tell it that it's a subscription then this is actually where you would set up your payment gateway information so if you wanted to use stripe here for your last step if you wanted to process the payment of your estimate a cost estimate form click on that and then you could you know enter your stripe keys and set up that information there all right the next group of settings here is your summary this is actually useful if you're going to have a long estimate or estimation in your form and the user is going to want to review all of those selections that they made throughout the form it's a good way to do that and you can include a summary on that last step of the form as well if you want to to kind of just bring the user up to speed on everything that they've chosen throughout the form that way they see it all there and as you especially want to do that if you're going to process their payment because they they need to see what they're buying before they click that payment all right and then the last one here is that discount coupon you can add to your form you can actually you know create your coupon codes here and add it to the form so that they you can you know share that whenever you want to feature a deal or whatever okay all right so let's go ahead and continue by looking at more of the steps that we have here in our steps manager unless let's customize them a little bit to you know to our own needs I'm going to show you how to do that so the first thing I'm going to do is I'm gonna hover over my first step here which is in green I'm going to click on the Edit icon and here are my step options first thing you see here is a title for my step and if I were to go here to my live form you can see that it shows the title of that step here in this case it's going to be you know your question that you're asking or you want to showcase I think it's a little confusing to have just mobile so I'm just going to add mobile app or website and then after that you can add a description to it as well and that would display right underneath the title there for clarification purposes for the user if you want to you can choose if you want to line up your if your list of features here and you can see that the items under this certain step are listed here you can add those items these are essentially your choices in this case you have two choices website or mobile app and you can add those here and then you can see a summary of these to list items here and you can see that it's an image type and that's why it shows this image here and it's also been assigned a group and this is important because if you notice that each one and let me just click on you can see that both of these have the same group name this is important this you know tell you why if I select one if they are part of the same group you go back to the previous step I can only select one if they weren't given the same group name then I could select multiple list items but because they are part of the same group only one can be selected at a certain time so this important thing to know when building your own cost estimation form and you want to give them an either/or you need to give a choice you can give them both a group the same group name and to do that you can go to your edit your list item I'm going to do that here I'm going to let it my edit my website list item there this is where you give the title of your feature or your item and the type here it's right now it's it's an image type but much like you would in any form builder you would have a bunch of you know these options or types available to you it could be a button a checkbox and so on you can even have a date picker and text area a time picker so it's got a lot of cool types that maybe you wouldn't find in your standard form builder so I'm going to keep the image type and you can see this is where you would add your group name and all you would need to do is remember to add the same group name if you want to keep this functionality of choosing only one list item at a time the picture here can be uploaded and to change it you would just simply upload image that's going to give you a box here where you can pull any image that you have from your own media library and this actually would be a great time to go ahead and use some of these awesome images provided in your layout pack to serve as some of these icons in your paint payment form I'm sorry in your cost estimation form so you know maybe not all of them will work but some of them will but at least I'll give you a head start and kind of creating these great-looking icons for your form and let me just show you an example of this so right now it's this is my website so maybe I would want to find a you know website image so let's scroll through my images here and then you would find like something like this if I want to use that one I'll click show and then I would add it to my post here and then I'm gonna save it out and let's go ahead and see if it saves my changes all right oh and if you notice that it's it's all blue that's because there's a tent being added to this icon and to get rid of that let's go back to my list item and edit it and you see this tint image option this is actually going to put a color overlay over any image that you put on this form and this is a way to kind of it's it's actually a really cool feature to make sure all of your icons are the same color obviously doesn't work with every image and mostly for icons and things like that but this is can be disabled if I disable it and then I click Save and then I refresh there you go you can see the icon shown here without the color overlay and right now I'm going to keep my cover overlay because it's actually matching my sight for me and this is one great way to you know use those great images to match the design of your layout alright let's move on exit out of there and that's my first step now let's go to my second step and to do this I'm gonna actually go to my features step so if you notice that well we'll get to that in a moment I'll show you how they're linked together but I'm gonna hover over features and then I'm going to click on the Edit icon and this is just like we saw before this is our step options where we can add our title in this case it's the features 1 and then our list of items here and you can see that all of these items serve as my choices of which features that I want from my new website in this case it's going to be Analytics e-commerce a blog a database which features do you want notice that they don't have a group assigned to them so I can select multiple choices and they will that cost will increase as I go through the form as it adds the costs associated with each one of these list items to my overall total cost and let me just show you what I mean so let's choose this analytics item first and if I go to click Edit you can see that along with the type being an image and the picture being selected and the tenth image are the color being applied to my image the overlay you can see I've added or they've added this price to it so this is where you would add the of whatever this feature is in this case it's $150 so once that set if you go to select that feature this is the the one that I was just looking at here the analytics one if I click on it you can see that $150 has been added to my total cost estimate and my slider up here so that is how you add these values to your features here the e-commerce one looks like if I'm doing my math correctly is five hundred dollars and so on and they just keep adding it to the total cost as the user selects them all right and if I were to go through and look at each one of these items in the list you'd be able to see the cost you know that was added to each one of those all right let's go ahead and exit out of my features and there's my kind of 1/2 step of this form this two-part step but obviously there are more that I won't have time to get into but you can at least see how this functions so that you can use it for your own purposes all right let's see you can see that these steps are linked as I mentioned before you can link a step by hovering over the step clicking on the link icon and then clicking on to the next step that do you want to connect so this case the mobile or website step is connected to the feature step once it's connected then you can go here and edit the conditional logic that would you know bring a user from one step to the other you can see this cool little visual appear telling you what it's doing so this is going to show you how do you want a user to go from this step to the feature step well you can add a condition and this is where one condition has been added and that is simply that when a when the person chooses the website option or feature or list item then for that for that first step then they are going to be redirected to that features step and you might have guessed that if this type of application step then is if I look at my conditional logic there you can see that when the user selects mobile app then it brings them to the type of application so that's where you kind of connect your steps and you can get really complicated with those with that conditional logic to create some pretty amazing forms so in this last stretch though I'm going to show you how you can add this to your layout or your own website here all right so it's making sure I haven't forgotten anything that I want to show you before I go on actually yes there is something if you notice up here at the top there is a button called form designer now I didn't spend any time on this and this just goes to show you how advanced this plugin is but if I click on this form designer I can go ahead and this is kind of the plugins version of a visual builder with some limitations obviously but it allows you to click on certain elements of your form and to do that I would simply click this select an element button here and then after I click the select element button I can hover over what I want to customize and then let's say I want to customize this button I click on it and then once I click on it then it's going to give me the this list of options here on the Left where I can select or toggle this styles here and then I can I can even click through to see these this form on different devices much like you would in the Divi Builder and then I can click through all of these you know styling options here which is really cool one unique feature is this ability to you know design your form elements based on their current state you know the default state the mouse-over state or the focus state which I thought was cool all right let's get out of there for now I know this point we're going to go ahead and add this to our layout now to do that you're going to want to go up here at the top to this shortcode button up here and there are three main ways that you can display your form on your website the first one is to integrate the form within a page and that's the one we're going to do this is where you would you know create I'm gonna create a new section a new one column row and then text module and then I'm an embed be the the shortcode into the module so but if you want you can also use a full-screen version and to do that I would maybe use the blank page template when creating your a new page and in WordPress on the wordpress back in there and then enter that shortcode and then it's going to span the full width and height of the of the browser there to show this form in a full-screen mode so that's the second one and the third one is to use it as a pop-up for and to do that you would simply put the shortcode in there for the to get that functionality and then you would use this example link here the main thing you'll need is this class here so as long as the link has that class you would need to or it's going to open up that or that pop-up form so it's pretty cool but we're going to be using this shortcode here so make sure you go in there copy that shortcode there and then we're going to go over to our our services page and I'm going to go ahead and once you're in your services page layout there scroll to the bottom you'll see there's a section for a or a call to action to you know contact us with a contact form a good option would be to you know get rid of that and actually just put the quote our cost estimation form down there to get things rolling you can of course add it to the contact page add it any way you want but for this example I'm just going to add it to the bottom of my services page so with the visual builder deployed I'm going to scroll back down to the bottom of the page there you go going to erase or delete this bottom section don't need it anymore I'm going to add a new section make it a regular section I'm gonna add a one column row and I'm gonna add a text module now I could add a code module if I wanted to but sometimes when I use the text module with a shortcode sometimes I can target some of the copy that's being deployed by that shortcode by I can target it and actually design it with my design options within my text module so that's a cool tip and so here's where I would add my shortcode and let's see if I can I actually don't think I included it or I actually added it to my clipboard so let me do that real quick paste it in there and I'm actually going to use the one that's already done and then click Save make sure you save the changes it may take a section it may or may not show correctly in within the visual builder but I would suggest after you save it go ahead and check it on the live site that's the best way to kind of show how it's going to look and so if I scroll down my page you can see that it has been embedded successfully here and if I click on get started one cool thing that it does is it automatically kind of Scrolls to where you need to be to view the form and then now I can walk through my form and my features all the way through and I can watch my costs go up as I make my selections oh wait I accidentally selected Drupal sorry everyone I feel very bad about that and there's my final cost there and then I can just enter my email in order alright so that about covers it you can see that one other thing I didn't do here is you know you can make sure to this is actually an h2 title so you can actually target that within your text module if you wanted to to customize that make sure you got the right font for that but yes my font seems to match and my color seems to match my design and it was done pretty quickly using the article II example given in the plug-in I've got a few minutes maybe to go over some questions here oh yes I see my mouse pointer isn't visible I am very sorry about that I'm gonna have to get that fixed that's the second time I've heard that but hopefully it wasn't too confusing for you yes you can view the entire video it will be available so be sure and check it out it's actually going to come out with a blog post and also you can find it in our YouTube channel and Facebook as well all right actually the wpengine hosting is simply for my personal build our staging site here for this purpose it's not related to elegant themes all right very good I think that pretty much does it on questions all right all right well that's it for this video thank you guys for tuning in and be sure to go ahead and subscribe to our blog newsletter our YouTube channel and of course like us on Facebook that way no matter where you're getting your info from you're going to get a notification each time we have something new for you and I'll be someone from the elegant themes team we'll be back here next Tuesday giving you the same thing for our next layout so please be sure and check us out then and you can also get a sneak peek of this Friday on the Divi nation podcast thanks again and we'll see you guys soon

Channel: Elegant Themes

Views: 12,150

Keywords:

Id: NRrHoBpvhzE

Length: 57min 7sec (3427 seconds)

Published: Tue Jan 09 2018