Hey, y'all. Welcome to another WordPress Wednesday.
My name is Kori Ashton, here at WebTegrity in San Antonio, Texas and 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 for that in the description box below, so 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 can 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 huge names like
PetCo, use WordPress. Well, 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, right?
Then, they've got these images sitting in here and I happen to know that this is a gravity form that makes this
whole process.
I'm gonna show you, a way to make this. Let's do it, alright?
My example is going to be to have adoption dogs. I want to have a form where you can choose different dogs to
adopt from. I want the pictures to be there so that you fall in love with them. So, I've gone over to Unsplash.
I don't know if you guys are familiar with this website; but, it's royalty free stock images that you can use and 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, ok?
Obviously, Gravity Forms is a premium plugin and you have to pay to use it.
I've already created a form for people to fill out their information here and I want you to see what this form looks like.
I'm going to hit "Preview". You can see that they've got a couple of fields that they can fill out.
This is really boring and if I'm wanted to excite someone about doing something, like adopting these dogs...
How do I get them excited right here on this form?
Check this out, y'all. It's super easy. A little bit of nerd code but, it's super simple to do.
Here we go. Inside the form itself, if I want to have an option that they can only choose one of our however many I put there,
I can do radio buttons. If I want to choose multiple options inside of my selections, I could use check boxes.
For right now I'm going to do radio buttons. I'm going to add this to top of my list.
You can 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".
So that's now my instructions.
Here are the options that people can choose from and 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 the file name. So, that's this. 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 copied that onto my clipboard.
I'm going to come back over to my form.
Here's the little bit of nerd code that you need to write in. If you just put that in there as it is. Copy and pasted, this is how it would view.
That's just nerd code sitting there. That doesn't work.
You have to type in a little bit of nerd code around it. You do with an open angle bracket. <
The letters "IMG" for image or "c" for source
equals = open quotes "
Then, you're going to paste in that file name.
End quotes " and end angle bracket >
So, let me scroll down so that you can see this.
End quote and end angle bracket.
That closes your nerd code and check that out. There's our little dog sitting right here. How cool is that?
Okay, so this is what the person sees on the front side, but once they select this
I don't know as the owner this site exactly who they chose, so you can also do this
I'm going to click "Show Values" and instead of it coming to me and saying "Hey, they selected our first choice"
I actually know exactly who they selected, so 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. I'm going to grab the file path name here and copy it onto my clipboard...
open angle bracket, imgsrc
equal, open quotes (that's the two of them)
paste in there, end quotes and end angle bracket
I'm going to type in "Jack".
That's kind of what we're going to do here. Just keep going through and grabbing each one of them, copying the path.
"img"...and this is "Lily".
We're going to do one more here, just for the sake of showing you the process.
Copy that onto my clipboard. "img" "scr" equals...and this is "Pee Wee", of course it is right, yeah.
There are our four beautiful dogs that are available now for adoption.
I am going to click "Update" the form and let you see now what this looks like on the front side of things.
Let's preview it.
Here are our dogs, perfectly. If I wanted to choose one the radio button highlights as I click on the image itself.
How cool is that, y'all?
What if we wanted to names in here too? What if they didn't know that this is Sammy and this is Jack.
You can add that too. What's cool about Gravity Forms is these lines are nerd code ready.
At the front of our image, if I wanted to put the name up above, I could say "Sammy" and I could just put
in a break there and look at that. The name and then the image and you can do that all the way down the line.
"Jack" and then the "br" which is the line break and "Lilly" "br"
It's angle bracked "br" and then angle bracket.
"Pee Wee" is our next dog here. So now you can see their names up above them.
I'm going to update the form and let you preview it again and I'm going to click refresh.
Now we have Sammy, Jack, Lilly and Pee Wee.
That look great, huh?
I'm gonna show you one last thing before you go because this is super cool and if you didn't know this was
available, this is about to blow your mind.
Gravity Forms has CSS ready classes already inside of thier style sheet for you.
If you didn't know you could do this, you can break things into three columns, four columns or whatever
you want. They've got it preset here.
I'm going to show you what I'm talking about.
If I wanted these dogs to be stretched across in three columns or (because I have four) I can say two columns...
You can add one little line of nerd code. I'm going to open up the drawer for the one area I want to add
into colums.
I'm going to go to this tab for "Appearance" and inside of the custom CSS I'm going to type "gf" for
Gravity Form.
I'm going to type "list" and we want it in two columns. I'm going to click "Update".
How I knew that is over here they've got a whole list of different options.
This is for columns, this is for inline items.
This is for a list of items. You can break them into section like this.
Let me show you what this looks like now as I click refresh. See now they come in these two columns.
So, super cool. Pretty amazing. Pretty fun stuff.
I'll put the link to the css for Gravity Forms in the description box below.
If you had fun with this, put a comment in this thread.
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.