Submit Button Style Issues

[charlesmkelley]

I have this up and working great. The only two issues I see are that:

• button styling doesn't work at all when a submit button's "Submit Button Location" is set to "End of the Row"
• button styling doesn't make the button span 100% when a submit button's "Submit Button Width" is set to "Fill Container"

[charlesmkelley]

Alright. Think I got this working.

When the "End of the Row" option is set, Gravity Forms appends gform-button class (versus gform_button class when it isn't). The second replacement below accounts for that.

Then, your code never accounts for the option being set to "Fill Container". Gravity Forms appends the class of gform-button--width-full when that option is set. The third replacement below accounts for that, no matter the location of the button.

function strt_submit_button( $button ) {
	// Existing replacement
	$button = str_replace( 'class=\'gform_button', 'class=\'gform_button btn btn-primary', $button );
	
	// Replacement if Submit Button Location is End of the Row
	$button = str_replace( 'class=\'gform-button', 'class=\'gform_button btn btn-primary', $button );
	
	// Replacement if Submit Button Width is Fill Container, regardless of Submit Button Location
	$button = str_replace( 'gform-button--width-full', 'gform-button--width-full w-100', $button );
	
	return $button;
}
		
add_filter( 'gform_submit_button', 'strt_submit_button', 10, 2 );

Last but not least, and a problem I didn't mention above, when set to "End of the Row", the button does not actually appear at the end of the row. That's because the gform_field_container hook doesn't actually target the submit field container (which isn't in any GF documentation!). And, GF doesn't have any hook that targets the submit container (you would think there would be gform_submit_conatiner or similar), but only the input itself. So, the only solution there is to basically do what you did in your hook and extend Bootstrap SCSS to target the submit field (see below).

(And, it may be more uniform for you to just target all fields this way via SCSS versus the hook method, since the submit button container also uses the 'gfield' class like the rest of the fields.)

.gfield--type-submit {

  	&.gfield--width-half {
	  @extend .col-md-6;
  	}
  
 	&.gfield--width-quarter {
	  @extend .col-sm-6, .col-md-3;
	}
  
	&.gfield--width-third {
	  @extend .col-md-4;
	}
  
	&.gfield--width-five-twelfths {
	  @extend .col-md-5;
	}
  
	&.gfield--width-half {
	  @extend .col-md-6;
	}
  
	&.gfield--width-seven-twelfths {
	  @extend .col-md-7;
	}
  
	&.gfield--width-two-thirds {
	  @extend .col-md-8;
	}
  
	&.gfield--width-three-quarter {
	  @extend .col-md-9;
	}
  
	&.gfield--width-five-sixths {
	  @extend .col-md-10;
	}
  
	&.gfield--width-eleven-twelfths {
	  @extend .col-md-11;
	}
  
	&.gfield--width-full {
	  @extend .col-12;
	}
	
}