如何在Contact Form 7字段中添加自定义属性无需javascript？
比如页面上有这样一个字段：
<input type="text" name="name" class="form-control" id="name-1" data-attr="custom" data-msg="Текст 1">
问题：是否可以在管理面板中设置这些字段的自定义属性（data-attr、data-msg）？
【问题讨论】：
找到你的领域的名称。
[text* text-21]
如果您的字段名称为 name="text-21"，就像我的示例一样，请将此代码添加到 functions.php 文件中。
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
$str_pos = strpos( $content, 'name="text-21"' );
if ( $str_pos !== false ) {
$content = substr_replace( $content, ' data-attr="custom" data-msg="Foo Bar 1" ', $str_pos, 0 );
}
return $content;
}
注意，它会将这些属性添加到名称为 text-21 的所有表单元素中，如果您想阻止它，请为您的表单元素指定一个唯一名称 [text* unique-name]
并将代码更改为
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
$str_pos = strpos( $content, 'name="unique-name"' );
if ( $str_pos !== false ) {
$content = substr_replace( $content, ' data-attr="custom" data-msg="Foo Bar 1" ', $str_pos, 0 );
}
return $content;
}
【讨论】：
autocomplete="both" autocomplete="off" 以禁用 DATE 选择器字段的 Chrome 自动填充下拉菜单。谢谢！ add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' ); function imp_wpcf7_form_elements( $content ) { $str_pos = strpos( $content, 'name="date-from"' ); $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 ); $str_pos = strpos( $content, 'name="date-to"' ); $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 ); return $content; }
还可以添加多个属性。例如
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
$str_pos = strpos( $content, 'name="your-email-homepage"' );
$content = substr_replace( $content, ' aria-describedby="emailHelp" ', $str_pos, 0 );
$str_pos2 = strpos( $content, 'name="your-fname-homepage"' );
$content = substr_replace( $content, ' aria-describedby="fnameHelp" ', $str_pos2, 0 );
$str_pos3 = strpos( $content, 'name="your-lname-homepage"' );
$content = substr_replace( $content, ' aria-describedby="lnameHelp" ', $str_pos3, 0 );
return $content;
}
【讨论】：
这是一个不涉及硬编码字段名称和属性的通用解决方案
add_filter( 'wpcf7_form_tag', function ( $tag ) {
$datas = [];
foreach ( (array)$tag['options'] as $option ) {
if ( strpos( $option, 'data-' ) === 0 ) {
$option = explode( ':', $option, 2 );
$datas[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
}
}
if ( ! empty( $datas ) ) {
$name = $tag['name'];
$tag['name'] = $id = uniqid('wpcf');
add_filter( 'wpcf7_form_elements', function ($content) use ($name, $id, $datas) {
return str_replace($id, $name, str_replace("name=\"$id\"", "name=\"$name\" ". wpcf7_format_atts($datas), $content));
});
}
return $tag;
} );
它适用于所有数据属性，因此您可以像这样使用它
[text* my-name data-foo:bar data-biz:baz placeholder "Blabla"]
Output: <input type="text" name="my-name" data-foo="bar" data-biz="baz" placeholder="Blabla">
由于 wpcf7 不提供直接挂钩选项的方法，因此解决方案使用了一种技巧，将字段名称临时替换为唯一 ID，然后在稍后的过滤器中替换为正确的名称和添加的属性
如果您需要它处理的不仅仅是数据属性，您可以通过替换此行将更多属性列入白名单
if ( strpos( $option, 'data-' ) === 0 ) {
类似于以下内容
if ( preg_match( '/^(data-|pattern|my-custom-attribute)/', $option ) ) {
【讨论】：
placeholder "Blabla" 这样的属性之后，否则联系表单根本不会解析该字段（正则表达式问题，与我的代码）。我认为这个过滤器的向后兼容性没有理由被破坏，因为它的级别非常低
wpcf7-not-valid CSS 类。
从 Tofandel 的解决方案进行扩展，以造福那些获得 99% 的成功但遇到验证问题的人 - 在我的情况下，我已经解决了这个问题，并希望提供一个与 Tofandel 一样远的扩展解决方案（将属性放入适当的表单中）而且在提交时也成功验证。
add_filter('wpcf7_form_tag', function($tag) {
$data = [];
foreach ((array)$tag['options'] as $option) {
if (strpos( $option, 'autocomplete') === 0) {
$option = explode(':', $option, 2);
$data[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
}
}
if(!empty($data)) {
add_filter('wpcf7_form_elements', function ($content) use ($tag, $data) {
$data_attrs = wpcf7_format_atts($data);
$name = $tag['name'];
$content_plus_data_attrs = str_replace("name=\"$name\"", "name=\"$name\" " . $data_attrs, $content);
return $content_plus_data_attrs;
});
}
return $tag;
} );
与其将标签ID更改为随机值只是为了稍后将其替换为“真实”值，我们只是首先引用真实值，替换wpcf7_form_elements过滤器中的相关部分内容（在我的大小写，自动完成，但正如 Tofandel 的示例所示，这可以扩展到您想要的任何数据属性）。
【讨论】：
我从 Tofandel 给出的没有 JS (CF7) 错误的解决方案中提出一个解决方案，并授权使用没有值的属性：
/**
* Add custom attributes on inputs
* Put "data-my-attribute" to use it, with or without value
*
* @param array $tag
*
* @return array
*/
function cf7AddCustomAttributes($tag) {
$datas = [];
foreach ((array) $tag['options'] as $option) {
if (strpos($option, 'data-') === 0 || strpos($option, 'id:') === 0) {
$option = explode(':', $option, 2);
$datas[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
}
}
if (!empty($datas)) {
$id = $tag['name'];
if (array_key_exists('id', $datas)) {
$id = $datas['id'];
} else {
$tag['options'][] = "id:$id";
}
add_filter('wpcf7_form_elements', function ($content) use ($id, $datas) {
$attributesHtml = '';
$idHtml = "id=\"$id\"";
foreach ($datas as $key => $value) {
$attributesHtml .= " $key";
if (is_string($value) && strlen($value) > 0) {
$attributesHtml .= "=\"$value\"";
}
}
return str_replace($idHtml, "$idHtml $attributesHtml ", $content);
});
}
return $tag;
}
add_filter('wpcf7_form_tag', 'cf7AddCustomAttributes');
【讨论】：
我用这个简单的方法来设置属性
[checkbox optName use_label_element "optName"]
<script>
document.querySelector(".optName").setAttribute("onchange","myscript");
</script>
【讨论】：