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.

<?php

/**
 * WPForms submit button, match Gutenberg button block
 * @see 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

Gutenberg Block Editor WordPress Development WPForms

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk

Reader Interactions

Leave A Reply