Divi Theme Contact Form With File Upload Button Using Caldera Forms. Welcome to another Divi video this is Jamie from system 22 and web-design-and-tech-tips.com – Well today we’re going to put this little contact form here that has a file upload button. Divi’s got a great little contact form builder, but it does actually not have a file upload button option. You can get around this with a free plugin called Caldera Forms, which is a great free email plugin. So, let’s get started!
To get this plugin let’s go to our plugins page. I’ve already got mine installed and activated but if you didn’t just hit that ‘add new’. In the ‘search plugins’, just write caldera c-a-l-d-e-r-a and hit enter. And there it is; ‘Caldera forms more than contact form’. Like I said it’s absolutely free. If you haven’t got it installed, you’ll have a little button there that says ‘install now’ like this one. Just hit that one, when it’s installed go ahead and hit the ‘activate’ button.
Once it’s activated, you’re going to see this little entry in your left-hand menu here. Let’s click on it, and let’s just add a new form. I’ll use one of their little templates here for a contact form, and we’ll call it file upload. When you’re happy let’s create the form.
I’m not going to go through all the caldera forms setting here, I’m simply going to set this up very quickly. We’ll go through all their settings in a different video! All right, well, let’s get rid of a few of these and put in our own, this first one let’s say contact us. I’m just going to hit the little pencil icon. There, there’s the heading in between the h2 tags, change it to what you will, make sure you don’t lop off those little pointy brackets there, (< >) and let’s get rid of this row and that row as well. We’ll put in our own, I just want one that asks them for their name. I’m going to add a new field and drag it down there. I want a single line text and I’m just going to say name, and we’ll call it name. We’ll make it required and then I’m simply going to pull it up above my comment there.
I also want to add a file upload button which is the most important thing, so I’m going to hit the add field again and there’s the file. Here’s a basic file uploader that’s what I’ll use today. And we’ll give it a name. I don’t want to make it required, because, if they haven’t got anything to upload, the form won’t send. So, we’re happy with that let’s save the form.
That’s red alert is telling us we’ve got an issue here. Let’s have a look at what this issue is? I’ll put a subject in here and we will make that required too, so we’ve got contact us, subject, name, text area, send message and file upload button. I am going to put the file upload above our button there. Okay let’s save the form.
Now if we look in the email section, it’s going to go to the default email. You can put any email you want in there. Let’s go to our form settings and there’s our short code. I’m going to copy this short code and let’s add a new page. We’ll call it file upload; we’ll use the Divi builder. I’m going to build from scratch, I’m going to have one row, one column. You can use a code module, or you can use a text module if you want to. Let’s paste our short code in there that we just copied, and there’s our form with file upload button.
Really easy to do! Now I might want to style my send button to be more like the other buttons on my site here, so we can do that with a bit of CSS. Let’s save our changes here, save draft or publish page, and we’ll exit the visual builder.
Okay to style our button, I’m using google chrome here with the great inspector tools, most browsers have this nowadays, but if yours doesn’t, chrome is a free download. So, I’m going to right click and inspect this button, we’re going to make it a bit more like our other buttons on our site here. I’m going to right click and inspect which will bring up the inspector tools.
There’s our caldera grid button default, so let’s see what we want to do? Color is the actual color of the text there. I’ve got a free color picker up here; I’m just going to get the color for this button. I’m going to paste it in the background color here. I’m simply left clicking to highlight it, pasting in the value. I need a hashtag in front of that hex code, as you can see that’s turned that purple now. I want the writing to be white which is #fff, or you can just write in ‘white’ if you want to, but #fff is the hex code. Border color I’m going to make exactly the same as the button color.
Now, I want my button to be a little fatter, so let’s see padding; 15px on the top, and 20px left and right. As you can see, that’s made it a lot fatter, but the text itself needs to be a bit bigger to sort of match our one up above; font size, let’s make it 20px, I think that’s pretty much what I’ve got up there, that looks about right, and we’ve got some little rounded corners on there.
So, let’s get those corners a bit more rounded, border radius, let’s do it sort of five pixels. That works, but of course, what we’ve got here is non-destructive, so, if I refresh the page, this is all going to disappear, it’s going to revert back to how it was. And so, I’m going to copy from the closing curly bracket, all the way to the first dot of the class name there. Ctrl c, now we need to go to our theme customizer. To get to your customizer just go down to appearance, or dashboard, appearance, and then customize, or you can go down to Divi and custom CSS on the bottom of the general tab, and it will bring us to our additional CSS field right here. This is where we write our code.
Giving it a title makes things so much easier to find if you write a lot of CSS. The title is forward slash, star, star, forward slash; anything written between will not be read as code. Down below here we can paste that style that we just copied from our inspector; there it is right there. Now if I publish this and we go back to our page. When I refresh that should remain the same color.
Great! That worked fantastically. Now we’re kind of stuck with the color of the choose file button there, we’ll just leave that one as is it’s not really editable with CSS.
I want this sort of blue color for my hover state for my button, and I know because I’ve set this as my default button color, if I go to my customizer, and we go back, here’s the buttons. There’s the color for the hover style, so I’m going to copy that. I’m going to go back to my customizer. I’m just going to pop this color in here so we’ve got it. In a moment I’m going to copy this whole thing from the dot, to the closing bracket, again I’m going to drop down a couple, paste it in there, now, just after the t of default there, I’m going to put a colon, no space after the t, and a colon, then the word hover, no space after the colon. Color can say the same, I’ll just copy this color. I’m going to replace our background color with this one, and the border color. Now the text color has not changed, so we can get rid of that, in fact, all of these things have not changed here, so we can get rid of that too, just publish this, and see if this has worked for us. Let’s go back to our file upload and refresh
Divi Theme Contact Form With File Upload Button Using Caldera Forms. So, there is, how to add a form with file upload button using the caldera forms, and then style it so that it fits in with the theme of your website. I hope you’ve enjoyed this today and found it useful. Thanks for watching have a great day.