it-swarm.com.de

Wie kann ich den Span Wrapper in Kontaktformular 7 entfernen?

Ich benutze Kontaktformular 7 in meinem WordPress Theme.

Derzeit werden span und input zurückgegeben:

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

Aber ich brauche nur input:

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

Wie kann ich den Wrapper span entfernen?

18
HamSter

Ich hatte das gleiche Problem und habe schließlich den Filter wpcf7_form_elements Verwendet, um das Tag <span> Mit einem regulären Ausdruck zu entfernen. Sie können diesen Code beispielsweise kopieren und in Ihre functions.php - Datei einfügen. Hier übergebe ich eine anonyme Funktion als Rückruf, stellen Sie also sicher, dass 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;
});
32
Guicara

Ich habe neulich ähnliche Sachen ausprobiert und viele Leute erwähnten, dass Regex nicht der richtige Weg ist, um HTML zu ändern/Tags zu entfernen usw. und es klingt logisch .

Also habe ich mich für DOMDocument entschieden und mir folgende Lösung ausgedacht:

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

BEARBEITEN: Ich habe jetzt auch etwas HTML/Text zu meinem Formular hinzugefügt, und das erste Überschriftenelement wurde nach der Verwendung der DOMDocument-Klasse nicht richtig umgebrochen. Es begann in der ersten Zeile und endete ganz am Ende des Formulars. Also habe ich mein gesamtes Formular in ein Div eingewickelt, wodurch das Markup wieder korrekt zurückkehrte.

7
honk31

Sie können den Span-Wrapper mit jQuery entfernen:

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

Das übergeordnete Element der Eingabe wird entfernt. In diesem Fall wird die Spanne entfernt. Bitte beachten Sie, dass nach dem Entfernen des Bereichs einige Funktionen von Contact Form 7 möglicherweise nicht richtig funktionieren. Beispielsweise funktioniert die Validierung möglicherweise nicht.

$("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>
7
Paul Janicki

Ab der WPCF7-Version 4.9 müssen Sie die obige Antwort anpassen, damit die Fehlermeldung nicht verloren geht:

Binden Sie zunächst im Editor des CMS Ihr Eingabefeld und alle anderen Elemente ein, die Sie gruppieren möchten, zum Beispiel:

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

Beachten Sie, dass Sie die Klasse "wpcf7-form-control-wrap" und eine Klasse verwenden müssen, die Ihrem Feldnamen entspricht.

Verwenden Sie als Nächstes diesen regulären Code in Ihrem functions.php. Möglicherweise muss es an Ihre spezifischen Bedürfnisse angepasst werden

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

Dadurch wird das span-Tag um das Eingabefeld herum entfernt, während das neue span-Tag intakt bleibt. Der Effekt besteht darin, dass das span-Tag im Wesentlichen nur um das Eingabefeld herum verschoben wird und sich um alle Elemente befindet, die Sie umbrechen möchten.

Der Grund dafür ist, dass der Code für das Einreichen des Formulars leider sehr hart codiert ist. Um vollständige Freiheit über die Struktur Ihres HTML zu haben, müssten Sie entweder:

  1. Ändern Sie den Code in der Datei "rest-api.php" in Zeile 295, um den Wert "into" in einen Wert zu ändern, der weniger spezifisch ist. Natürlich ist dies keine empfohlene Route, die Ihnen jedoch die völlige Freiheit gibt, Ihre Inhalte nach Ihren Wünschen zu strukturieren. Es wird mit Plugin-Updates überschrieben.

    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. Tippen Sie auf das Ereignis wpcf7: invalid und führen Sie Ihren eigenen Validierungscode für das Ergebnis aus. Es erübrigt sich zu erwähnen, dass dies einen großen Teil der Arbeit, die das Plugin bereits für Sie erledigt, dupliziert, wenn Sie (vorerst) akzeptieren, ein span-Tag mit der Klasse "wpcf7-form-control-wrap" in der oben beschriebenen Weise zu verwenden, behält die gesamte Funktionalität von bei das Plugin beim Rückgängigmachen einer der nervigsten Hardcodierungen des Plugins.

6
niaccurshi

Zusätzlich zu Guicaras PHP-Code könnte der folgende Javascript-Code den Text der Fehlermeldung enthalten:

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

1
user3811354