Contact Form 7에서 스판 래퍼를 제거하려면 어떻게 해야 합니까?

Contact Form 7에서 스판 래퍼를 제거하려면 어떻게 해야 합니까?

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포장지?

나는 같은 문제에 직면했고 마침내 그것을 사용하여 끝납니다.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;
});

얼마 전 비슷한 것을 시도했는데 많은 분들이 언급하셨는데, Regex는 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/text도 추가했는데 DOMDocument 클래스를 사용한 후 첫 번째 표제 요소가 올바르게 랩되지 않았습니다.첫 번째 줄에서 시작해서 폼의 맨 마지막에 끝났기 때문에 폼 전체를 div로 감싸서 마크업이 다시 제대로 돌아오게 했습니다.

WPCF7 버전 4.9 에서는, 에러 메세지가 없어지지 않게, 상기의 회답을 조정합니다.

먼저 CMS의 편집기에서 입력 필드 및 그룹화할 기타 요소를 래핑합니다.다음은 예를 제시하겠습니다.

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

"wpcf7-form-control-wrap" 클래스와 필드 이름과 일치하는 클래스를 사용해야 합니다.

다음으로 이 regex 코드를 사용하여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;
});

이렇게 하면 입력 필드 주변의 스판 태그가 제거되고 새 스판 태그는 그대로 유지됩니다.그 결과 기본적으로 스팬 태그를 입력 필드 주변에서 랩할 요소 주위로 이동합니다.

그 이유는 양식 제출용 코드가 불행히도 매우 하드 코딩되어 있기 때문입니다.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-rap" 클래스와 함께 스판 태그를 사용하는 것을 (현재로서는) 받아들이면 플러그인의 가장 귀찮은 하드 코딩 중 하나를 실행 취소하면서 플러그인의 모든 기능을 유지합니다.

jQuery를 사용하여 스판 래퍼를 제거할 수 있습니다.

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

입력의 부모 요소가 삭제되므로 이 경우 스팬이 삭제됩니다.스판 제거 후 일부 연락처 양식 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>

오래된 것일 수도 있지만, 여전히 문제가 있습니다.raw 체크박스를 출력하기 위한 코드는 다음과 같습니다.id 속성을 가진 span이 없는 무선입니다.

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;
}

이.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 코드로.

이 되며, 줍니다.<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;
});

@niacurshi @niacurshi @niacurshi @niacurshi @ ac ur 、 @ni @ @ @ 。지우다, 지우다를 요.<span class="wpcf7-form-control-wrap">코드를 사용합니다. 다음 해 주세요.<span class="wpcf7-form-control-wrap">모든 필드의 래퍼로 양식 템플릿에 필드 이름과 일치하는 추가 클래스를 포함합니다.아래의 스크린샷 예를 확인합니다.

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

언급URL : https://stackoverflow.com/questions/39731560/how-can-i-remove-the-span-wrapper-in-contact-form-7