How to create Divi Contact Form | Divi Tutorial Series | 2020

In order to get clients or customers off of your website they need to be able to contact form.

Fortunately duty comes with a really powerful inbuilt contact form so let’s have a look at it first thing we do is add in our row.

Divi Contact Form Module

find the contact form module just down here.

and that’s going to immediately input something that looks like this on to the webpage so we can add and remove sections over here on the left for example if we didn’t want to have a message section we can simply come up here click the bin icon and then get rid of it and then we click down here to add a new section now this used to be a little bit basic but Divi have really really amped up the game here it’s packed full of really useful features so just for example let’s put in here in fact let’s go to field options first I’ll show you what we can do we’ve got an input field which is where somebody can just type in some text.

we could have an email field which is obviously specifically for email addresses a text area that you can label yourself you can have checkboxes which are great for accepting things like terms of conditions you can have radio buttons if you want circles and you can have a select drop-down so that you can then have a drop-down menu listing lots of different options that people can choose from what’s even more impressive though is the conditional logic that they’ve added this means that sections can appear and disappear depending on what your website visitor has actually selected in the form this makes that a lot more interactive and fun to use so for example as I’ve currently got select drop down here if we put in under text here web hosting plans.

and then under our field options we could do let’s use SiteGround so we can do their starter plan and then its grow big and then its goki we’ll just use them as an example seeing a site ground are the best web hosts and once we’ve done that we can choose whether or not we want this to be a required field so you can do this with anything if you turn this off it means that somebody could complete the form.

apart from that section they’ll be able to click Submit and then you wouldn’t get that information so you don’t necessarily want to have this on for everything but certainly things are name email phone potentially have it on here click yes and that way they’re not going to be able to leave it off and submit the form and then you’re accidentally not gonna be able to contact them or something so in this instance we’ll just leave that on now that we’ve done that we’ve got those three pans listed under here on the drop-down what we can then do is if I go back we can add another section and we’ll just call this one options for a second go into.

field options and then I’ll change this to let’s change the tech boxes okay so this can be option one option two option three you get the idea.

okay but now this will only appear or I should say I only want it to appear when we select the go geek plan for example so the way I do that is come down to conditional logic enable it and then what we can do is here under rules choose web hosting plans because that’s obviously what we just created we could choose name or email address so when you create a field it’ll appear here so I’m going to choose web hosting plans now here we could do weather it equals an input doesn’t equal it blah blah blah blah so this is how you can really start to affect how your form behaves so you know is a filled empty have they put something in it this is how you’re gonna make interactive for what each.

individual person is doing with your form so for a moment we’re just going to leave it on equals and I want it to be the go geek plan so let me show you what that’s actually done if I just click OK for a second come out of here and then save this.

an hour I exit the visual builder a second.

okay so here’s our form click down here we can choose starter and nothing is going to happen but if we choose go geek suddenly these appear so that’s how we can just make the form a lot more interesting especially if you’ve got quite a lot of information you wanting to get it can be off-putting for people to see you know loads loads of different input fields on there so this means that they can just go through it and it’s just going to come up with the ones that are relative to them it’s a lot more friendly so that’s how conditional logic works I think it is a fantastic feature I strongly suggest that you use that now if we come back into here I’ll show you how we can make this look a little bit better so if we come to the design tab we can then go into our fields so this is the fields background color we’ve currently got it is a gray if I change it to green obviously they’re all going to switch over I’ll undo that though for a second what would be more useful is for example fields focus background color what this means is that if I select this when we click into a field that one and that one alone will change color that can be useful to let people obviously know which one they’re currently in just in case there’s some reason they they can tell and we can do exactly the same with the focus text color so we could change that to red and then we clicking there and that becomes red I’ll put that back for a second what we can then do is also add in field margins and padding so we can change around the spacing here we can change the fonts font weight and obviously the styling capitalized for example.

just as you can with a normal text module in Dibby field text alignments quite cool so we can then move those over to the middle where they apply obviously it’s not going to affect the drop-down box I’ll move it back and that’s how that works so styling is very similar to everything else with Divi once you’ve got your head around it for one module all the others.

make sense because it’s exactly the same capture text this is cool though so if you want to change this down here for example you know if we didn’t have a white.

background if we had a darker background you might want to change it to be a white color or for now I’ll just change it to orange and we can see that that changes the color of it down there so that’s just really easy to do you don’t have to go in and add any code like you used to it’s now here you can obviously change the size of it as well so we can bring that right up now I’ll just bring it back to where it was there and that’s assuming that you actually want to have this so I’ll show you how we can say that off in a second obviously if you want to style a button come down to button use custom font style and we can then start changing this around as well so if you for any reason didn’t want the capture you have to come back up to content come on down and it’s under spam protection so if we turn this off that’s gonna disappear.

I generally suggest that you have it on though because obviously it’s gonna stop BOTS from getting through it’s only gonna be real people and let’s be honest zero plus three isn’t too taxing if somebody can’t work that one out I really don’t think there should be on your website in the first place.

but let’s be fair I have seen something a little bit more complicated than that and if you have a separate spam service you can turn it on there if you want to background by the way if you want to add a background in you can obviously you’re then going to need to adjust the padding of it and the other form fields because it’s going to look a little bit strange but you can do that as well and then email is important in fact it’s the most important so you can put in the email address here in the email address field that you’re wanting it to be sent to so that would be yours and if you’re having any problems with this where you’re trying to test it out and for some reason the forms not working and you’re not getting emails being sent through what you’re gonna need to do is add an SMTP provider there’s lots of plugins that can do that for you I will show you that in just a moment for now though what you want to do is look under message pattern so what this means is how do you want all this information to come through on the email so I obviously got rid of the actual message text box but if if we have one stuff in there and we wanted that to be last for example when we wanted all of our other.

information to be first what we would do is input it using the percentage signs so I put in percentage name like this and we do that for all of the different fields that we’ve got here and then at the end I would put in message and that just means that no matter what order I actually have these in that’s how it would come through in the email and so if I just pick up here.

this is just telling that to you so you can put in the field ID between the percentage marks and then that’s how it’s going to come in you can also put in separate text between it so for example my messages a certain percentage message percentage percentage and phone number is blah blah blah so that is purely so that you can order your email hopefully that makes sense to you but once you’ve done that what you can do is set up a redirect so if you wanted to send them through to a different URL once they’ve inputted the form you can do that that can be quite nicely if you’ve got a separate thank-you page or perhaps if you were wanting them to download something after they’ve submitted the contact form you can do that just enable this and then obviously put in the URL you want to send it to and of course if you actually want to change any of these what you can do is simply click and drag so if we click and drag these in separate places it’s going to move them around the page so that’s how you can alter them nicely and that’s pretty much it for designing them just back onto the subject of actually sending emails if you’re having a problem with that you come out here for a second.

save this.

right head on back to your dashboard go to plugins and add new.

as I mentioned there are quite a few that you can use one I do suggest though is WP mail SM TP.


okay this is by the makers of WP forms and if you know them you’re gonna know that the quality is really high it’s really really simple and easy to use because quite often the problem with WordPress websites the reason the emails aren’t going through it could be something as simple as your posters blocked PHP from coming through if you use shared hosting it is quite common so basically use this it’s going to get rid of that problem for you it makes it secure and it’s going to make sure that your Divi contact form emails actually come through to you which is all important so that’s a really nice and simple using that you should be able to make some really good-looking contact forms and start getting more customer quotes and queries come through to you in no time at all.

learn more information from wiki about this topic.

Leave a Comment