This tutorial will show you how to add and customize a contact form on your website using the Divi Visual Builder.  This is a great module for contact pages and forms for lead generation.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version of this Divi Tutorial

__________________________________________________________________________________________________________________ Hello, this is Jimi Blevins. Today I’m going to walk you through the “Contact Form Module Using The Divi Visual Builder.” HowToAddContactForm The first thing you’re going to see in your “Contact Form Settings,” will be your different fields. i.e. “Name, Email, Phone,” and “Message.” You can use this to change the settings or any of the options for any of those particular fields. HowToAddContactForm2 So, let’s say I wanted to change my “Email” field, make sure that’s a “Required Field.” If I wanted to make this field full width, I can click “Make Full Width“. If I want to keep it half width, I can unclick “Make Full Width.” HowToAddContactForm3 I’ve also got a lot of “Design” elements for each specific field. If I want to make one field one color, another field another color, I can do that with the “Design” settings. I can also do it for each individual field. So, in my form, I’ve added “Name, Email, Phone Number,” and a “Message.” The default form doesn’t include a phone number. I wanted to put one in there to give you an idea that you can add or take away any field that you want to. HowToAddContactForm6 The next option is to “Display Captcha.” This is a security measure to ensure humans are filling out your form, not spam bots. HowToAddContactForm7 The second “Email” field, is the email address that you’re going to want your emails to go to when somebody fills out the form. So, a visitor comes your website, fills everything out, and hits the submit button. HowToAddContactForm8 This is the email address that all the information goes to so you can keep track of it.  (Add it to your CRM, your email program that kind of thing.) The “Title,” this is the title that’s going to display for you when you receive the form. You can call it “Contact Form.” It’s also going to be what it displays on the website. So, when someone comes to the website, they’re going to see a contact form and when you receive the email, it will say “Form Submission From Website,” and then the “Title” afterward. This way you can keep track if you’ve got three or four different contact forms, which ones are getting filled out. Now, the “Message Pattern,” is a little bit more involved. The way that this works is, you can either leave this field blank; which allows you to get the default settings (which will give you all the information) or you can format it a little bit like I’ve done. If you want the field in here you use the percentage marks and then the name or the ID of the field. HowToAddContactForm10 To double-check that these are correct, you can come up here, click on the settings, and it’s going to give you this “Field ID,” notice “Name,” is the first one. The reason I show this to you is, these are case sensitive! You’re going to want to make sure that if you have a capital N in your field ID, that you’re going to want to capital N in the word “Name” in the settings below the “Message Pattern.”   HowToAddContactForm9This is only if you’re customizing it like I have. I like my emails to be formatted so that the information is a little bit easier to take in. If you don’t format this, it kind of puts it all on one line, which is a little difficult to read. You can also change this, say you wanted to put it in CSV format, that kind of thing, you would edit that in the field below “Message Pattern.” So that when the email comes to you, you’ve got it formatted in the best way for you to receive it. It has “Enabled Redirect URL” feature, and a field here if I had like a thank you page that I wanted to send to. If I was doing a goal tracking on this-this,”Redirect URL” is where I would put that. HowToAddContactForm13 I can turn this option off, however, and put in a simple “Success Message,” “Thanks for signing up.” Something of that nature. HowToAddContactForm14 Now, the “Design” elements. HowToAddContactForm15 Again, these are pretty straightforward. I gave it kind of a light blue “Background Color” for the fields, and this does it for all the fields across the board. I’ll change the color around so you can have a see at what that looks like. Screen Shot 2017-04-07 at 3.52.35 PM I made these transparent, in case I’ve got an image behind, it will still show through with the form fields. (Something you might want to play with if you’re putting this together in a web page that’s got a photograph background.) There is the border radius on the input fields. “Input Border Radius.” You can have it be square, you can round them a little bit, make it look a little bit nicer. We can “Use Border” on our field elements if we want to. We can change “Border Color,” make them green, like a darker green border and make them pop out a little bit. HowToAddContactForm17 Change our “Title Font,” you can make it bold. “Title Font Size, Title Text Color, Title Letter Spacing, Title Line Height,” all the standard options that you can do for pretty much anything that you want.   HowToAddContactForm16Then, we’ve got “Border Width, Border Style,” and then here of course, if I want to use custom styles for my button I can click on “Use Custom Styles For Buttons.” HowToAddContactForm18 Then, I’ve got all the options that I want for my button as well. (Not going to change that right now but I wanted to show you that’s where you change those options if you want a custom button.) I’m going to go ahead and click off on this and hit “Save.” I’ve got the page pulled up in another window here to show you what it looks like in its final form. HowToAddContactForm19 The reason I’m doing this is because, as you know as you’re coding in the Visual Builder you get to see what it looks like, but it doesn’t actually function. Let’s say, Marty McFly is filling out our form, give him a fake phone number, and a quick message, “Love your tutorials Jimi! Keep up the good work,” and 2+2 I think is four. 😉 Then press “Submit.” HowToAddContactForm20   That’s going to show us our, “Thank you for signing up,” this is our “Success Message” that we send to them. Depending on what email program you use, will vary what it looks like. HowToAddContactForm21 If you want to format the data, it’s going to take a little bit of trial and error to get it looking perfect. That pretty much shows you the long and short of how to “Add A Contact Form Using The Divi Visual Builder.” Once again, I’m Jimi Blevins. If you have any questions, put them in the comments below and thank you so much for watching!

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!