Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Filter the submit button in Gravity Forms to change the <input type="submit> element to a <button> element. There's an example in the Gravity Forms documentation, but it lacks the proper code to show your custom button text, AND removes important attributes like the onclick that prevents multiple clicks. I was trying to solve that.
<?php
// filter the Gravity Forms button type
add_filter("gform_submit_button", "form_submit_button", 10, 2);
function form_submit_button($button, $form){
// The following line is from the Gravity Forms documentation - it doesn't include your custom button text
// return "<button class='button' id='gform_submit_button_{$form["id"]}'>'Submit'</button>";
// This includes your custom button text:
return "<button class='button' id='gform_submit_button_{$form["id"]}'>{$form['button']['text']}</button>";
}
// Oops this strips important stuff
<?php
// This try reveals my use case: I was actually trying to add a pseudo element to the input button
// This leaves the <input> as is, but prepends a span element
add_filter("gform_submit_button", "form_submit_button", 10, 2);
function form_submit_button($button, $form){
return "<span></span>".$button;
}
// This kinda works for my purpose but is really not ideal
<?php
// This is what I settled on
// Change Gravity Forms submit input to a button element
add_filter( 'gform_submit_button', 'form_submit_button', 10, 5 );
function form_submit_button ( $button, $form ){
$button = str_replace( "input", "button", $button );
$button = str_replace( "/", "", $button );
$button .= "{$form['button']['text']}</button>";
return $button;
}
// It's not perfect - it leaves some inapplicable attributes in the element
// but I can live with that to avoid a whole bunch more str_replace
// and it leaves the important onclick and tab index intact
@mannieschumpert

This comment has been minimized.

Copy link
Owner Author

commented Jan 9, 2014

@dabernathy89 helped me notice that this filter replaces the whole element string, so it removes some significant attributes of the submission button, and the only other option would be a bunch of str_replace or maybe some messy regex.

My purpose for using the filter was to be able to apply a pseudo element, so another possible approach, as @dabernathy89 pointed out, is to prepend a string to $button.

@maddisondesigns

This comment has been minimized.

Copy link

commented Jan 22, 2015

Awesome! Was just trying to style the Gravity Forms submit button with a pseudo element and finally realised that it wasn't working properly because it was using input. As you pointed out, the solution they provide in their docs strips a whole heap out so, just used your 3rd gist to change it to a button and it works beautifully. Thanks heaps!

@cfxd

This comment has been minimized.

Copy link

commented Feb 24, 2015

My personal favorite:

function gf_make_submit_input_into_a_button_element($button_input, $form) {

  //save attribute string to $button_match[1]
  preg_match("/<input([^\/>]*)(\s\/)*>/", $button_input, $button_match);

  //remove value attribute
  $button_atts = str_replace("value='".$form['button']['text']."' ", "", $button_match[1]);

  return '<button '.$button_atts.'>'.$form['button']['text'].'<i class="fa fa-refresh"></i></button>';
}
add_filter('gform_submit_button', 'gf_make_submit_input_into_a_button_element', 10, 2);
@hassaan39

This comment has been minimized.

Copy link

commented Aug 12, 2016

Wonderful filter. That Helps me lot. It really encourages me to explore and customize the filter now. Thank you.

@pat-sullivan

This comment has been minimized.

Copy link

commented Jan 17, 2018

+1 Thanks for the quick solution.

@claytonschase

This comment has been minimized.

Copy link

commented Jul 19, 2018

Brilliant. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.