Как убрать все лишние тэги генерируемые Contact Form 7?

Question

[Сергей]

Здравствуйте. Занимаюсь переносом готовой верстки сайта на wordpress. Необходимо перенести готовый дизайн формы в Contact Form, но проблема в том, что плагин сам генерирует много лишних оберток вокруг тегов input, расставляет по своему теги label. В итоге, стили на сайте ведут себя не так, как хотелось бы, форма увеличена в размере, картинка чекбокса не подгружается. Вариант с редактированием стилей не подходит.

Такой вот код

<form class="rental" id="rental">
      <button class="rental__popup-close" type="button">
        <span class="visually-hidden">Закрыть</span>
      </button>
      <div class="rental__wrap-form">
        <h3 class="rental__title">Заявка на прокат</h3>
        <div class="rental__wrap">
          <label for="name" class="rental__label">Имя:</label>
          <input type="text" class="rental__input  rental__input--name" id="name" name="name" required="">
        </div>
        <div class="rental__wrap-note">
          <label for="email" class="rental__label">Электропочта:</label>
          <input type="text" class="rental__input" id="email" name="email" required="">
          <p class="rental__note">Мы не присылаем спам.</p>
        </div>
        <div class="rental__wrap">
          <label for="phone" class="rental__label">Телефон:</label>
          <input type="tel" inputmode="numeric" class="rental__input" id="phone" name="phone" placeholder="+7" required="">
        </div>
        <textarea class="rental__message" placeholder="Пожелания"></textarea>
        <div class="rental__wrap-consent">
          <input type="checkbox" id="consent" class="rental__checkbox" checked="" required="">
          <label for="consent" class="rental__label-consent">Даю согласие на обработку персональных данных</label>
        </div>
        <button class="sendmail-btn" type="submit">Отправить заявку</button>
      </div>
    </form>

Превращается в такой
Если отсюда можно будет что либо понять.


Буду вам очень признателен за любую подсказку.

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Обычно помогает:
define( 'WPCF7_AUTOP', false );
Подробная инструкция здесь - https://stackoverflow.com/questions/32539905/conta...

Comments

[Сергей]

Большое вам спасибо, но это решает лишь часть проблемы. Теги input по прежнему оборачиваются в теги span.

[Орхан Гасанлы]

Сергей,

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

источник - https://stackoverflow.com/questions/39731560/how-c...

[Сергей]

Спасибо. Ваши советы очень помогли.

[Тимур Орлов]

Феникс, благодарю и я тебя за эту полезную информацию, пойду проверять )

[denism300]

azerphoenix, для чекбокса не работает, остается конструкция вида:

<span class="wpcf7-form-control wpcf7-acceptance">
    <span class="wpcf7-list-item">
        <input type="checkbox" name="our-policy" value="1" aria-invalid="false" class="form-check-input" id="our-policy">
    </span>
</span>

Answer 2

[Yaroslav TheRock]

// Contact Form 7 remove auto added p tags
add_filter('wpcf7_autop_or_not', '__return_false');

Answer 3

[Сёмка Гавриленко]

Если честно, рекомендую не переписывать плагин под себя, а подстроиться под плагин и вёрстку делать под стандартные теги Contact Form 7

Comments

[Сергей]

Очень хотелось бы, но требование заказчика не менять верстку, если возможно, поэтому ищу способы обхода.

[Сёмка Гавриленко]

Сергей, может тогда стоит посмотреть в сторону какого-нибудь другого плагина?

[Тимур Орлов]

Сёмка, твоя отчасти правда, но все мы прекрасно знаем что плагины авторы пишут не исключительно из соображений семантики, скорее на оборот, ВОПРЕКИ семантике наводят откровенную грязь в коде и это факт, как показывают многочисленные анализы. Авторы таким образом оставляют подпись. Уникальными быть не могут, так хоть чем-то выделиться.
На счёт лишних тегов в CF7, они действительно лишние, это тоже факт. Ну вдумайся, ЗАЧЕМ для экшина или радио/чекбокс полей делать вложенность СПАН тегов в целых ТРИ уровня ? даже с учётом ИЕ7 легко можно было справиться с одним уровнем вложенности и задать тому же radio нужный стиль.
Нет, однозначно никакой полезной информации в такой вложенности нет, а следовательно, мои доводы подтверждаются логикой - автор по собственной прихоти так сделал, и ничего не меняется с обновлениями.

[Сёмка Гавриленко]

Velimudr1, я не утверждаю, что автор сделан идеально, я утверждаю что стоит или подстроиться под автора или выбрать другой плагин.

[Елена]

Тимур Орлов, грязь - не то слово. Всегда приходится потом бороться с тем ужасом, в который они оборачивают любую верстку. Сейчас вот тоже пытаюсь понять, что такого делает CF7 с моей формой, что она вопреки всем законам flexbox стала занимать не ту ширину, что ей прописана. И это при условии, что в фильтрах я отрубила оборачивание плагином инпутов и прочих элементов в его любимые теги p и span. Видимо, что-то еще где-то осталось.

P.S. Вот у modx мне нравится formit. Там нет такой дурки. Там верстка формы ровно такая, какой ты верстаешь ее сам. От тебя только требуется в чанках со своей формой расставить нужные плейсхолдеры от компонента, и все. Никакие стили formit никуда не накидывает, ни во что не оборачивает. Для юзания дефолтной верстки у formit есть свои дефолтные чанки. Не хочешь дефолтные, создаешь свои и прописываешь в вызове компонента. Почему в cf7 не сделали также? Эх...

[Тимур Орлов]

Елена, Согласен, это хорошо что в модике лучше.