Question

我在 WordPress 主题中使用Contact Form 7。

目前正在返回span和input：

<span class="wpcf7-form-control-wrap name">
  <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">
</span>

但我只需要input：

<input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">

如何删除span包装？

Answer 1

我遇到了同样的问题，最后使用wpcf7_form_elements过滤器删除带有正则表达式的<span>标记。例如，您可以将此代码复制粘贴到functions.php文件中。这里我传递一个匿名函数作为回调，所以一定要有PHP＆gt; = 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

您可以使用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 3

前几天我尝试过类似的东西，很多人都提到，Regex不是改变HTML /删除标签等的正确方法，而sounds logic。

所以我选择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 / text，并且在使用DOMDocument类之后，第一个标题元素未正确包装。它从第一行开始，在表单的最后结束。所以我将整个表单包装在一个div中，是什么让标记再次正常返回。

Answer 4

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

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

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

请注意，您需要使用类＆＃34; wpcf7-form-control-wrap＆＃34;以及与您的字段名称匹配的类。

接下来，在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结构，您需要：

更改第295行周围rest-api.php中的代码，将＆＃34;更改为＆＃34;价值不那么具体。当然，这并不是一条推荐的路线，但它可以让您完全自由地按照自己的意愿构建内容。它会被插件更新覆盖。

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'],
    );
}

点击wpcf7：invalid事件并在结果上运行您自己的验证码。毋庸置疑，当接受（现在）使用span标签和＆＃34; wpcf7-form-control-wrap＆＃34;时，这会重复插件已经为你做的很多工作上述方式的类保留了插件的所有功能，同时撤消了插件中最令人讨厌的硬编码之一。

Answer 5

除了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 6

也许是旧的，但仍然是实际问题。这是输出不带id属性的“ raw”复选框|无线电的代码：

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代码中。

如何删除Contact Form 7中的span包装器？

7 个答案: