如何去除联系表 7 中的跨度包装纸？

Answer 1

我遇到了同样的问题，最后通过使用

wpcf7_form_elements

过滤器通过正则表达式删除

<span>

标签来结束。例如，您可以将此代码复制粘贴到您的

functions.php

文件中。这里我传递了一个匿名函数作为回调，所以请确保 PHP >= 5.3。

add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

    return $content;
});

Answer 2

前几天我尝试过类似的东西，很多人提到，正则表达式不是改变 HTML/删除标签等的正确方法，它听起来很逻辑。

所以我选择了 DOMDocument 并提出了以下解决方案：

add_filter('wpcf7_form_elements', function( $content ) {
  $dom = new DOMDocument();
  $dom->preserveWhiteSpace = false;
  $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

  $xpath = new DomXPath($dom);
  $spans = $xpath->query("//span[contains(@class, 'wpcf7-form-control-wrap')]" );

  foreach ( $spans as $span ) :
    $children = $span->firstChild;
    $span->parentNode->replaceChild( $children, $span );
  endforeach;

  return $dom->saveHTML();
});

编辑： 我现在还在表单中添加了一些 html/文本，并且在使用 DOMDocument 类后，第一个标题元素未正确换行。它从第一行开始，到表格的最后一行结束。所以我将整个表单包裹在一个 div 中，这使得标记再次正确返回。

Answer 3

从 WPCF7 版本 4.9 开始，调整上面的答案，以便错误消息不会丢失：

首先，在 CMS 的编辑器中，将输入字段和任何其他要分组的元素包装起来，例如：

<span class="wpcf7-form-control-wrap your-name">{field codes, etc, here}</span>

请注意，您需要使用类“wpcf7-form-control-wrap”和与您的字段名称匹配的类。

接下来，在您的

functions.php

中使用此正则表达式代码。它可能需要适应您的特定需求

add_filter('wpcf7_form_elements', function($content) {
    preg_match_all('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', $content,$matches);

    foreach($matches[2] as $match):
        $content = str_replace(trim($match),trim(preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $match)),$content);
    endforeach;
    return $content;
});

这将去除输入字段周围的 span 标签，同时保持新的 span 标签完好无损。效果是基本上将 span 标签从仅围绕输入字段移动到围绕您想要包装的任何元素。

原因是不幸的是，表单提交的代码是硬编码的。为了对 HTML 结构有完全的自由，您需要：

1. 更改rest-api.php中第295行左右的代码，将“into”值更改为不太具体的值。当然，这不是推荐的路线，尽管它可以让您完全自由地根据自己的意愿构建内容。它将被插件更新覆盖。

   foreach ( (array) $result['invalid_fields'] as $name => $field ) {
       $invalid_fields[] = array(
           'into' => 'span.wpcf7-form-control-wrap.'
               . sanitize_html_class( $name ),
           'message' => $field['reason'],
           'idref' => $field['idref'],
       );
   }
   

2. 点击 wpcf7:invalid 事件并对结果运行您自己的验证代码。不用说，这会重复插件已经为您完成的大量工作，当接受（目前）以上述方式使用带有“wpcf7-form-control-wrap”类的span标签时，保留了所有功能插件，同时撤消插件最烦人的硬编码之一。

Answer 4

您可以使用 jQuery 删除 span 包装器：

$("#name").unwrap();

它将删除输入的父元素，因此在这种情况下它将删除跨度。 请注意，删除跨度后，Contact Form 7 的某些功能可能无法正常工作。例如，验证可能不起作用。

$("button").click(function(){
  $("#name").unwrap();
});

span {
  background-color: #333;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap name">
  <input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name" aria-required="true" aria-invalid="false">
</span>

<button>Remove span</button>

Answer 5

这个示例对我有用，并展示了如何删除

<span class="wpcf7-form-control-wrap"></span>

输入包装器而不出现任何错误：

我已经合并了@Guicara的代码

add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

    return $content;
});

使用@naccurshi 的答案并进行了一些编辑。 首先，您需要使用上面的代码删除

<span class="wpcf7-form-control-wrap">

。然后手动将具有与您的字段名称匹配的额外类

 的 

<span class="wpcf7-form-control-wrap"> 添加到表单模板中，作为所有字段的包装器。 检查下面的示例屏幕截图：

Answer 6

也许它很旧，但仍然是实际问题。以下是输出“原始”复选框|不带 id 属性的跨度的无线电的代码：

add_filter('wpcf7_form_elements', 'contact_form_remove_checkbox_wrapping' );

function contact_form_remove_checkbox_wrapping( $content ) {
    preg_match_all('/<span class="wpcf7-form-control-wrap[a-zA-Z ]*"><span class="wpcf7-form-control wpcf7-[checkbox|radio]+" id="([^\"]+)"><span class="[^\"]+">(<input type="[checkbox|radio]+" name="[^\"]+" value="[^\"]*" \/>)<span class="wpcf7-list-item-label">[^\"]+<\/span><\/span><\/span><\/span>/i', $content, $out );
    if ( !empty( $out[0] ) ) {
        $count = count( $out[1] );
        for ( $i = 0; $i<$count; $i++ ) {
            $out[2][ $i ] = str_replace(' value=', 'id="' . $out[1][ $i ] . '" value=', $out[2][$i] );
        }

        return str_replace( $out[0], $out[2], $content );
    }

    return $content;
}

Answer 7

我想出了一个简单的脚本，当输入聚焦时，它会向此范围添加类（我想使用

input:focus + label

，但这个范围打破了这个逻辑）；

/*contact form inputs*/
  var contactFormInputs = document.querySelectorAll('.wpcf7-form-control'); // or your custom input class
  contactFormInputs.forEach(function(element) {
    element.addEventListener('focus', function(event) {
      event.target.parentElement.classList.add("focused");
    });
    element.addEventListener('blur', function(event) {
      event.target.parentElement.classList.remove("focused");
    });
    element.addEventListener('change', function(event) {
     event.target.value
        ? event.target.parentElement.classList.add("valid")
        : event.target.parentElement.classList.remove("valid")
    });
  });

现在我可以使用

.wpcf7-form-control-wrap.focused, .wpcf7-form-control-wrap.valid {
  ~ .ui-block-label {
    top: -20px;
    font-size: 14px;
    color: $yellowDark;
  }
}

在我的 SCSS 代码中。

Answer 8

除了Guicara的php代码之外，以下javascript代码也可以获取错误消息的文本：

document.addEventListener('wpcf7invalid',function(e){
    if ('validation_failed' === e.detail.apiResponse.status){
        $.each(e.detail.apiResponse.invalidFields,function(i,el){
        console.log('this is error response and form object',el.message, $('#'+el.idref));
        });
    }
});

Answer 9

联系表格 7：使用

Regex

包裹 <p> 和 <span> 删除

文字输入
复选框输入

add_filter('wpcf7_autop_or_not', '__return_false');    
    add_filter('wpcf7_form_elements', function($content) {  
   $find = ['/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '/<(span).*?class="\s*(?:.*\s)?wpcf7-checkbox(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i' , '/<(span).*?class="\s*(?:.*\s)?wpcf7-list-item(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i'];   
     $content = preg_replace( $find, '\2', $content);
               return $content; 
    });