PHP + Wordpress + CF7 -> 如何在 span.wpcf7-form-control-wrap 和 input.wpcf7-form-control 之后立即添加自定义 HTML？答案

【问题标题】：PHP + Wordpress + CF7 -> how to add custom HTML inside span.wpcf7-form-control-wrap AND IMMEDIATELY AFTER input.wpcf7-form-control?PHP + Wordpress + CF7 -> 如何在 span.wpcf7-form-control-wrap 和 input.wpcf7-form-control 之后立即添加自定义 HTML？
【发布时间】：2020-06-28 12:33:33
【问题描述】：

Contact Fom 7 - 如何在 span.wpcf7-form-control-wrap 和 input.wpcf7-form-control 之后立即添加自定义 HTML？使用“查询监视器”插件，我发现我需要修改的 HOOK 位于：

'/wp-content/plugins/contact-form-7/modules/text.php'文件，即'wpcf7_add_form_tag_text'钩子

我的 attepmt（我在我的主题中的 functions.php 中编写了这段代码）是：

function test($html) {

$html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s<span class="focus-input100-1"></span><span class="focus-input100-2"></span></span>',
sanitize_html_class( $tag->name ), $atts, $validation_error );
return $html;
}

add_filter('wpcf7_add_form_tag_text', 'test');

...但它不起作用

【问题讨论】：

能否请您详细说明。你真正想做的事。
我想在之后立即添加 ''

标签： php wordpress filter action contact-form-7

【解决方案1】：

尝试在表单编辑器中添加该行

【讨论】：

【解决方案2】：

wpcf7_add_form_tag_text 不是过滤器或钩子，而是一个函数。所以你尝试的方法根本行不通。

我建议在之后使用 jQuery 添加数据。

Contact Form 7 Form 的典型输出是这样的，在前端。

<span class="wpcf7-form-control-wrap your-name">
    <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name:">
</span>

在您的 CF7 表单编辑器中。只需在下面添加类似的内容。它甚至可以在您的 [submit] 标签之后。这将在<input> 标记之后立即添加<span class="focus-input100-1"></span>，但仍在wpcf7-form-control-wrap 包装器内。您可以根据表单标签名称调整输入名称或添加其他行。

<script type="text/javascript">
     jQuery('input[name="your-name"]').after('<span class="focus-input100-1"></span>');
</script>

上面的结果是这样的：

<span class="wpcf7-form-control-wrap your-name">
   <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name:">
   <span class="focus-input100-1"></span>
</span>

【讨论】：