CODEWITHSUNDEEP
phpwordpress
Navnit Viradiya
Navnit Viradiya

Reputation: 81

How to replace input type=”submit” to button on Contact Form 7?

I have tried but it doesn't work.

remove_action( 'wpcf7_init', 'wpcf7_add_shortcode_submit', 20 );<br>
add_action( 'wpcf7_init', 'wpcf7_add_shortcode_submit_button' );

function wpcf7_add_shortcode_submit_button() {
    wpcf7_add_shortcode( 'submit', 'wpcf7_submit_button_shortcode_handler' );
}

function wpcf7_submit_button_shortcode_handler( $tag ) {
    $tag = new WPCF7_Shortcode( $tag );

    $class = wpcf7_form_controls_class( $tag->type );

    $atts = array();

    $atts['class'] = $tag->get_class_option( $class );
    $atts['id'] = $tag->get_id_option();
    $atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true );

    $value = isset( $tag->values[0] ) ? $tag->values[0] : '';
    if ( empty( $value ) )
        $value = __( 'Send', 'contact-form-7' );

    $atts['type'] = 'submit';

    $atts = wpcf7_format`enter code here`_atts( $atts );

    $html = sprintf( '<button %1$s>%2$s</button>', $atts, $value );
    enter code here
    return $html;
}

Upvotes: 6

Views: 16382

Answers (5)

Tomas Korinek
Tomas Korinek

Reputation: 300

Based on the response from @19h47, here is a more complex solution that adds all custom attributes from the CF7 markup and retains the original classes from the CF7 [submit] tag.

remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');
add_action('wpcf7_init', 'my_add_form_tag_submit', 10, 0);

function my_add_form_tag_submit() {
    wpcf7_add_form_tag('submit', 'my_submit_form_tag_handler');
}

function my_submit_form_tag_handler($tag): string {
    $tag_value = $tag->values[0];
    $tag_options = $tag->options;

    $atts = "";
    $classes = "wpcf7-form-control wpcf7-submit has-spinner";

    foreach ($tag_options as $tag_option) {
        list($name, $value) = explode(':', $tag_option);
        if($name == 'class') {
            $classes .= ' ' . $value;
        } else {
            $atts .= "$name=\"$value\" ";            
        }
    }
    $atts .= "class=\"$classes\"";

    return sprintf('<button type="submit" %1$s >%2$s</button>', 
        $atts, 
        $tag_value
    );
}

Upvotes: 4

19h47
19h47

Reputation: 78

The response from Hendra is the way to do it.

But since Contact Form 7 4.6, the wpcf7_add_shortcode function has been deprecated. See

Use wpcf7_add_form_taginstead.

remove_action( 'wpcf7_init', 'wpcf7_add_form_tag_submit' );
add_action( 'wpcf7_init', 'my_add_form_tag_submit', 10, 0 );

function my_add_form_tag_submit() {
    wpcf7_add_form_tag( 'submit', 'my_submit_form_tag_handler' );
}

function my_submit_form_tag_handler( $tag ) : string {
    return '<button type="submit">Send</button>'
}

See Contact Form 7 repo for reference

Upvotes: 3

Dushan
Dushan

Reputation: 762

Simple solution to use your custom button as the submit button

Just add the following two classes to your custom button or anchor tag. .wpcf7-form-control and .wpcf7-submit

Please find the above two classes in the example below

<button type="submit" class="wpcf7-form-control wpcf7-submit btn btn-primary custom-btn-style">Send Message</button>

Upvotes: 11

Hendra
Hendra

Reputation: 81

you can place this code in functions.php 

remove_action( 'wpcf7_init', 'wpcf7_add_form_tag_submit' );
add_action( 'wpcf7_init', 'new_wpcf7_add_shortcode_submit_button',20 );

function new_wpcf7_add_shortcode_submit_button() {
    wpcf7_add_shortcode( 'submit', 'new_wpcf7_submit_button_shortcode_handler' );
}

function new_wpcf7_submit_button_shortcode_handler( $tag ) {
    ......
}

Upvotes: 3

Elvin Haci
Elvin Haci

Reputation: 3572

You can achieve this with easier way - jQuery:

add_action('wp_footer',function(){
echo '<script>
      jQuery(\'.wpcf7-form [type="submit"]\').attr("type","button");
      </script>';
}, 9999);

If you want to replace that input with custom button element, then you can do so

add_action('wp_footer',function(){
echo '<script>
      jQuery(\'.wpcf7-form [type="submit"]\').hide();
      jQuery(\'<button type="submit>BUTTON</button>"\').insertAfter(jQuery(\'.wpcf7-form [type="submit"]\'));
      </script>';
}, 9999);

Upvotes: -1

Related Questions