Contact Form 7 Change Form-Tag Output

Question

I'm trying to change the output of contactform7 forms from

<form action="/#wpcf7-f583-p294-o1" method="post" class="wpcf7-form">

to

<form action="/#wpcf7-f583-p294-o1" method="post" class="small-12 column wpcf7-form" novalidate data-abide>

Therefore I've added some hooks

add_filter('wpcf7_form_class_attr', function($html_class) { return 'small-12 column ' . $html_class; }); // adds respsonsive classes to the form-tag
add_filter('wpcf7_form_novalidate', function($support_html5) { return true; }); // adds novalidate-attr to the form-tag

So the only thing I'm missing is the data-attribute. Is there any hook or any idea, how to get there, without toching the core-Files?

I've found the magic in /contact-form-7/includes/contact-form.php starting in line 297

/* Generating Form HTML */
public function form_html( $args = '' ) { // ...

and then, from line 409 on

$enctype = apply_filters( 'wpcf7_form_enctype', '' );
        ...

        $atts = array(
            'action' => esc_url( $url ),
            'method' => 'post',
            'class' => $class,
            'enctype' => wpcf7_enctype_value( $enctype ),
            'autocomplete' => $autocomplete,
            'novalidate' => $novalidate ? 'novalidate' : '',
        );

        ...
        $atts = wpcf7_format_atts( $atts );

        $html .= sprintf( '<form data-abide %s>', $atts ) . "\n";
        ...

        $html .= '</form>';
        $html .= '</div>';

SO: pushing my values to the atts array in the form_html function would be my solution. But honestly I don't know how-

Thank you in advance!

Answer 1

Use jQuery. If I read your question correctly... You are trying to add the classes small-12 and column... remove novalidate and add data-abide?

jQuery('#wpcf7-f583-p294-o1 form').addClass('small-12 column').removeAttr('novalidate').attr('data-abide', true);