web-dev-qa-db-fra.com

Comment puis-je retirer l'enveloppe d'envergure dans le formulaire de contact 7?

J'utilise Formulaire de contact 7 dans mon thème WordPress .

Il retourne actuellement span et 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>

Mais je n'ai besoin que de input:

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

Comment supprimer le wrapper span?

wordpresscontact-form-7
18
HamSter

J'ai rencontré le même problème et j'ai finalement terminé en utilisant le wpcf7_form_elements filtre pour supprimer le <span> tag avec une expression régulière. Vous pouvez par exemple copier-coller ce code dans votre functions.phpfichier. Ici, je passe une fonction anonyme comme rappel, alors assurez-vous d'avoir 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

J'ai essayé des trucs similaires l'autre jour et beaucoup de gens ont mentionné que Regex n'est pas le bon moyen de modifier HTML/supprimer des balises, etc. et logique des sons .

J'ai donc choisi DOMDocument et j'ai trouvé la solution suivante:

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: J'ai également ajouté du HTML/texte à mon formulaire et le premier élément d'en-tête ne s'est pas correctement encapsulé après avoir utilisé la classe DOMDocument. Cela a commencé en première ligne et s'est terminé à la toute fin du formulaire. j'ai donc enveloppé tout mon formulaire dans un div, ce qui a fait revenir le balisage correctement.

7
honk31

Vous pouvez supprimer le wrapper span à l'aide de jQuery:

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

Il supprimera l'élément parent de l'entrée, dans ce cas, il supprimera la plage. Veuillez noter qu'après avoir supprimé la plage, certaines fonctionnalités du formulaire de contact 7 peuvent ne pas fonctionner correctement. Par exemple, la validation peut ne pas fonctionner.

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

A partir de WPCF7 version 4.9, adaptation de la réponse ci-dessus afin de ne pas perdre la messagerie d'erreur:

Tout d'abord, dans l'éditeur du CMS, encapsulez votre champ de saisie et tous les autres éléments que vous souhaitez regrouper, par exemple:

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

Notez que vous devrez utiliser la classe "wpcf7-form-control-wrap" et une classe qui correspond à votre nom de champ.

Ensuite, utilisez ce code regex dans votre functions.php. Il peut être nécessaire de l'adapter à vos besoins spécifiques

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

Cela supprimera la balise span autour du champ de saisie tout en laissant votre nouvelle balise span intacte. L'effet est de déplacer essentiellement la balise span autour du champ de saisie uniquement, autour des éléments que vous souhaitez encapsuler.

La raison en est que le code de soumission du formulaire est malheureusement très codé en dur. Afin d'avoir une liberté totale sur la structure de votre HTML, vous devez soit:

  1. Modifiez le code dans rest-api.php autour de la ligne 295 pour changer la valeur "en" en quelque chose de moins spécifique. Naturellement, ce n'est pas un itinéraire recommandé, bien que celui qui vous donne une liberté totale pour structurer votre contenu comme vous le souhaitez. Il sera remplacé par les mises à jour du plugin.

    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. Appuyez sur l'événement wpcf7: invalide et exécutez votre propre code de validation sur le résultat. Inutile de dire que cela duplique une grande partie du travail que le plugin fait déjà pour vous, lorsque vous acceptez (pour l'instant) d'utiliser une balise span avec la classe "wpcf7-form-control-wrap" de la manière décrite ci-dessus conserve toutes les fonctionnalités de le plugin tout en annulant l'un des codages durs les plus ennuyeux du plugin.

6
niaccurshi

En plus du code php de Guicara, le code javascript suivant pourrait obtenir le texte du message d'erreur:

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