ADDING FONT ICONS TO GRAVITY FORMS SUBMIT BUTTON
(To match Beaver Builder buttons and work with 3rd party BB addon packs)
* This video assumes your theme has Font Awesome loaded.
Apologies - in the rush to do this video I did not see some of the php code was missing from this page. It's now added back!
THE PROBLEM
- Gravity Forms doesn't allow you to add a font icon directly to "submit" button.
- You can't add an icon with CSS because the button uses an INPUT tag which a pseudo element can't be apply to.
MY OLD SOLUTION
Was to take the php snippet from Gravity Form knowledge base that changes the input to a button and then add CSS styling to that. That works fine...
But recently for speed I've been using modules from PowerPack and the Ultimate Addon for Beaver Builder as well as Styler for Gravity Forms and these all style buttons to the Gravity Forms defaults.
MY NEW FLEXIBLE SOLUTION
Is to keep the button as it is so 3rd party plugins can still style it and add a span tag that can be used to add the icon.
PHP
Add the snippet below to your child theme's function.php file. Note since WordPress 4.9 I add this in the backend of WordPress via Appearance > Editor. It's seriously good now and saves you from breaking sites.
// ADDS A SPAN TAG AFTER THE GRAVITY FORMS BUTTON
// aria-hidden is added for accessibility (hides the icon from screen readers)
add_filter( 'gform_submit_button', 'dw_add_span_tags', 10, 2 );
function dw_add_span_tags ( $button, $form ) {
return $button .= "<span aria-hidden='true'></span>";
}
CSS
Add this to wherever you add CSS. I tend to use the styles.css for global CSS like this.
/*POSITIONS ICON ADDED TO GRAVITY FORMS SUBMIT BUTTONS
* 1. Adjust the margin-left to bring the icon on the button
* 2. Font-size adjust the size of the icon
* 3. z-index prevens the icon disappearing on submissions
* */
.gform_wrapper FORM .gform_footer SPAN:after
{
color: #FFFFFF;
content: "f105";
font-family: FontAwesome;
font-size: 20px;
z-index: 100;
margin-left: -70px;
}
/*POSITIONS GRAVITY FORMS SUBMIT BUTTONS TEXT TO MATCH BEAVER BUILDER'S OFF CENTRE
* 1. Adjust the padding-left */
BODY #gform_wrapper_1 .gform_footer INPUT[type=submit]
{
text-align: left;
padding-left: 75px;
}
Front End
This is how it appears on the front end. Now you should be able to style the button with 3rd party addons.
ADDING FONT ICONS
I used the Font Awesome library here and assumed this has been added to the theme you are using such as the Beaver Builder theme, GeneratePress, Dynamik Website Builder
