Overview
Adding an icon inside a submit button enhances the visual appearance as well as user experience. Icons also provide visual cues making it easier for users to understand the purpose of the button. In this article, I will guide you through the step-by-step process for adding an icon to the submit button.
The same process can be followed for adding icons to the next and previous buttons as well.
Pre Requisites
In this article, we are exploring the no-code solution for adding an icon to the submit button. For this, we will need the following plugins installed and activated.
Steps to Add Font Awesome Icon to Gravity Forms Submit Button
- From your WordPress website’s backend navigate to Forms -> Booster.
- Select the form in which you want to add the icon.
- Now go to the Field Icons panel.
- Now look for the Submit button dropdown and select the icon which you want to apply. Once you select the icon then it will immediately preview in the selected form’s preview.
- After you have selected the icon of your choice then click on the Save button to make your changes live.
You can also check the full capabilities of field icons for gravity forms.
Steps to Style for Gravity Forms Submit Button Icon
You can customize the look of the icon using the built-in controls of the field icons addon as well as custom CSS. Here we will discuss both methods so that you can have full control over the design.
Styling Submit Button Icon using Field Icons
Under the Field Icons panel in Gravity Booster, you will get the following styling options
- Icon Color: This sets the color for the submit button as well as other icons in the form. It has a built-in color picker that supports hex, RGB, and HSL colors.
- Icon Size: This range slider controls the size of the icon. It can be used to make the icons small or large.
Styling Submit Button Icons using CSS
By using custom CSS you will get the option to add any type of CSS properties to the icon. Also with this option you can ensure that your changes only affect the submit button icons but not others. Follow the steps below to add custom CSS
- Go to Forms -> Booster from your website’s backend.
- Now go to the Styler panel and then click on the General Settings section.
- Here add the following CSS in the Custom CSS textarea field.
Now click on the Save button to make your changes live.
Code Explanation:
In the above code replace FORMID with your actual form ID.
With #gform_wrapper_FORMID .gform_footer button[type=”submit”] .stla-fontawesome-icon we are targeting the submit button which has a fontawesome icon. Then we have given it properties like color, font-size, padding, and margin. You can add any properties that you like.
0 Comments