Converting the Gravity Forms next, previous and submit inputs to buttons

Last time I covered Removing the Gravity Forms submit button, this time I'm going to show you how you can use the same gform_submit_button hook along with two new hooks, gform_next_button and gform_previous_button, to change the <input> element to a <button> element with an addtional <span> element to contain the label.

Let's start by taking a look at what the HTML for the average next, previous and submit buttons look like:

<input type='button' id='gform_next_button_245_1' class='button gform_next_button' value='Next' tabindex='2' onclick='jQuery("#gform_target_page_number_245").val("2"); jQuery("#gform_245").trigger("submit",[true]); '/>
<input type='button' id='gform_previous_button_245_4' class='button gform_previous_button' value='Previous' tabindex='5' onclick='jQuery("#gform_target_page_number_245").val("1"); jQuery("#gform_245").trigger("submit",[true]); '/>
<input type='submit' id='gform_submit_button_245' class='button gform_button' value='Submit' tabindex='8' onclick='if(window["gf_submitting_245"]){return false;}  if( !jQuery("#gform_245")[0].checkValidity || jQuery("#gform_245")[0].checkValidity()){window["gf_submitting_245"]=true;} '/>

Notice the tabindex and onclick attributes, now here's the example from the documentation showing how you can change just the submit button:

// 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>";

By using the above example you are losing some of the attributes, the onclick attribute is used to prevent duplicate form submissions and for next and previous buttons it's also responsible for actually moving from one page to another so ideally we want to keep that.

So, how can we improve on the above example so it keeps all the important attributes we need while also making it universal so it can handle all three button types, and for bonus points use whatever label you assign to the next, previous and submit buttons in the form editor. Here's the code, you would add it to your theme's functions.php file or custom functionality plugin, you don't need the <?php from line 1.

Now I bet you're wondering what that gets you, well here's what the HTML for the new next, previous and submit buttons would look like:

<button type="button" id="gform_next_button_245_1" class="button gform_next_button" tabindex="2" onclick='jQuery("#gform_target_page_number_245").val("2"); jQuery("#gform_245").trigger("submit",[true]); '><span>Next</span></button>
<button type="button" id="gform_previous_button_245_4" class="button gform_previous_button" tabindex="5" onclick='jQuery("#gform_target_page_number_245").val("1"); jQuery("#gform_245").trigger("submit",[true]); '><span>Previous</span></button>
<button type="submit" id="gform_submit_button_245" class="button gform_button" tabindex="8" onclick='if(window["gf_submitting_245"]){return false;}  if( !jQuery("#gform_245")[0].checkValidity || jQuery("#gform_245")[0].checkValidity()){window["gf_submitting_245"]=true;} '><span>Submit</span></button>

So there you have it, all the important attributes from the <input> elements have been transferred over to the new <button> elements.

Unless your theme contains some <button> specific styles they will be rendered using the browsers default styles but you can of course add your own CSS to your theme stylesheet to style the buttons however you like. Here's one article that explains how you can style <button> elements //