Icon for the submit button

Hello,

Is there a way to add an icon to the submit button?

I hope you can help:)

Hi Olga. There is no way to add an icon to the submit button currently (like a font awesome icon) but you can replace the button with an image if you like, and create a button that looks the way you want. If you want to do that, you can switch the Submit button from Text to Image on the Form Settings. It looks like this:

When you select image, provide the full URL to the image, and that will be used for the submit button, rather than your text. If you have any other questions, please let us know.

Hi Chris,

Yes, I wanted a more modern look like a font awesome icon with hover effect etc.

Image is an ok solution, but looks static:)

thank you,
Olga

Fontawesome is not currently supported so I think the next best thing will be to use an image. You can apply a hover style to make it more or less opaque when you hover over it. Once you have an image button online, share the URL where we can see it if you want to apply some styles to the button. Thank you.

Hi Olga,

There is one other solution you could perhaps try and that’s adding an image icon to the non-image button using CSS. You can adjust the text alignment and/or padding to create space for the icon, then add the icon as a non-repeating background image and align it to appear in the desired spot. You can also animate everything using the :hover selector.

I should perhaps mention as a disclaimer that I just thought this up - I haven’t actually done it before. But it could well work! :slightly_smiling_face:

I actually went ahead and tried to achieve this on one of my own forms - but failed dismally!

Chris, is there something in Gravity Forms’ CSS that prevents me from applying a background CSS property to the button?

I just came across this, which might enable you to add a FontAwesome icon to your buttons.

1 Like

Hi Phil. No, there is nothing to prevent that. It’s just not as easy as adding the fa class to a link, for example. There’s no inherent support, so it needs a little bit different approach. I messed with it a little bit but could only get the icon before the button. I’m sure something could be done to make it work. I’d like to see what you come up with.

1 Like

Hi Chris,

I’ll try again and let you know if I manage to come up with something.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.