Wanted to share this gist to style the gravity forms submit input with all of you

Hey guys, I’m sure there are some of you that have wondered if you could get your contact forms to look like they fit in with the rest of the site’s branding you created. For example, you may want to make your input look like this:
branded-button.png

But it actually looks like this:
button.png

I had this specific issue, and while researching it, I came across this example filter provided at the Gravity Forms Documentation site, I tested it out by replacing the code with some of the lightly edited output html from a previously designed button in PRO, and added some extra classes inline and extra styles in my global css file targeting it. Then I added this snippet to my functions.php file in my child theme:

add_filter( 'gform_submit_button_1', 'form_submit_button', 10, 2 );
    function form_submit_button( $button, $form ) {
    return "
    <button class='button gform_button e21-23 x-anchor x-anchor-button' id='gform_submit_button_{$form['id']}'    tabindex='0' style='outline: currentcolor none medium;'> 
        <span class='x-anchor-content'>
            <span class='x-graphic' aria-hidden='true'> 
                <i class='x-icon x-graphic-icon x-graphic-primary' aria-hidden='true' data-x-icon-s='&#xf105;'></i> 
            </span> 
           <span class='x-anchor-text'>Submit</span>
       </span>
    </button>
  ";
}

And it worked!

Obviously, there may be better examples of how to do this out there, but I am personally saving this as a gist for reuse later.

So, I’m curious. What other code snippets do you like to use on your PRO projects, and what do they do?

2 Likes

Thank you buddy :slight_smile: What do you think about Ninja Forms?

@Ravi, I’ve used it a few times and I liked it. It’s definitely very flexible and easy to use.

It has been awhile since I’ve used it in a project though.

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