Have you wanted to make your forms look nicer by adding icons in the input boxes? Here’s how to do it with Gravity Forms:
1) Upload your icons to the site. I prefer to use ftp and upload the icons to the image folder of my theme so clients won’t delete them by mistake, but you can also upload them directly to your Media Library. Where ever you put them, be sure you know their link URL.
2) Create your form in Gravity Forms. If you already have the form set up, even better! Then, for each field, choose the Advanced tab and near the bottom, create your CSS Class Name. In this example, I have called it “name” because that is what I’m trying to collect in this field. For the next ones I have used “phone” and “email”.
3) Next, go to the front end of your site where the form is displayed and use Firebug or Inspect Element to find out the field id, as I have done here. (Click on the image below to get a better look.) If you don’t know how to use Firebug, please see my presentation here: Using Firebug. You’ll see that for my first field, the Name field, Gravity Forms has automatically given the li(list item) an id of #field_2_1. Next I have added my CSS Class Name that I added in the Gravity Form. I know what to look for since I added this myself, but you can also see it in Firebug right after the li id.
4) Now, in your style.css file (found under Appearance > Editor), you want to add the part that you see in the right hand side of my Firebug window. (You won’t see this in your window because you have not added it yet.) So you will be adding this code (note- you need to make it match the id and CSS class of YOUR form):
li#field_2_1.name input {
background: url("/wp-content/themes/minimum-pro/images/icons/name.png") no-repeat scroll 0 1px transparent;
display: block;
padding-left: 70px;
}
So, the first part li#field_2_1 -that I got from Firebug. Gravity Forms automatically names each field. Your field may be named differently.
The .name part – that is CSS Name I added in Gravity Forms.
Finally, the input part – that you can see in Firebug. That will always be the same because that is the part of the form where we want the icon to go.
You will see that I have made the icon a background image. (That’s where you use the link to your image we talked about before.)
You want to make sure you add the display:block.
And then finally, I added the padding-left so that the words would be moved over enough to allow room for the image to show.
So, you will have to create a separate one of these for each icon you plan to use. In this case, I created three of them. Here is what my style.css file looks like:
If I didn’t answer all your questions, please let me know in the comments below and I’ll try to update my instructions. Happy coding!
Breezy says
Hi,
This article is really helpful. Thank you. But when I tried to do it I was able to add the icon on the left side but lost the grey background of the field.
Is there a way to get the icon on the grey background field?
Thank you,
Breezy
Laura Hartwig says
Hi Breezy, Glad you liked the article. A link to your site would be helpful to see what’s going on. Is the icon you used transparent? If not, the background of the image itself could be blocking the background. Hard to say without seeing your site. Good luck with this!
Breezy says
Hi Laura,
Thanks for the reply. I’m still doing some tests on the site. There should be 2 forms in the site the 1st one is built in with the theme. It is the look I wanted to achieve with Gravity Form but with different labels/placeholders. I’ve applied your tutorial in only one part of the form below – Email. The icon I’ve used is transparent.
Thank you,
Breezy
Laura Hartwig says
Hi Breezy, it looks like you just need to add in the background color:
li#field_1_2.email input {
background: url(“http://breezynotes.com/wp-content/uploads/2014/12/Email.png”) no-repeat scroll 0 1px #f2f2f2;
padding-left: 70px;
}
Hope that works for you. Your site is looking great, by the way!
Diane says
Is there a way to use font awesome icons instead if they are already installed on our website?
Laura Hartwig says
I haven’t tried that and I don’t have a site to test it on right now, but have you tried using the font awesome code in the placeholder field? Something like this:
?
Maria says
Hi Breezy
Thank you very much for the tutorial.
Do you know if it is possible to add an icon in the file uploader. I would like to place an upload icon above the file upload button.
Bedst regards
Maria
Laura Hartwig says
Hi Maria,
So you want to put the icon ABOVE the file uploader instead of WITHIN the input area like my tutorial, is that correct? If so, have you tried something like adding an HTML element above the file input and just putting your image code there? You could probably use a little CSS to move the image exactly where you want it. If this doesn’t help, I would need a little more info, like the url where your form is and a pic or better description of exactly what you’re looking for. Good luck!
Ed says
Hi. I guess my question is similar to the one above. I am looking to to add a helper ‘?’ either at the end of the title for the field or at the end of the field box which the brings up a modal window of additional explanation text when hovered over. Exactly like Gravity Forms has in the admin panel but instead for the user filling the form. How do I go about targeting this area? My form has many conditional logic fields so I need it tied to the fields that get revealed rather than in a fixed column outside of the form area. I will try it out with the icons inside the field to create the modal with your tutorial first. Thanks
Laura Hartwig says
Sorry, I can’t be much help here, but it sounds like you need some javascript. Please let us know if you figure out a solution.
Elke F. says
This is excellent. However if you already have the id, you don’t really need to add the class.