• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / Apply Bootstrap Classes to Gravity Forms Button

Apply Bootstrap Classes to Gravity Forms Button

Last updated on August 9, 2018 by Sal Ferrarello

When working on a project, using Gravity Forms and Bootstrap, I wanted to style the buttons with Bootstrap.

This code applies the Bootstrap Classes to the Gravity Forms submit button.

add_filter( 'gform_submit_button', 'fe_gravity_forms_btn_classes', 10, 2 );

/**
 * Replace Gravity Forms button classes with Bootstrap button classes.
 */
function fe_gravity_forms_btn_classes( $button, $form ) {
    return str_replace( 'gform_button button', 'btn btn-primary', $button );
}

For a different approach, see Jay Hoffman’s post on Using Gravity Forms with Bootstrap Styles. Instead of adding the Bootstrap classes he uses CSS (or Sass) to target the Gravity Forms class and apply the styles. Jay’s work has the advantage of applying the Bootstrap styles for the entire form, not just the submit button.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Draft, Programming, Solution Tagged With: Bootstrap, Gravity Forms, WordPress Plugin

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in