WPForms submit button match Gutenberg button style

We use the Gutenberg color palette and button styling on all sites we build. Buttons have a class of wp-block-button__link, and additional classes for different text/background colors.

Most plugins use their own unique classes for styling buttons they add. WPForms (my favorite form plugin), uses wpforms-submit for the submit button.

WPForms does let you specify Submit Button CSS Classes when you edit the form, but you would have to remember to add the class every time you create a form:

Automatically add the class

You can automatically add classes to the submit button in every form using the wpforms_frontend_form_data filter.


 * WPForms submit button, match Gutenberg button block
 * @link https://www.billerickson.net/wpforms-submit-button-match-gutenberg-button-style/
function be_wpforms_match_button_block( $form_data ) {
	$form_data['settings']['submit_class'] .= ' wp-block-button__link';
	return $form_data;
add_filter( 'wpforms_frontend_form_data', 'be_wpforms_match_button_block' );

You can still use the custom CSS classes for form-specific changes to the button.

To change a specific form’s button from your site-wide default to the “Blue” background color (specified in your site’s color palette), go to WPForms > {select form } > Settings and add this to Submit Button CSS Class: has-background has-blue-background-color

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Comments are closed. Continue the conversation with me on Twitter: @billerickson