Замените флажки контактной формы 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 (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Wordpress20916 вопросов Forms7878 вопросов

Ответ:

Решено

Помните, что это, по сути, упражнение по стилизации. Вы хотите оформить флажки 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 {
  ...
}

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

Ответ:

Интересные вопросы для изучения