Using MaxButtons with Gravity Forms

If you’ve used Gravity Forms, you know that there’s a standard “Submit” button for every form. The question has come up several times regarding how to use MaxButtons Pro or MaxButtons as that submit form.

On one side, it’s very easy to get your maxbutton to become that submit button.

Making MaxButtons Show Up

From the Gravity Forms Documentation we can use a filter: “This filter is executed when the form is displayed and can be used to completely change the form button tag (i.e. <input type=”submit”>).”

<?php
// filter the Gravity Forms button type
add_filter("gform_submit_button", "form_submit_button", 10, 2);
function form_submit_button($button, $form){
    return "<button class='button' id='gform_submit_button_{$form["id"]}'><span>Submit</span></button>";
}
?>

You could place this in your functions.php file but be sure to swap out a few things.

For the return you’d want to switch to:

//this
return "<button class='button' id='gform_submit_button_{$form["id"]}'><span>Submit</span></button>";

//to this
return do_shortcode('GRADIENTS');
//swap out your id for the button id you'd like to use

The filter above for the submit button will give you the submit button on each and every page where the form exists. If you want to make it more specific to only one form, just add in the number at the end so:

// this 
add_filter("gform_submit_button", "form_submit_button", 10, 2);

// to this
add_filter("gform_submit_button_5", "form_submit_button", 10, 2);

That would directly target the form with an ID of 5.

Making MaxButtons Submit the Gravity Form

The button should now be showing in your form instead of the standard submit button. If you click the button though, it will go wherever you’ve indicated in the URL. For best results, I leave the URL blank for my submit buttons.

If the URL is blank and you click it still won’t do anything. To get it to submit the form we’ll need a tiny bit of jQuery magic.

Depending on how your theme uses jQuery you may need to start your bits with ‘jQuery’ or it may just need ‘$’. I’ve included both in the example below.

jQuery('.maxbutton-2').on('click', function(e) {
  jQuery('#gform_5').trigger('submit');
});

// or 

$('.maxbutton-2').on('click', function(e) {
  $('#gform_5').trigger('submit');
});

The above code would go in your main JavaScript file or in your footer wrapped in script tags.

In the snippet above we indicate the button ID, in this case 2, and say “upon clicking maxbutton with ID 2, trigger the Gravity Form with ID 5.” Again, the ID will depend on the ID of your form and you’d want to make sure it’s consistent between the filter and the jQuery snippet.

From there you should be good to go. If you have issues or a better way to accomplish this task, post it in the comments below.