Contact Form 7 更改表单标签输出

Question

我正在尝试更改 contactform7 表单的输出

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

至

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

因此我添加了一些挂钩

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

所以我唯一缺少的是数据属性。有没有钩子或想法，如何在不触及核心文件的情况下到达那里？

我从第 297 行开始 /contact-form-7/includes/contact-form.php 中找到了魔法

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

然后，从第 409 行开始

$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：将我的值推送到 form_html 函数中的 atts 数组将是我的解决方案。但老实说我不知道如何-

提前致谢！

Answer 1

使用jQuery。如果我没看错您的问题...您正在尝试添加类 small-12 和 column... 删除 novalidate 并添加 data-abide?

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

Contact Form 7 更改表单标签输出

Contact Form 7 Change Form-Tag Output

wordpress

contact-form-7