The Divi Contact Form Module

hey divination thanks for stopping by our documentation to check out our contact form module so the divvy contact form module is incredibly powerful there are a ton of plugins out there both free and premium that have less functionality than what we've baked into the contact form module that comes standard with Divi you can build really robust forms use conditional logic there are just so many options I can't wait to show them to you in this video check it out in this video I'm gonna give an overview of Divis contact form module the contact form module makes it really easy to add a contact form anywhere on your website using the Divi builder in addition to your traditional name email address and message fields this contact form also comes with the ability to add your own custom fields as well as incorporate some conditional logic to your forms let's go ahead and take a closer look at the contact form module to do this I'm actually gonna erase the one that I have here because we're gonna come back to it because I want to show you first how easy it is to set up a basic contact form and then we're gonna come back and show you some of the more advanced capabilities as shown in this get a free quote form so I'm gonna go to my visual builder here and I'm gonna hover over my contact form module and I'm going to erase it also going to erase this row that I have here I'm going to select a new row give it a one column row and then I'm gonna do a search for my contact form module once I find it go ahead and click on it and as you can see the contact form settings pop up over here on the left and also you can see a contact form has magically appeared as you can see it comes default with a name email address and a message box which is in most cases all you need for a standard contact form you can see that the under the content under contact form settings you have these three input fields already added these are name email and message and of course they correspond to what you see here on the contact form if I needed to add a new one I could simply click the plus icon there give it a unique field ID for example I could choose company the title would be the placeholder text that you find within the field input box and then by default it's going to select this input field box but of course you have other options to choose from like email field text area text area of course is with the message box here that would be a text area checkboxes radio buttons and then a select drop-down all of these are options you can choose to create custom field types you can also set a limit on the number of characters available within the input field and also a maximum length limitation there you can set there are certain symbols that you can choose to allow within your input field as well for example I can choose to only include letters and only include numbers and alphanumeric which allows both I'm going to leave all for now the required field of course allows you to set a certain field as required so that a user must complete that field before entering a successful contact form submission the conditional logic is also available where we're going to get into that a little later when we go over our free quote form the background form actually is the background that resides behind the input field here so if I change it you won't see much of a difference this is actually something that would come in handy if you wanted to create some more spacing around it b to reveal the the background but for the most part you won't want to change your background for this form here you would go to your design tab to make certain changes to your input fields so let's do that under the our design tab for this field you'll notice that we have a layout option to make it full width if I don't want this to be full width I can go ahead and select no that will automatically make it a 50% with I could choose to make my text for this input field centered along with customizing the actual field text whenever I start or a user starts entering information you can customize the way that text looks there the sizing can be adjusted here and also you can add some custom margin and padding to your field as well you can also add a border to your field and also a box shadow and of course for this individual field you could also add some custom CSS to it as well so let's go back and that's just an overview of what kind of options are available for an individual field that you create I'm going to go ahead and delete it you can also use this list of fields here to drag them in the in the certain order that you want them in it makes sense to keep it as name email and message but if you wanted to you could adjust it there let's continue going over some of our settings that apply to all of our fields rather than just the individual once under the content tab you have the option of adding a title to your contact form you can also add a custom success message if you want or you could leave it as its default in that case you would just leave it blank you could customize what you want the button to read here the default reads submit you could change that to whatever it is get in touch for example this is an important option here this is the email this is actually what email you want this contact form to send the information to so you would want this to be your company email address or your own email address so that you can get this information sent to your inbox this next option is called message pattern so in whenever a contact form submission is sent to your inbox in the form of an email it is going to supply you with the information that was entered in each one of these fields by the user if you want to customize the layout of that message you can use this box to do it if you click on this little helper icon here you can see examples of how you would do this we have a simple contact form so the only fields that are available to us would be name email and message so if I wanted to customize how this information is sent to me then I would enter these custom variables here I could write the name of this contact is and then I would put this variable here called name and on the next line I could put the email address for this contact is and then I could select this email variable and the message is and then I would put a message variable here now each one of these variables inside here this would be your field ID so going back to up here for a moment if I would select on name and I go to my text here you'll see name is my field ID so those should match up and now when I get the email sent to me I'll have it in this order or this pattern so it's a way to lay it out a lot cleaner alright continuing on the elements section basically allows you to display or not to display CAPTCHA you could choose to enable redirect URL here if I click yes and I enter a URL here whenever a user fills out this contact form they will be redirected to whatever URL I put here normally this would be a thank-you page maybe you want to give an additional offer to them on that follow-up Thank You page or whatever so it allows them allows you to give the user a more unique experience this would of course replace the default thank you message the default thank you message that pops up when a user completes the form by default you could add a background now this is applied to the entire module so you may have to go to the design tab and give you know some padding here in order to clean up the edges there so it doesn't look so messy but I'm gonna take my background out for now going on to the design tab under my text options here I can change the orientation of my text for my contact form module as you can see in one click I can make it all centered or left aligned or whatever I need it to be and it takes shadow if I want title text this refers to this title contact form that we created it customized that using these options the form field text would be the text inside the each of these input fields that when the user starts typing you could customize the way that text looks the button you can choose to customize this submit button here however you like just toggle on the yes to use custom styles for the button and then customize it however you want I could choose to you know resize my contact form module and then once I find the white the white once I find the right width I can go ahead and align it make it centered if I want give some additional spacing which includes margin and padding for my contact form and of course I could give it a border and when when it says border here though it refers to your individual input boxes not the entire contact form you can also edit box shadow to all of your input fields here and one click and of course any animation to your form can be added as well under the advanced you can of course add your unique CSS IDs and classes to target your form from an external stylesheet you can add some custom CSS to any of these elements within the module by entering this inline CSS here and of course you can disable the visibility of your contact form on any of these devices alright so now that we have gone over a simple contact form along with all of the design settings available to you let's go ahead and look at an example of a free quote form to kind of get an idea of the more advanced settings available to you in the contact form module as you can see here I have a get a free quote form that I have built using the contact form module and I just wanted to show you this just to kind of give you an idea of the capabilities of your contact form so here you have a a name field you have an email address field and you also have the ability to enter a custom field here in this case I'm entering the company name so that I can capture this information and then I have a question how can we help you today with four choices now using conditional logic I am able to you know show different questions based on the response to this question here so for example if I choose website production you can see that two other questions pop up that are specific to this answer if I choose app development you'll see a different set of questions pop up and so on for each of these and then I can just continue to fill out my form and then click get a free quote let's go ahead and fill it in just to give an idea of what's going to happen when I press get quote and now I'm gonna press get quote button and once I'm done you'll see this message here thanks for contacting us now that we see how it works on the front end let's go ahead and take a look at the settings to see what it takes to build a forum like this now I'm back to my forum and I'm editing it using the visual builder if I hover over my contact form module and click on settings you'll see the Settings box pops up first thing you'll notice under the content tab is that I have a lot of fields entered already such as name email company a custom a few custom fields one called service art purpose web purpose video app platform and budget so these all represent the name of the individual fields that are represented in the actual content form here let's go ahead and take a look at some of these individual fields that I've added the first one is the name field if I go to my settings here you'll see that this is one of my defaults that are automatically added to your contact form within Divi so it's going to come with a field ID in this case its name and then the title is what the actual user sees within this placeholder here within your field let's go and check out some of these other fields and see how they work together the email field you can see has the email field ID as well as this title enter your email address the field option is set to the email field type which is specific to the email field so make sure and have that one selected if you're capturing email it's always a good idea to keep this email field required so that you'll know how to contact this person later on let's go back the company field this is a custom field that was created and I assigned the field ID to be company just a unique ID easy to remember and also gave the title into your company name I made this one an input field and I allowed you know I didn't put any restrictions on it and it's also required but actually I might want to just take that one out since it may not be necessary for me to know the company name for them to reach out to me let's go ahead and save that the next one is service now this one is given the field ID service as a reminder and the question is how can we help you today this is to ask them what type of service they are interested in hence the name service here so the field options include the type of field that it is and I've selected radio buttons now radio buttons as you can see are these buttons here that when I click on one would you know select the certain item there and to add your radio button options you can click on this add new icon here and you can customize and rearrange the order of your radio button options by dragging it and editing the text once you've done with all your selections it's a good idea to make it required since this form really hinges upon you answering this initial question there's no conditional logic for this question but there will be for the other ones let's go ahead and go back this next one is a custom field given the name art purpose because I'm really asking what kind of art direction do you need in other words what is the purpose this is also a radio button field type and I've given some answers for my user to select so what kind of art direction do you need if it's graphic design advertising branding or packaging I've set this one to required although it probably or may not be necessary but I think it's pretty important that I know this so I'm going to keep it required now this one does have conditional logic to enable conditional logic to toggle this enable option here - yes you also see that a couple of more options pop up here the first one is relation if I toggle on my little helper icon here you can see that it says choose whether any or all of the rules should be fulfilled so if I choose or leave the default to any if any of these rules are applied then this question or this field will be displayed if I choose all that would mean that all of these rules would need to be met in order to reveal this field since I only have one rule I'm just gonna leave it to any but you can kind of get an idea of how advanced you can make this form by choosing to add certain rules based on your users answers this first rule here is based on the answer to this question how can we help you today this corresponds to this first question over here in the form how can we help you today now basically what I'm saying is if that person if that person's answer to that question equals art-direction in other words if they selected art direction as the answer to that question then I am going to show this field which is what kind of art direction do you need so just to show you how that works if I go back in to my live form here and I select art direction you will see that the first question that pops up is what kind of art direction do you need that is how conditional logic works now let's go back and see our next field which is web purpose this is a custom field and it has the title what kind of website do you need so that's the question I want to ask based on their answer to a certain question this is also a radio button field type and this also has a conditional logic set to it it's been enabled and I left it to reveal that field if any of these rules are met and I only have one rule and that is if this answer to this question how can we help you today if that is equal to website production then I'm going to show this field which is what kind of website do you need going back to our live forum you can see if I select website production the option below changes or I should say the question below changes what kind of website do you need so you can see my conditional logic at work for this question let's go back I have a video field here which is basically asking another question on what device do you want the video shown and it's required and I also have conditional logic for this one as well it is again based on this question how can we help you today and if that is equal to video creation then I'm going to show this additional question just to see how this one works I'm gonna go ahead and select video creation you can see that the question below changes on what device do you want the video shown and then I can have my user answer that question as well going back the last one here is the app platform this is the question on what platform do you want the app developed this is also a radio button field type with some additional options that I want them to answer and also it's required the conditional logic just like the other three it's based on this question how can we help you today if that is equal to app development then I want to have this follow-up question revealed and as you can see if I select app development that question pops up below on what platform do you want the app developed all right let's go back let's go over this last input field here with the ID budget it's basically asking them if they have a budget in mind to let us know and it comes with the radio button options listed here for them to choose from it is required and the conditional logic for hit this one is a little bit unique in that it has one rule and that is if this answer to this question that we've been using how can we help you today if that answer to that question is not empty then go ahead and show this this input field option what this really means is if there is an answer at all which we know there must be because it is required let's go ahead and go back let's look at our example form here you'll notice that this last question if you have a budget in mind does show up on any of my answers that I select on this first question now that concludes our overview of the custom input fields for a free quote forum and also how the conditional logic works together to give you some unique user experiences you may also be wondering about how did I get some of this styling that I have here for example how did I get them all to be left aligned here there's a little trick to that I'm gonna exit out of my form here and I'm gonna go to the row see this contact form module is inside of this row but I've given a custom size to my row if I go to my row settings click on my design tab select spacing excuse me sizing and then I select use custom width what I did was I entered a custom width of foreigner' pixels which automatically adjusts all of my content to kind of be left aligned so if you're wondering how that was accomplished that's how if I go back to my default you'll see that it kind of spans the full width of my row and you know it's not you know as clean but it still looks okay but if you wanted to get that look you can shrink it up you may have to enter the custom value there and then you can see it all kind of line up and that's it that's our overview of the contact form module

Channel: Elegant Themes

Views: 171,409

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: y3NSTE6BSfo

Length: 28min 0sec (1680 seconds)

Published: Wed Dec 20 2017