WPForms submit button – match Gutenberg button block

If you’re building Gutenberg compatible themes, you have likely styled the button block.

You can make the WPForms submit button match the Gutenberg block styling by adding a “submit button class” of .wp-block-button__link.

If you don’t want to manually add that to each form you create, add the following code to your theme or core functionality plugin to automatically add the class to all WPForms submit buttons:

<?php
/**
* WPForms submit button, match Gutenberg button block
* @see https://www.billerickson.net/code/wpforms-submit-button-match-gutenberg-block/
*/
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' );
view raw functions.php hosted with ❤ by GitHub

Gutenberg 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