Как сделать радио кнопки в Contact form 7 в таком виде?

Question

[Minusator]

Добрый день!
Как сделать радио кнопки такими и внедрить в каждую кнопку разное изображение?



Благодарю за помощь!

Comments

[Антон Литвиненко]

Радиокнопки выводятся одним шорткодом, в настройках шорткода особо ничего нет, кроме добавления тега label, стилизовать придётся ту разметку, которую создаёт плагин, максимум ещё добавить общую обертку для всех радиокнопок

Answer 1

[Антон Литвиненко]

Разверну немного комментарий.
Чтобы застилить радиокнопки в CF7 без плагинов придется юзать стандартную разметку
Вот такой шорткод

[radio radio-637 use_label_element default:1 "Telegram" "Facebook" "Viber"]

Отдаст вот такую разметку

<span class="wpcf7-form-control-wrap radio-637">
	<span class="wpcf7-form-control wpcf7-radio">
		<span class="wpcf7-list-item first">
			<label>
				<input type="radio" name="radio-637" value="Telegram" checked="checked">
				<span class="wpcf7-list-item-label">Telegram</span>
			</label>
		</span>
		<span class="wpcf7-list-item">
			<label>
				<input type="radio" name="radio-637" value="Facebook">
				<span class="wpcf7-list-item-label">Facebook</span>
			</label>
		</span>
		<span class="wpcf7-list-item last">
			<label>
				<input type="radio" name="radio-637" value="Viber">
				<span class="wpcf7-list-item-label">Viber</span>
			</label>
		</span>
	</span>
</span>

У ее обертки есть класс по имени группы радиокнопок, но можно завернуть еще и в свою обертку.
у первого и последнего элемента есть классы first и last соответственно, к остальным придется стучать через nth-child().
Расположение элементов позволяет скрыть стандартную радиокнопку и стилить идущий за ней span c классом wpcf7-list-item-label через + как все делают. Небольшой пример стилей, тут я отталкиваюсь от обертки custom-checkbox

Тыц

.custom-checkbox label {
  display: block;
}

.custom-checkbox .wpcf7-list-item {
  display: block;
}

.custom-checkbox input[type="radio"],
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
  position: absolute;
}

.custom-checkbox .wpcf7-list-item-label {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-right: 10px;
  cursor: pointer;
  font-size: 1.125rem;
  color: #0d0c0c;
  margin-bottom: 10px;
}

.custom-checkbox .wpcf7-list-item-label::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0px;
  width: 21px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  border-radius: 50%;
  background-color: #EDEDED;
  font-size: 18px;
  color: #999;
}

.custom-checkbox input[type="checkbox"] + .wpcf7-list-item-label::before {
  border-radius: 0;
}

.custom-checkbox input[type="radio"] + .wpcf7-list-item-label::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 4px;
  width: 13px;
  height: 13px;
  line-height: 13px;
  border-radius: 50%;
  background-color: #999;
  opacity: 0;
}

.custom-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  content: '\2714';
}

.custom-checkbox input[type="radio"]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}