How To Use The Divi Theme Contact Form - Divi Theme Tutorial

what is that party people my name is Darrell and today I'm gonna be showing you all how to use the Divi team contact form now this evening contact form has a lot of options and it is very powerful and you can also add different options based off a person's answer so let's say for instance this is my contact form and you have a client that comes to your website and fills us out so maybe they want a new website right this way I want a new website what can we do here here I'll go ahead and fill this out saying okay I need a new e-commerce websites and right here we have different options so we have four options now I have programmed my contact form to have different answers based off what the user puts in here so for instance right here if they just put ecommerce websites there's no other options right same thing is enterprise there's no options however if I select a personal website we now have this price icon right here and right here I'll say okay you know my budget is probably around two to three thousand dollars and they're gonna ask me how many websites now this is just for two tall purposes I'm just trying to teach you how to use the contact form usually you would never ask that question right I would be kind of be redundant or that would kind of be pointless but let's say for instance I'm saying I want one website absolutely I change out mine I want two websites now when I have two websites open we have this other form right here and it said well why do you need more than one websites I'm gonna say well you know I'm a run an SEO agency you know I I run an SEO agency and now also right here we had it another box that says okay you run an SEO agency tell us more about your business maybe here you can talk about I get I get 1 million visitors a month or a month or something and or you know I don't know whatever you want to put in there you know so that's just an example of what you can do and what you're going to learn today in this tutorial next we'll talk about other options so for instance right here saying okay I don't want a bit personal website a business website so right here I click on business websites and now here we have this drop-down icon right here saying okay what kind of business what kind of business do you run and here we can put on online websites or a brick-and-mortar which is like a retail store so I'll say you know it's I run an online website okay mm what's the price here okay I'll fill this out there $3,000 and then there you go so also you can actually redirect so once actually someone fills out this contact form you can redirect them to another page as well so in this video you're gonna learn all about the Divi theme contact form it is one of the elegant things probably best module it is very powerful it has a lot of amazing features in it also for those of you who want to build this same exact website with the Divi theme I do have a full tutorial on it in the description below I just finished the Divi theme tutorial so if you want to learn how to make this same exact website where I gave away freebies and all that really cool stuff that tutorial is in the description below also there is a new plugin that I've introduced and you can go ahead and check it on this page where it adds all sorts of different you know slide in animations and everything else so be sure to check that out so let's go ahead and dive into this so if you want to learn how to use the Divi contact form you want to learn how to use the conditional logic and you want to learn how you can kind of maximize it let's go to get started so let's go this is my demo page right here right this is a demo page I made and I'm just going to go ahead and make a contact form so right here I'll put in contact form so here is my contact form I'll click on contact form and there you go now what we're first gonna do is just basically introduce you to the features after that we'll talk more about conditional logic and it will also talk about redirecting as well so right here you have your different options you know you have your name your email and your dress just like displayed right there so you have your name your email and address our message now if you ever want to change the size of this right here you click on the gear icon go to design and go to layouts now with the layout you can actually make this full width so now you can kind of see how its full width so depending on what you want to do you can style it over here you can change all sorts of other stuff as well I will actually have a free contact form layout for you guys as well in this video I'll be providing you all this one right here you guys can download it's a nice contact form you know it's very creative it's very nice you guys can go ahead and download it I'll put that link in the description below as well that's just like a freebie just for watching this let's go back over here so we have our name we have our email address right and right here you can see that someone fills it out to the top - oops sorry about that they'll have to I mean you see if I put this right there there we go they off to display CAPTCHA Fortis right here we have the text which is this field right here the field options which is this field right here and then also we have the conditional logic as well we'll talk more about later ok so also let's say for instance you have your your title right here saying okay well what kind of title do you own right there so define a title for your contact form so this is for like web design jobs web design quotes or web design quotes and for a success message so when they fill something out what do you want to show them saying hey thank you we'll contact you in 24 hours or something else submit button text you can actually have the button and say you know email me so right here you can see that the email me has changed as well over here is probably the most important parts please make sure that you put your email address right here so right here I'll put your email address so when they say that the the email whenever someone fills this out this is where that email is going to go right makes sense right and also message pattern this is you know more functionality you can have with like field IDs or messages or something like that but I think I'm just leave a blank for default elements if we talked about the CAPTCHA that's what that form is right there and the redirect so if someone fills this form out so if they fill it out and they click on email me if I click on yes what page do you want them to go to you can actually redirect them to another page so maybe a thank you page you can make your own custom Thank You page you can make you know additional services page so for us this right here I'll say if they fill this page we're gonna go to durable send calm once they're done filling out this form so that is what the redirect option is right there link I gotta be honest I don't know why they even have this feature because if you click on it it's going to link them to a different URL I guess they added that in just because it might be helpful but personally I think that's not necessary background you can go ahead and design the background here as well maybe you can add like a gradient color or something like that but that's really ugly you know what I could we're gonna keep it basic this tutorial you know that's that's really ugly and then add a label that's just for you and your purposes of what you want to call your contact form alright and also whatever you want to add in a field right here click on add a new field and then right here will put something like the field ID right here is just for your information to kind of remind you on what was there or what what the purpose of that is and then for title right here what puts what's your I'll put what's your you know what's your website so that is something that you can put now this right here again it's not required and you can you know virtually put in whatever you want the field options right here so for instance the field options you have input email text area checkbox radio so it's just a different way on how you can have your stuff selected so let's say for instance you want to put a text area now this is like a message area but maybe you want to go ahead and say I want to checkbox like for instance instead of saying like what's your website you can say you know is is or do you have an SEO company maybe you wanted you know maybe you can offer SEO services as well so you might want to ask them saying you know do you have an SEO company if you don't so we can provide you that service as well so they also have radio buttons as well and then they also have like a drop-down menu as well where they click on it and then a drop-down would appear so those are just different type of field options you can have depending on what you want your contact form but and also you have the required field so is this required so must they fill this out or do they have to fill this out in order to email you so I'm gonna say no not really now because it's not that important to me but that's just an idea or an example of that right there so I'm gonna go and close this right here all right so now we have name we have email address and message now let's just pretend that we're we're a web design agency and someone's here to actually fill out a form that says I want a website's right so we're gonna pretend that we're a web agency and you know people coming to us they want a web site right so what else you want to ask them maybe you want to ask them their budgets now in my personal opinion I never asked that because it makes people feel uncomfortable when you ask them how much money do you have you know it's like imagine amazing hey dude like how much money you got you know you come up as a junkie right like but you know some businesses do that and that's fine because some people really might be on a budget so right here I'll click on add in the field and I'll do price and then right here I'll do something like well do you like a budget because maybe they're part of a corporation and you know corporations don't even care if they really they really don't care about about their money because it's not their money that's their boss's money right so we have a budget now right here we have field options so let's actually select something right here we'll go ahead and select we'll go ahead and select we can select a drop-down I think we're drop-down would be most appropriate so let's say for instance there their budget right here is between zero and two thousand dollars okay and their other option right here is two thousand to five thousand dollars and then we got five thousand to ten thousand dollars all right and then the last one we'll put is plus ten thousand dollars ten thousand I don't want to make this required so I'll take that off so here we have a drop down we can see the drop down menu and you know maybe I can actually change the design I don't want to fool with you know something little bit smaller right makes a little bit more sense so we have the field options now let's actually leave it like that for now and then just click on check all right so now we have the name the address email address the message and then the budget now let's add some conditional logic okay so what could we add here that would make sense you know so maybe what kind of website do you want right so let's go ahead and put that in right there so right here I'll click on atom to field and then I'll put a type of website and then remember this right here is for us right here it's just for you your customers will not see this so right here I'll put what kind of website do you need now I'm gonna go ahead and go to do the field options and maybe we'll put something like radio buttons alright and then my here I'll put personal website hero puts a blog or business I'll put ecommerce and then right here I'll put a blog okay and I don't wanna make that required now so now that I have this right here I kind of I kind of want to add now some conditional logic so if somebody fills this form out I want them to actually I want this to display when someone fills out this message so I'm gonna go over all the conditional logic to make sure that you fully understand everything about conditional logic cuz it's what makes this contact form really powerful so right here I'll click on enable all right now we got a few options and this might this might look scary oh my god we got a lot of options this looks scary it's really not that difficult to understand so we nabel's conditional logic now relation now the difference between all and any is any is basically saying if any of these are filled out or you must have all of them met which would be kind of difficult so there's you know there's ways to use relation you know you can say basically relation is saying they must meet all the rules that you make and then all those rules must apply and then the conditional object will apply but for now I'm just gonna say any of these right now will apply all right so right here we have different we have name email address message and then we have budgets okay so basically these are saying if if the budget right here equals zero to thousand dollars then this right here will appear okay so let me say that again right now so if somebody fills out the budget and they've they put zero to two thousand dollars then this form right here will then display okay so let's go ahead and just kind of test run it really quickly just to show you an example okay so right here I'm a click on check check and then we'll click on save okay and I'll exit the visual builder now as you can see the price is gone because remember it has conditional logic on it so it must remember we put the rule here I'll just go ahead and do this this right here hey what's up now remember for the budgets we're gonna go ahead and put 0 $2,000 and then it's gonna ask us what kind of website do you need now if I put anything else that option right there will not display so if I put anything else you can see it's not displaying because the rule is that if somebody fills out does your $2,000 it's gonna then ask us what kind of website do we need now now realistically guys I probably should have switched this around to what kind of us I'd need first and then add the conditional logic to that right but I'm just doing this just for to taller purposes okay just to give you an example okay so that's just the very tip of the iceburg basics of conditional logic okay let's go ahead and get a little bit more advanced and by adding a little bit more features because remember we can add conditional logic on top of conditional logic so basically we can kind of stack it together so let's go back over here oh oh whoa what was that what was that I don't know what that was let's go to enable the visual builder really quickly oh no I put in the uh it was the other page I put in so I lost my page it was it was I mean it was demo page my website was out the page we were working on yeah okay yeah that's what it was sorry about that guys okay so we have this form now I'm gonna click on check so we have this question and you know it's just basically asking us not sure probably switch that around actually list let's switch this around so I'm gonna drag this right here and I'm probably want to change that conditional logic so I'm gonna go ahead and change that conditional logic really quick as you know it just doesn't make much sense you know why would you ask for the price and then ask for the kind of website later you know it doesn't make much sense right there but okay so I switch that around I turned out the conditional logic now we're gonna start all over again so for the budget right here for the price now I want to kind of add something else in here so for the price right here I'm gonna enable this now a good way to understand this guy's is whatever is on the bottom it'll apply to the next one so basically this one right here usually will never have conditional logic usually the ones lower will be the ones to put to be a apply conditional logic for the one above it so just think about the lower one depending on you make the lower one you act as you talk to the lower one and it'll apply it to this answer right here so let's go ahead and take a look at these other ones right here so we have what kind of website do you need now I'm explain to you what all these options are so what equals is so equals means just like we talked about where if somebody fills out if somebody fills out what kind of website personal then the budget form will display okay we just did that now let's talk about does not equal so does not equal means that if this right here is not filled out if these other options are filled out then this will display so basically saying this one we don't want personal so if personal selected then this right here will not display if the other ones are selected it will display okay over here we're gonna go ahead test out really quickly just just to give you an example just to kind of give you a visual of it because it's you know it can be caught it can be hard to describe that so right here we have the the personal now you see when I selected the personal it does not display anymore so that is what it means by does not equal so it does not equal but these other ones will display it let's pay by default so that's just an example you know I really I don't know you know there's there's you know there's ways to use that you know I there's probably ways out there I just why does it keep doing that so weird I can keep click them on the menu but I'm sure there's ways on how you can use that so that's just an example going back over here to kitchen logic so we talked about equals we talked about does not equal is greater than now this is actually referring to what's a call this is actually referring to a number so when you say is greater than that means that the number of value must be greater so depending on right here you would need a text area so it really wouldn't apply well to the check boxes because but the check boxes we don't have a number value but remember earlier how we selected a number value for how many websites so let's say for instance you want to select like you know right here you would need obviously a number value say if this is greater than one then display this if this is less than one then display this so that's what the greater and less than is it's for a number value okay so that's basically what that means we have contains as well so what kind of website contains personal then this will actually display right here does not contain so what kind of website does not contain and then personal then it will not display all right so let's go ahead and just give you an example so I'm gonna click on check already okay so I put contains personal remember contains personal so now it shows up if I select the other ones it does not display so it's very similar to it's very similar to the other option that we had but remember that depending on the type of text area or email that you have it will respond appropriately okay so that's basically what that means by are they saying the conditional logic with contains personal okay so now we have does not contain personal and then of course same thing right now is empty and is not empty so what kind of web site if this is empty right here then this will display if this is not empty then it will display all right so let me just give you an example of you know maybe a good a good way to apply this would be the message so we want them to fill out the message right so if they fill out the message if they even type in the message then this will display so right here we have let me see your here well do we can do we'll do price again we'll do prices just to give a basic so we'll do the price and we'll put what kind of website you need is not empty so that means that the budget will display when this is not empty so let me just kind of give you an example I'll just go ahead and save that and exit visual builder all right so right here what kind of website do you need so right now it's empty right there's nothing selected but if I select anything it's considered not empty so then the budget will appear see that now the budget appears so that's that's another way of how you can kind of use that feature so that's basically what all those features mean I know when I first started using the the contact form it was a little discouraging because I didn't know what all those ments but as you kind of learn and study them you can kind of use them in different ways so let's go back over here to price conditional logic now if I put is empty so if I put that these are empty at first it's going to display and then if it's not empty then it's not going to display so that would be very counterintuitive and it wouldn't make any sense right it really wouldn't make any sense because now you see the budget but what I'm saying is is that if I select anything the budget will disappear and that it doesn't make any sense so in this specific instance you might not want to select that but I'm just kind of teaching you on what that option does so for this example terrible example I'm totally I totally get it but you know I just wanted to just kind of show you what the purpose of that is for and there's a lot of reasons to use that you know it's not a bad feature I actually used it on my last one of my my clients and you know they wanted to select something and they said if they select you know if they talked about wanting to spend more money don't talk about the budget you know hide the budget Maya hide the budget you know so that is what I did to use in that situation so going back over here we have our our price right so we have conditional logic set up all right so that's basically what all these options mean right there so now that we cover the options right there let's kind of get a little bit more advanced and talk about how we can kind of apply this a little bit more differently so I'm gonna go ahead and make one more section right here I'll go ahead and duplicate this and what kind of website do we need right here we can kind of put maybe what kind of websites well puts gonna select a drop-down we'll put online store online store or a brick-and-mortar store brick-and-mortar okay so right here we have what kind of website do you need if I want to change that layout there you go what kind of site do we need all right so now you guys can see this so we have a type of websites and then right here I'll put what kind of website this is for us to help us understand the contact form because you know by default it's it's kind of hard for us to know you know that what the hell the contact forms for so this right here gives us a better example it's just cleaner for us to understand basically all right so we have kind of websites and yeah so let's go ahead now and apply conditional logic kind of website to type of websites all right so right here I click on gear conditional logic turn this on now right here we have rules now I kind of want you guys to kind of understand how we did this so what kind of website do we need so basically saying I want this to appear if an action is done right here so what kind of aside you need all right now what can we put here that would make this display that we would want to display you know so what kind of upside do you need and maybe for instance I want to say is not empty so that means that if they select anything right here then this will display right here okay so if they check any box any box at all then it's going to ask them this question so I'm saying okay that makes that makes sense that you know that that would be a good rule what we can have right there so is not empty so they must fill something out in order for this box to show up all right now let's go back over here and we'll click on price and will click on conditional logic and we'll click on enabled now what I can do here is say now I want the budget to display if an action is taken on what kind of websites do you need so in order for that to happen they would have to fill out the first one so now they have to fill out this one this would display and then the budget would display last so right here also go and select oh they're both titled the same Oh silly me I probably should have changed that you know I'll just select this one right here because I believe that's ones right there now maybe we can actually do something a little bit more differently here so maybe saying if they fill out the e-commerce or if they fill out the online store then it'll display if they fill out a brick and mortar then it would display as well now we can do it either way or you can just say you know is not empty so basically saying that if an option was taken here then budget will display and you can apply different you know scenarios you know you can have equals online store and then maybe ask them another question about the online store and then maybe we can make another question and saying okay brick-and-mortar how long have you been in business or something like that you know to kind of keep the questions going or to kind of make the form dynamic base off your customers needs because I know I know clients are crazy man I know they they they like a bunch of stuff they want this they want that's so this example would just basically say I'll just put is not empty all right so basically saying that if they fill something out here this option will display if they select an option here then the budget will display last to kind of you know give them you know because people hate talking about money you know so we want to talk about money at the very end you know that's kind of how it works so you can see that everything has gone right there everything is gone so here I'll put Darrell Wilson and I'll put my email address hey I need a website now right now right here we can select personal and what kind of website do you need and I'll say okay I want an online store you know I want an online store they're saying okay how much you know what's your budget for that and saying okay two to five thousand dollars and then they would just click on this and then email me and voila well yeah my form is actually not working you know it's actually I know open wrong that was weird I know what went wrong we have to put the HTTP for the email address so right here on my redirect we got to put the HTTPS so there we go we got to put that and then once that's displayed then it'll actually take them to that URL so let's go and retry that really quickly all right exit visual builder I'll put a Darryl personal online store they select the budgets and then right here I'll put 20 is that right 21 yeah okay email me and then there you go now it's going to redirect them to my website so you can see the redirect feature works and that's just an example of how you can use the contact form so I think that's pretty much it for the contact form I'm trying to think if I can give you guys extended practice here just to kind of you know just kind of just to kind of you know pick your brain to make you really understand how you can use this form maybe over here we can add in one more form right here and saying that if they select a certain budgets then we'll ask them you know about their business let's just do that one last time all right so right here all puts a message or what kind of business or what kind yeah what kind of business so basically what I'm gonna ask here is if they select a large amount of money I'm gonna ask them okay well if you're gonna if you're going to spend $10,000 what kind of business you have right that would make a lot of sense to ask somebody so over here we have field options and I want to put input field meaning it's like a message area then conditional logic will put yes and right here will put budgets now if somebody puts $10,000 I want to ask them what kind of business do they have so that's basically what this form can do right there so when I put equals they must say I must or they must put in $10,000 and then this message right here will apply so usually on the conditional logic worked it's usually whatever is under its you know that's usually how it works there's there's instances where it wouldn't work like that but you know it's just an example so here up with Darrell Wilson and then we're here put man I love this tutorial all right and then right here what kind of side do you need I'll put personal and then right here I'll put online store you know I probably should have change that guy's you know it's it's you know you get it this is its tutorial you know it's it we're not the World Series of Poker you know so here I'll put a budget now remember it's not going to display unless I put $10,000 so if I put $10,000 and then we're gonna ask them okay you want to spend $10,000 okay what kind business you have and then there you go and then they would fill that out and then they would simply put it in and email me and then there you go when they fill this out it'd go to my website because I added the redirect feature okay so I hope this tour was helpful hopefully by now you guys understand how to use the Divi theme contact form it's very dynamic and it's there's a lot you can do with this form it's it's a very powerful form and personally I think it's probably one of the best forms out there I'm also if you want to learn how to make this same exact websites I do have a free tutorial on in the description below where we make the same exact websites and I also give it away a lot of freebies a lot of free layouts as well also if you're interested on using these models right here I do have a video on this right here in the description below as well these are actually 21 add-ons for the Divi theme that allows you to really just add a lot of more modules to the Divi theme and it just adds a lot it's a great it's a great plugin it only cost like $15 I even do have a coupon code for you as well so be sure to check that out also I'll be giving you this contact form right here you can go ahead and download this I'll put this as a free gay for you also it's a very nice contact form that was designed and it was actually designed by a company called best CV child about a year and a half ago so I'm just gonna go ahead and give it to you all for free it's a stylish contact form when I help you with inspiration and ideas so I'll go ahead and put a link to this freebie in the description below so thanks for watching guys I hope this tutorial is helpful my name is Daryl Wilson and I will see you all in the next video take care everybody

Channel: Darrel Wilson

Views: 51,181

Keywords: divi theme, divi theme contact form, divi theme contact form settings, darrel wilson, divi, divi theme tutorial 2019

Id: wl1-4JlzNq0

Length: 31min 23sec (1883 seconds)

Published: Fri Jan 11 2019