You can use images inside of Gravity Forms with ease! Check out this step-by-step video on adding in cool images for options in your WordPress website.
Kori’s Gravity Form Playlist | Gravity Forms CSS Styling | Royalty-Free Stock Images
Full Video Transcript
Hey y’all! Welcome to another WordPress Wednesday! My name is Kori Ashton here at WebTegrity in San Antonio, Texas. You have found a YouTube channel solely dedicated to all things WordPress. Every single Wednesday I’m producing some sort of video just like this to help you improve your online marketing, totally for free! Be sure to subscribe to our YouTube channel. If you watch me you also know that I love Gravity Forms. I have an entire playlist here on our YouTube channel specifically dedicated to all things Gravity Forms. I’ll put the link to that in the description box below. Be sure to check that out. Super incredible, easy fun tips just like the one you’re about to learn today.
How do you actually add an image into a Gravity Form so that people could possibly choose from images?
I have a really cool example here for you. Who knew that huge names (well I knew but did you know that excuse names) like Petco uses WordPress? They sure do! This is one of their websites for their Petco Foundation for their charitable giving. I want you to check out when you click ‘donate’. You go over here to this really cool process that you can choose from. “I want to donate today.” As you scroll down, you have an option to do monthly or one-time giving. Then they’ve got these images sitting in here. Well, I happen to know that this is a Gravity Form that makes this whole process. I’m going to show you kind of a way to make this.
Let’s do it! My example though is going to be to have adoption dogs. I want to adopt or have a form where you can choose different dogs to adopt from, but I want the pictures to be there so you fall in love with them. I’ve gone over to Unsplash. I don’t know if y’all are familiar with this website, but it’s royalty free stock images that you can use. I grabbed a couple of dog pictures here and I have uploaded them to my media library. That’s your first step – you need to be sure to have the images ready that you want to use inside of the form. Obviously, Gravity Forms is a premium plugin (you have to pay to use it.) Now, I’ve already created my form for people to fill out their information here. I want you to see right now what this form looks like. Click, ‘preview’ so you can just see right now that they’ve got a couple of fields that they can fill out. This is really boring and if I’m wanting to excite somebody about doing something (like adopting these dogs,) how do I get them excited right here on this form?
Check this out y’all. Super easy little nerd code, but super simple to do. Here we go.
Inside of the form itself if I want to have an option that they can only choose one out of however many I put there; I can do ‘radio buttons’. If I wanted them to choose multiple options inside of my selections; I could choose ‘checkboxes’. Right now I’m going to do ‘radio buttons.’ I’m going to add this to the top of my list. You can (of course) put it anywhere in the order that you wanted to, but for this example, I’m just going to put it up here. I’m going to open up the drawer and I’m going to type in here, “Select Your New Best Friend.” That’s now my instructions. Here are the options that people can choose from. Right now it just looks like radio buttons.
Of course, I can have a previously selected one if I wanted to, but I want to have images sitting here. Here’s how you do that. Remember I said we need to be sure to have them in our library. I’m going to go over here and I’m going to grab my first image. You want to grab this file name. Once you upload it to your media library you now have a URL of where that file lives on your server. I’m going to copy that (I copy that on my clipboard.) I’m going to come back over to my form. Here’s the little bit of nerd code that you have to write in. If you just put that in there right now as it is (copied and pasted it,) this is how it would view. That’s just nerd code sitting there and that doesn’t work. You have to type a little bit of nerd code around it. You do: <img src=”filename.jpg” />.
Check that out. There’s our little dog sitting right there! How cool is that?
This is what the person sees on the front side but once they select this, I don’t know as the owner of this site exactly who they chose. You can also do this. I’m going to click, ‘show values’. Instead of it coming to me saying, “hey they selected our first choice,” I actually want to know exactly who they selected. I’m going to type in the name of the dog. “Sammy” is who they selected. Let’s do the next one. Let’s go back to our ‘media library’ and I’m going to grab the file path name here. Copy it to my clipboard. That’s the two of them. Paste it in there. I’m going to type in, “Jack.” That’s kind of what we’re going to do here. Just keep going through grabbing each one of them – copying the path. This is Lily. We’re going to do one more here (just for the sake of
We’re going to do one more here (just for the sake of kind of just showing you the process.) Copy that onto my clipboard and this is, “Pee-wee”. Of course, it is! There are four beautiful dogs that are available for adoption. I’m going to click, ‘update form’ and let you see now what this looks like on the front side of things. Let’s preview it. Here are dogs perfectly and if I wanted to choose one, you see the ‘radio button’ highlights as I click on the image itself.
How cool is that y’all? Oh, my word!
What if we wanted the names in here too? What if they didn’t know if this is Sammy and this is Jack? You can add that. What’s cool about Gravity Forms is these lines are nerd code ready. The front of our image (if I wanted to put the name up above) – I can say, “Sammy” and then I can just put in a break there. Look at this – the name and then the image. You can do that all the way down the line here:
Jack <br> (which is the line break) and Lily <br> and then Peewee is our next dog here. Now you can see their names up above them. I’m going to update the form and let you preview it again. Now let me click refresh.
Now, we have Sammy, Jack, Lily and Peewee. That looks great, huh?
I’m going to show you one last thing before you go, because this is super cool if you didn’t know this is available. This is about to blow your mind! Gravity Forms actually has CSS ready classes already inside of their stylesheet for you. If you didn’t know you can do this. You can break things into three columns, two columns, four columns; whatever you want, they’ve got it preset here.
I’m going to show you (just really quickly) what I’m talking about.
If I wanted these dogs to be here (like stretched across in three columns) or because I have four I can say ‘two columns.’ You can actually add one little line of nerd code. I’m going to open up the drawer for the one area I want to add in two columns. I’m going to go to this tab for ‘Appearance’ and inside of the custom CSS I’m going to type: gf_list_2col – I’m going to click, ‘update’.
How I knew that, is over here. They’ve got a whole whole list of different options. This is for columns, this is for in line items, this is for a list of items so you can break them into sections like this.
Let me show you what this looks like now as I click, ‘refresh.’ Now they come in here in these two columns. So super cool, pretty amazing, pretty fun stuff !
I’ll put the link to that the CSS for gravity form in the description box below as well.
If you had fun with it, put a comment on the thread here. I’d love to hear from you and see how you’re using images inside of your Gravity Forms.
I will see you next WordPress Wednesday. Bye y’all!
Find more tutorials on Kori’s blog
