wordpress 如何移除联系表 7 中的 span 包装器？

How can I remove the span wrapper in Contact Form 7?

提问by HamSter

I use Contact Form 7in my WordPresstheme.

我在我的WordPress主题中使用联系表 7。

It is currently returning spanand input:

它目前正在返回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>

But I need only input:

但我只需要input：

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

How can I remove the spanwrapper?

我怎样才能去除span包装纸？

回答by Guicara

I faced the same problem and finally ending by using the wpcf7_form_elementsfilter to remove the <span>tag with a regex. You can for example copy-paste this code in your functions.phpfile. Here I pass an an anonymous function as a callback, so be sure to have PHP >= 5.3.

我遇到了同样的问题，最后通过使用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*"[^\>]*>(.*)<\/>/i', '', $content);

    return $content;
});

回答by honk31

I tried similar stuff the other day and many people mentioned, that Regex is not the proper way to alter HTML/remove tags etc and it sounds logic.

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

So i went for DOMDocumentand came up with following solution:

所以我去了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();
});

EDIT:I now also added some html/text to my form, and the first heading element was not wrapping correctly after i used the DOMDocument class. It started in the first line and ended at the very end of the form. so i wrapped my entire form in a div, what made the markup return properly again.

编辑：我现在还在表单中添加了一些 html/text，并且在我使用 DOMDocument 类后第一个标题元素没有正确包装。它从第一行开始，在表格的最后结束。所以我将整个表单包裹在一个 div 中，是什么让标记再次正确返回。

回答by Paul Janicki

You can remove the span wrapper using jQuery:

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

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

It will remove input's parent element, so in this case it will remove the span. Please note that after removing the span, some Contact Form 7 features may not work correctly. For example validation may not work.

它将删除输入的父元素，因此在这种情况下它将删除跨度。请注意，移除跨度后，某些 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>

回答by niaccurshi

As of WPCF7 version 4.9, adapting the answer above so as to allow for error messaging to not be lost:

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

First of all, in the editor in the CMS, wrap your input field and any other elements that you want grouped, for example:

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

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

Note that you'll need to use the class "wpcf7-form-control-wrap" and a class that matches your field name.

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

Next, use this regex code in your functions.php. It may need adapting for your specific needs

接下来，在您的functions.php. 它可能需要适应您的特定需求

add_filter('wpcf7_form_elements', function($content) {
    preg_match_all('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/>/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*"[^\>]*>(.*)<\/>/i', '', $match)),$content);
    endforeach;
    return $content;
});

This will strip the span tag around the input field while leaving your new span tag intact. The effect is to essentially move the span tag from around only the input field, to being around whatever elements you wish to wrap.

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

The reason for this is that the code for form submission is unfortunately very hard coded. In order to have complete freedom over the structure of your HTML you would need to either:

这样做的原因是表单提交的代码不幸是非常硬编码的。为了完全自由地控制 HTML 的结构，您需要：

1. Change the code in rest-api.php around line 295 to change the "into" value to something less specific. Naturally this isn't a recommended route though the one that gives you complete freedom to structure your content as you wish. It'll be overwritten with plugin updates.

   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. Tap into the wpcf7:invalid event and run your own validation code on the result. Needless to say this is duplicating a lot of the work the plugin already does for you, when accepting (for now) to use a span tag with the "wpcf7-form-control-wrap" class in the manner described above retains all functionality of the plugin while undoing one of the most annoying hard codings of the plugin.

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 标记时，这会重复该插件已经为您完成的许多工作，保留了插件，同时撤消插件最烦人的硬编码之一。

回答by user3811354

In addition to Guicara's php code, the following javascript code could get the text of the error message:

除了 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));
        });
    }
});

回答by user3013494

Maybe it's old, but still actual problem. Here is the code to output "raw" checkbox|radio without span with id attribute:

也许它很旧，但仍然是实际问题。这是输出带有 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;
}