Замените флажки контактной формы 7 флажками с пользовательскими изображениями CSS

У меня есть контактная форма, созданная с помощью Contact Form 7 для WordPress, которая содержит флажки. Я хотел бы оформить их в виде флажков изображений, чтобы они выделялись немного больше. На самом деле я нашел красивый стиль флажка, который уже создал на странице. Мне просто нужна помощь с интеграцией его в контактную форму 7.

Вот конкретная страница: https://www.mattrittman.com/animation-licensing-v2/

По сути, просто хочу, чтобы то, что находится в белом поле, заменило стандартные флажки в форме ниже на этой странице.

Вот фрагмент кода для флажков моих пользовательских изображений:

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #0077ef;
  --box-shadow: #0077ef;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: left;
  justify-content: left;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
  margin: 0 8px;
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  /*margin-right: 0.75rem;*/
}

.cont-checkbox:active {
  transform: scale(0.9);
}

.cont-checkbox input {
  display: none;
}

.cont-checkbox input:checked + label {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--background);
}

.cont-checkbox input:checked + label img {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

.cont-checkbox input:checked + label .cover-checkbox {
  opacity: 1;
  transform: scale(1);
}

.cont-checkbox input:checked + label .cover-checkbox svg {
  stroke-dashoffset: 0;
}

.cont-checkbox label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

.cont-checkbox label img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.cont-checkbox label .cover-checkbox {
  position: absolute;
  right: 4px;
  top: 3px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--box-shadow);
  border: 2px solid #fff;
  transition: transform var(--transition),
    opacity calc(var(--transition) * 1.2) linear;
  opacity: 0;
  transform: scale(0);
}

.cont-checkbox label .cover-checkbox svg {
  width: 11px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 4px 0 0 3px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  transition: stroke-dashoffset 0.4s ease var(--transition);
  stroke-dashoffset: 16px;
}

.cont-checkbox label .info {
  text-align: center;
  margin-top: -1.6rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #000;
}

<div class = "cont-main">
  <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-1" />
    <label for = "myCheckbox-1">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/glock-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How a Glock Works</div>
    </label>
  </div>
  <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-2" />
    <label for = "myCheckbox-2">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/ar15-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How an AR-15 Works</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-3" />
    <label for = "myCheckbox-3">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/gas-system-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">AR-15 Gas System</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-4" />
    <label for = "myCheckbox-4">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/revolver-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How a Revolver Works</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-5" />
    <label for = "myCheckbox-5">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/shotgun-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How a Shotgun Works</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-6" />
    <label for = "myCheckbox-6">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/kar98k-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How a Kar98k Works</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-7" />
    <label for = "myCheckbox-7">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/ak47-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How an AK-47 Works</div>
    </label>
  </div>
    <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-8" />
    <label for = "myCheckbox-8">
      <img
        src = "https://www.mattrittman.com/wp-content/uploads/2024/08/ac-thumb.jpg"
      />
      <span class = "cover-checkbox">
        <svg viewBox = "0 0 12 10">
          <polyline points = "1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class = "info">How A/C Works</div>
    </label>
  </div>
</div>
</div>

Вот код, который генерирует CF7:

<span class = "wpcf7-form-control-wrap" data-name = "videos">
    <span class = "wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How a Glock Works" />
                <span class = "wpcf7-list-item-label">How a Glock Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How an AR-15 Works" />
                <span class = "wpcf7-list-item-label">How an AR-15 Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "AR-15 Gas System" />
                <span class = "wpcf7-list-item-label">AR-15 Gas System</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How a Revolver Works" />
                <span class = "wpcf7-list-item-label">How a Revolver Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How a Shotgun Works" />
                <span class = "wpcf7-list-item-label">How a Shotgun Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How a Kar98k Works" />
                <span class = "wpcf7-list-item-label">How a Kar98k Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How an AK-47 Works" />
                <span class = "wpcf7-list-item-label">How an AK-47 Works</span>
            </label>
        </span>
        <span class = "wpcf7-list-item">
            <label>
                <input type = "checkbox" name = "videos[]" value = "How Air Conditioning Works" />
                <span class = "wpcf7-list-item-label">How Air Conditioning Works</span>
            </label>
        </span>
    </span>
</span>

Итак, что вы пробовали использовать HTML-разметку CF7s?

— 22.08.2024 18:40

@Vucko Не уверен, что это возможно, так как мне нужно будет добавить собственный HTML к каждому элементу флажка...

— 22.08.2024 22:13

html css wordpress forms

22.08.2024 16:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Помните, что это, по сути, упражнение по стилизации. Вы хотите оформить флажки CF7 так, чтобы они выглядели красиво. Но, конечно, правила стиля красивых флажков построены вокруг HTML-структуры этих флажков. Итак, первая задача — изменить структуру HTML формы CF7, чтобы она максимально соответствовала красивой структуре.

Если вы отключите опцию «Обернуть каждый элемент элементом метки» при создании флажков (или удалите опцию use_label_element из сгенерированного тега флажка CF7), полученный HTML-код будет очень близок по структуре к коду, который представляет ваш красивый флажки. Изучите это сравнение:

Структура CF7

<span class = "wpcf7-form-control-wrap" data-name = "checkbox-889">

  <span class = "wpcf7-form-control wpcf7-checkbox">
    <span class = "wpcf7-list-item first">
      <input type = "checkbox" name = "checkbox-889[]" value = "one">
      <span class = "wpcf7-list-item-label">one</span>
    </span>
    <span class = "wpcf7-list-item">
      <input type = "checkbox" name = "checkbox-889[]" value = "two">
      <span class = "wpcf7-list-item-label">two</span>
    </span>
    <span class = "wpcf7-list-item last">
      <input type = "checkbox" name = "checkbox-889[]" value = "three">
      <span class = "wpcf7-list-item-label">three</span>
    </span>
  </span>

</span>

Красивая структура

<div class = "cont-main">
  <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-1" />
    <label for = "myCheckbox-1"> ... </label>
  </div>
  <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-2" />
    <label for = "myCheckbox-2"> ... </label>
  </div>
  <div class = "cont-checkbox">
    <input type = "checkbox" id = "myCheckbox-3" />
    <label for = "myCheckbox-3"> ... </label>
  </div>
</div>

Проблема в том, что CF7 в этом сценарии не генерирует элементы <label>, а генерирует <span class = "wpcf7-list-item-label">. Когда <label> связан с флажком, щелчок по метке переключает флажок — это важно для правильной работы красивых флажков, но <span>, сгенерированный CF7, этого не сделает. Я могу придумать два возможных решения, оба из которых требуют Javascript: либо (а) преобразовать <span> в <label>, либо (б) добавить прослушиватель событий щелчка к внешнему элементу-оболочке, который определяет, когда нажат один из <span class = "wpcf7-list-item-label">. и переключает соответствующий флажок. Вот фрагмент, демонстрирующий первое из этих решений:

const checkboxes = document.querySelectorAll('[data-name=checkbox-889] .wpcf7-list-item')
checkboxes.forEach(cb => {
  const i = cb.querySelector('input')
  i.id = `cb889-${i.value}`         /* assign the checkbox a unique id */
  const l = cb.querySelector('.wpcf7-list-item-label')
  const nl = []                     /* array for the <label> markup */
  nl.push(`<label for = "${i.id}" class = "wpcf7-list-item-label">`)
  nl.push(l.innerHTML)              /* copy the content from the <span> */
  nl.push('</label>')
  l.insertAdjacentHTML('afterend', nl.join('')) /* insert the <label> */
  l.remove()                        /* remove the <span> */
})

label {
  -webkit-user-select: none;
  user-select: none;
}

<p>Click on the label to toggle the corresponding checkbox</p>

<span class = "wpcf7-form-control-wrap" data-name = "checkbox-889">

  <span class = "wpcf7-form-control wpcf7-checkbox">
    <span class = "wpcf7-list-item first">
      <input type = "checkbox" name = "checkbox-889[]" value = "one">
      <span class = "wpcf7-list-item-label">one</span>
    </span>
    <span class = "wpcf7-list-item">
      <input type = "checkbox" name = "checkbox-889[]" value = "two">
      <span class = "wpcf7-list-item-label">two</span>
    </span>
    <span class = "wpcf7-list-item last">
      <input type = "checkbox" name = "checkbox-889[]" value = "three">
      <span class = "wpcf7-list-item-label">three</span>
    </span>
  </span>

</span>

Как только все будет отсортировано, следующей задачей будет замена (с помощью редактора форм CF7) содержимого каждого из элементов .wpcf7-list-item-label содержимым меток из красивых флажков — <img>, <svg> и <div> (хотя вам придется замените <div> на <span>).

Тогда остается просто добавить несколько селекторов к уже имеющимся правилам стиля, чтобы они применялись и к структуре CF7. Так, например, возьмем следующее правило стиля:

.cont-checkbox label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

Эквивалентным селектором для структуры CF7 будет .wpcf7-list-item-label .wpcf7-list-item-label, поэтому вам просто нужно изменить селектор в правиле стиля на:

.cont-checkbox label, .wpcf7-list-item-label .wpcf7-list-item-label {
  ...
}

Ух ты, огромное спасибо @Brett Donald за подробный ответ! Я поработаю над этим завтра и посмотрю, смогу ли я это реализовать. Я искренне ценю твою помощь, чувак!

— 23.08.2024 05:31

У меня ваш javascript работает, но теги <label> по какой-то причине не создаются. Он присваивает каждому флажку уникальный идентификатор и все такое... просто возникают проблемы с тегами <label>. Есть идеи?

— 23.08.2024 16:31

другой мой вопрос: как именно вы можете вставить дополнительный HTML в каждый элемент флажка через редактор форм CF7? Когда вы создаете поле флажка, скажем, с 8 флажками, он создает следующий код: [checkbox* checkbox-889 class:video-licensing "How a Glock Works" "How an AR-15 Works" "AR-15 Gas System" "How a Revolver Works" "How a Shotgun Works" "How a Kar98k Works" "How an AK-47 Works" "How Air Conditioning Works"]

— 23.08.2024 17:30

23.08.2024 01:16