Contact Form 7 Submit Button Element

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.

Posted on 6 Comments

6 Responses

  1. It didn't run for me. I had to change this line:

    add_action('init','fowl_wpcf7_submit_button');

    to:

    add_action('after_setup_theme','fowl_wpcf7_submit_button');

    • Ant Cullen says:

      Interesting - I've used this on a load of my sites and never had an issue with attaching it to the "init" hook. Maybe there's another bit of code in your theme that's interfering with it. Anyway, glad it's working for you with your minor tweak.

  2. Same problem as Miguel, fixed by changing the hook to "after_setup_theme".

    Thanks for this piece of code ! Clean and effective !

  3. Jonathan says:

    This is exactly what I need, but I think the submit.php in Contact Form 7 has changed since this post. I'm getting a "cannot redeclare" error. Might you have an update for this post?

  4. Louis-Philippe says:

    I'm greatefull for this tutorial and needed it, but with the last version of CF7, the submit.php page did not have this live on #1... Can you help here please?

  5. Louis-Philippe says:

    Hi, nevermind, i found this solution

    Send

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

NAME*:
WEBSITE:
COMMENT: