Я создаю форму, используя плагин контактной формы 7, где пользователь должен выбрать 2 цвета, установив флажки. Я изменил стиль флажка. Когда пользователь отправляет форму, мне нужно получить цвета, выбранные пользователем.
Когда я использую стандартный флажок, я отлично получаю цвета по электронной почте.
С измененным стилем флажка я не получаю цвета.
Где в HTML следует вставить шорткод, предоставленный контактной формой 7, чтобы получать выбранные цвета по электронной почте?
Я пытаюсь использовать шорткод контактной формы 7:
[checkbox checkbox-red value "Red,"]
HTML-код:
<div class="color-desktop">
<label class="color-container" for="red">
<input class="single-check" type="checkbox" id="red">
<span class="checkmark red"></span>
</label>
<label class="color-container" for="blue">
<input class="single-check" type="checkbox" id="blue">
<span class="checkmark blue"></span>
</label>
<label class="color-container" for="green">
<input class="single-check" type="checkbox" id="green">
<span class="checkmark green"></span>
</label>
Используемый CSS
/* Customize the label (the container) */
.color-container {
display: block;
position: relative;
padding-left: 48px;
margin-bottom: 48px;
cursor: pointer;
float: left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.color-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.color-container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.color-container .checkmark:after {
left: 10px;
top: 0px;
width: 13px;
height: 22px;
border: solid white;
border-width: 0 8px 8px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(40deg);
}
.checkmark.red {
background-color: red;
}
.checkmark.blue {
background-color: blue;
}
.checkmark.green {
background-color: green;
}
Используемый Javascript:
<script type="text/javascript">
var limit = 2;
var $checkboxes = $('input[type=checkbox]').on('change', function(evt) {
if ($checkboxes.filter(':checked').length > limit) {
this.checked = false;
}
});
</script>
Заранее спасибо!