Like many web developers, I have spent an inordinate amount of time over the years trying to style form elements so that they render consistently across different browsers.

One technique I have found very useful is to use button elements to Submit forms. Not only does the the button element offer richer styling opportunities than
<input type="submit" ... element, in my experience it is far easier to ensure that your beautifully-styled submit button looks the same whichever browser is used to view the form if you use this element.

So, how to use the button element in a CF7 form?

1. Contact Form 7 Form Element Modules

CF7 uses modules to create shortcodes and tag generators for various form elements. The module used to generate form submits is

/wp-content/plugins/contact-form-7/modules/submit.php.

Around line 47 you will find the following: -

$html = '<input type="submit" value="' . esc_attr( $value ) . '"' . $atts . ' /&rt;';

We want to change this to: -

$html = '<button type="submit"' . $atts . '>' . esc_attr( $value ) .  '</button>';

This is easily achieved by editing the submit.php module, but if you want this change to be preserved after a plugin upgrade there are a few more hoops to jump through.

2.Disable the Default Shortcode and Tag Generator

Put the following code into your theme's functions.php file:

// replace cf7 form submit with button
function fowl_wpcf7_submit_button() {
        if(function_exists('wpcf7_remove_shortcode')) {
                wpcf7_remove_shortcode('submit');
                remove_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
        }
}
add_action('init','fowl_wpcf7_submit_button');

3. Create a new submit.php module in your theme folder

Create a /cf7 directory under your theme folder and put a copy of the submit.php module in there. Amend the relevant line of code as shown in section 1. As we are leaving the default module untouched in the plugin directory we need to change the names of the functions and references to them in our copy to avoid "cannot redeclare function" PHP errors.

wpcf7_add_shortcode( 'submit', 'wpcf7_submit_shortcode_handler' );

function wpcf7_submit_shortcode_handler( $tag ) {
.
.
add_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
.
.
function wpcf7_add_tag_generator_submit() {

function wpcf7_tg_pane_submit( &$contact_form ) {

You can call the new functions in your version of submit.php whatever you like, but one easy method is just to add your own namespace prefix ("fowl_" in my case) to the function names:

wpcf7_add_shortcode( 'submit', 'fowl_wpcf7_submit_shortcode_handler' );

function fowl_wpcf7_submit_shortcode_handler( $tag ) {
.
.
add_action( 'admin_init', 'fowl_wpcf7_add_tag_generator_submit', 55 );
.
.
function fowl_wpcf7_add_tag_generator_submit() {

function fowl_wpcf7_tg_pane_submit( &$contact_form ) {

4. Call the new functions to re-enable the shortcode and tag generator

Add two more lines of code to your function in your theme's functions.php file:

// replace cf7 form submit with button
function fowl_wpcf7_submit_button() {
        if(function_exists('wpcf7_remove_shortcode')) {
                wpcf7_remove_shortcode('submit');
                remove_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
                $fowl_cf7_module = TEMPLATEPATH . '/cf7/submit-button.php';
                require_once $fowl_cf7_module;
        }
}
add_action('init','fowl_wpcf7_submit_button');

That's it! Now, any CF7 forms on your site will use <button> elements for their submit buttons and you can take advantage of the new CSS styling possibilities available with this HTML element.

The post Contact Form 7 Submit Button Element appeared first on Feathered Owl.