Styling your Gravity Forms can be tricky. Here are some simple steps to be able to add columns and colors to your gravity form fields.
Hey, y’all. I’m Kori Ashton. It’s another exciting WordPress Wednesday.
We’re going to continue our series on Gravity Forms.
Hold on. You can probably hear me better if I actually use the darn microphone. Ha ha ha.
We’re going to continue our series on Gravity Forms. I’ve already done a basic install and a basic how to add a field. We’re going to go even more advanced today. We’re going to talk specifically about how to style your Gravity Forms because out of the box it looks nice, but your Theme could apply some weird wonkiness effects to it. And you have some potential to really get fancy with it and set it up in a better flow. We’re going to talk really briefly about my awesome sponsors that I have sitting here.
We’ve got, of course, our amazing partner in hosting, WP Engine. They offer incredible WordPress hosting. We’ve got WP Elevation. If you’re an entrepreneur using WordPress as a freelancer or in your business, please check out their tracks. You’re going to get inspired and find some really cool resources for you. And, of course, WP 101. You’ve got more WordPress tutorial videos, so you’ve got to get over there and check them out. They’re amazing.
All right. Let’s talk about it. Gravity Forms. Let’s see. I’m going to get rid of that. We’re talking about Gravity Forms and we’re moving on now to the second video in our series of 6. I’m going to do 6 videos. It’s crazy. We’re going to talk next about how to set up all of your notifications with some really cool, dynamic stuff. After that we’re going to be talking about conditional logic. [kaboom!] That’s cool.
We’re going to go into Add Ons and talk about all the different options that you can get for free. Throw in some Add Ons. And then we’re also going to talk about how to use it as some sort of a very minimal style store or, potentially, even a registration form. Something comparable to EventBrite. You guys could be using that here and not loosing all those fees. You can actually be using Gravity Forms to do stuff like that. So, stick around.
Be sure to click the subscribe button right down here so that you’re able to catch all of these videos every single week.
Moving into styling. How do we do it? In the last video, one of the things I didn’t show you was if you needed to reorder these, all you simply do is grab and drag and drop them, right. So, that’s a little bit of styling where you can drag and drop. Each individual field has options. You just click on your little arrow, open it up, and you can see some of the different options. There’s even an appearance tab where you can place different things. If you hover over these little question marks, they’ll give you a little bit more involved description of what this particular input field or option has available to you. I’m going to show you what this form looks like on our website.
You’ll see here Name, First name, Last name, Company Name, Title, Email, Phone. Let’s go here and you’re going to see First name, Last name, Company name, Your Title, Email, and Phone. I’m going to slide off screen so you can see this full-width area. I do have the style of my page set to full width, so you can see this form is really kind of ginormous. And we know … Let me click a refresh here because … Let’s click refresh … actually … Company Name is sitting across here full width. It’s kind of ridiculous. Hopefully nobody’s company name is that ginormous.
And then you’ve got Your Title, which is huge as well. What if we wanted to style these where potentially the Company Name would take up the same space as First, and maybe we could bring Your Title up here and have it in kind of a two-column setting just like First and Last name? How would we be able to do that? That’s actually something out of the box you can adjust with Gravity Forms. It’s just kind of extra that if you didn’t know, or if you didn’t do a whole lot of research, you didn’t know what to even call it, you probably wouldn’t be able to find it. It’s a little tricky. I’m going to walk you through that.
I want Company Name to be on the left side of the screen, and I want Your Title to slide up here and be sitting on the right side of the screen. How do we make that happen? I am going to open this up and I’m going to go to Appearance. I’m going to go to this Custom CSS Class. This is something that if you already know how to write nerd code and CSS and you really wanted to give this form a completely different look— a background color, or maybe this particular field (this Company Name) you wanted to give it some sort of stand out pop color, or anything you wanted to do to it— if you know how to write nerd code, you can manually go into your style sheet, write that nerd code, and then assign the class here. But, Gravity Forms actually has things assigned already. You just might not know about them.
We’re going to say “gf” for Gravity Form. And we’re going to say “left half.” You can see what I’m typing in there. gf (for Gravity Form), underscore, the word left, underscore, the word half. I’m going to zip that box back up. I’m going to come here to Your Title. Now, this one, under Appearance, I want it to go on the right side, correct? I’m going to say gf (for Gravity Forms) and then I’m going to assign right underscore half. And then I’m going to go ahead and click Update Form. Slide off the screen here for you. Come back to the front side of our website. I’m going to click refresh.
And now our Company Name is sitting here nice on the left side, Your Title is sitting here perfectly on the right side with a nice little description below it but I think this kind of opens up too much of a gap. What if we were to put it … You can put it above or below. It’s up to you. Or we can just remove it completely. Those options would be individually right here in this space. I typed that part in. We could either remove it or, if you wanted to put it above, you can choose the option for Above and it would place it directly above the input area. Pretty cool there, I know.
Let’s talk about what if we wanted to have a totally different color? Or maybe we want to put a background color, like I was saying earlier, and you don’t know? What if you don’t know CSS? How do you make that happen? There are actually all sorts of options for styling your Gravity Forms. Over in a premium version over here on CodeCanyon.com you can go through here and see all the different options add ons for Gravity Forms. One of the first ones that I found I like was this Gravity Forms Styler. It’s a little pricey—$33—but apparently, it does some really cool stuff. They’ve got a video preview here that you can click on and see exactly what all it does.
You can see that you can do all sorts of changes just with a drag and drop environment, and you don’t necessarily have to have coding capabilities. You’re able to change the color of text fields. The color of the background. How wide the boxes are. If they have a border around them. The font. All sorts of funness. So you can kind of play around with that for $33. Or just kind of sift through here with CodeCanyon and see what all is available for add ons.
There’s also, of course, free options. You can go through the plug-in directory and see all the different add-ons. The only thing that’s really costly initially is that first purchase of Gravity Forms because it’s a premium plug-in. If you’re wondering how to make more column options, and do other things that I’ve already mentioned in this tutorial, I’m going to put a link in the description box below. There’s this page here. Let me back up one link. I’ll put both of these links in the description box below. Gravity Forms has some pretty great documentation. Let me slide down just a little bit here. You’ll see it on their website. You can come here and you want to click “CSS Ready Classes.”
Clicking that link takes you into all sorts of examples of what you can be adding into this custom field class area. It gives you your left half, your right half (that’s for two columns). It gives you the option to do a middle third so that you can have 3 columns (one, two, three) and section things out that way. You can make them go inline so you can use this and kind of see what that plays around with. All sorts of different options here. This lines them up beautifully here for a 3-column list. That’s beautiful. You can do all sorts of fun stuff like that with these pre-made classes. I’m going to put that link in the description box below. The other thing I want to tell you before I let you go is one other setting that, if you miss this, this could actually have errors on your website or potential breaks.
Once you’ve already created your form and you see it on the front side of your website, if it looks a little wonky, or if things aren’t really looking exactly the way you want them to, you can come do a test and see … There is a Settings area underneath Forms. Go to Settings. This is not for the individual forms. Let me back up for a second.
Under every form you have a Settings. I don’t want you to go to individual forms. I need you to go to the super Settings area here that affects all of your Gravity Forms at once. If you go to this Settings area, I want you to see about this area right here. It says Output CSS and Output HTML5. You might just want to play around with these two settings. Set one to No. Go down. Click Save. And then refresh your page. I’m going to do that right now just to let you see that it kind of goes wonky, and it actually starts adding bullet points, which looks like an ordered list to my form. If your form looks like this, and you’re thinking, “Oh. Man. That looks horribly wrong.” Maybe you need to go into your settings here and check Yes, and allow the output CSS to be there so that when I come back and click refresh, now it’s pretty again. It’s pretty. Things aren’t too wonky there. That’s some ideas there.
You can also play around with this setting here with HTML5 and see how that affects things. You might have to do some other settings as well, and you’ll want to follow the author’s instructions if you do purchase one of these forms. I believe this one requires that you enable Ajax for the styling to work. Just a heads up on that. Anyway. I hope this was very helpful to you. If you have questions, please go ahead and comment in the box below.
Next week we are moving on to how to set up your notifications because you absolutely want people—as soon as they click submit—you want people to get a notification in their in box, and you want to receive notification as well. There are possibilities. Get this, you guys. There are possibilities to send notifications to different people on your team, depending on what the choices were inside the drop down.
There are also opportunities to automatically send maybe a PDF. So, let’s say you’re offering, “Hey. If you want to sign up today for this, you instantly get a free PDF on how to do X, Y and Z.” Right? You create that PDF, add it as an attachment inside that notification area, and [snap] it goes out without you having to mess with it one bit. Isn’t that incredible? I’ll teach you how to do that next WordPress Wednesday.
Be sure to subscribe right here. See you then. Bye bye, y’all.
