контактная форма 7 флажок стиль

Question

Прежде всего, я заранее извиняюсь за свое невежество, я очень новичок в такого рода вещах, но пытаюсь учиться ..

Таким образом, моя проблема заключается в том, что я пытаюсь создать 6 флажков в контактной форме 7, отображаемых в сетке из 6, флажков, которые я создал с помощью этого сайта.

.select-size input {
  display: none;
}

label {
  display: inline-block;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 5px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="select-size">
  <input type="checkbox" name="s-size" id="windows" />
  <input type="checkbox" name="s-size" id="doors" />
  <input type="checkbox" name="s-size" id="roofline" />
  <input type="checkbox" name="s-size" id="conservatories" />
  <input type="checkbox" name="s-size" id="extensions" />
  <input type="checkbox" name="s-size" id="repairs" />

  <label for="windows">Windows</label>
  <label for="doors">Doors</label>
  <label for="roofline">Roofline</label>
  <label for="conservatories">Conservatories</label>
  <label for="extensions">Extensions</label>
  <label for="repairs">Repairs</label>
</div>

код моей контактной формы 7:

 <div class="row">
<div class="col-xs-12 col-lg-6">

[text* your-name placeholder "Your Name"]

[email* your-email placeholder "Your Email"]

[tel* tel-395 placeholder "Your Telephone"]



</div>

<div class="col-xs-12 col-lg-6">

[checkbox* checkbox-495 id:checkbox use_label_element "Windows" "Doors" "Conservatories" "Roofline" "Extensions" "Repairs"]

</div>
</div>

<div class="row vertical-center">
<div class="col-xs-12 col-lg-6">
<p>We will contact you within one business day.</p>
</div>
<div class="col-xs-12 col-lg-6 submit-button-align-right">
[submit "Send Message"]
</div>
</div>

сейчас .... Я застрял на том, как я объединяю их вместе? это далеко над моей головой, я обычно могу обойтись в общих чертах, но это действительно меня озадачило.

если кто-нибудь может оказать мне какую-либо помощь, она будет очень признательна

Заранее спасибо,

С уважением

Answer 1

try this for 3 box per row
<div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="windows">Windows</label>
      <input type="checkbox" name="s-size" id="windows" />
      <label for="doors">Doors</label>
      <input type="checkbox" name="s-size" id="doors" />
      <label for="roofline">Roofline</label>
      <input type="checkbox" name="s-size" id="roofline" />
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="conservatories">Conservatories</label>
      <input type="checkbox" name="s-size" id="conservatories" />
      <label for="extensions">Extensions</label>
      <input type="checkbox" name="s-size" id="extensions" />
      <label for="repairs">Repairs</label>
      <input type="checkbox" name="s-size" id="repairs" />
    </div>
    </div>

Answer 2

, окно не выделяется при выделении и не может скрыть исходный флажок.

Кто-нибудь?

фрагмент контакта

#checkbox {
  display: none;
}

.checkbox {
  float: left;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 2px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="row">
  <div class="col-xs-12 col-lg-6">

    [text* your-name placeholder "Your Name"] [email* your-email placeholder "Your Email"] [tel* tel-395 placeholder "Your Telephone"]



  </div>

  <div class="col-xs-12 col-lg-6">

    [checkbox* checkbox-203 id:windows class:checkbox use_label_element "Windows"] [checkbox* checkbox-203 id:doors class:checkbox use_label_element "Doors"] [checkbox* checkbox-203 id:conservatories class:checkbox use_label_element "Conservatories"] [checkbox*
    checkbox-203 id:roofline class:checkbox use_label_element "Roofline"] [checkbox* checkbox-203 id:extensions class:checkbox use_label_element "Extensions"] [checkbox* checkbox-203 id:repairs class:checkbox use_label_element "Repairs"]

  </div>
</div>

<div class="row vertical-center">
  <div class="col-xs-12 col-lg-6">
    <p>We will contact you within one business day.</p>
  </div>
  <div class="col-xs-12 col-lg-6 submit-button-align-right">
    [submit "Send Message"]
  </div>
</div>

Answer 3

Формат, используемый контактной формой 7, немного отличается от вашего HTML, но есть несколько вариантов таргетинга, которых должно быть достаточно для захвата любого необходимого элемента.

При создании формы вы создадите шорткод флажка, который будет выглядеть примерно так

[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]

This code will generate:

• Набор из двух флажков

  • Каждый из них заключен в элемент (сам текст
    в а)

  • Родительский элемент с id = "my-checkboxes" `

    Таким образом, выходная разметка будет выглядеть примерно так (вместе с некоторыми классы wpcf7 и Wordpress)

  Foo бар

Поскольку у вас есть идентификатор родительского элемента, вы можете нацелить эту конкретную часть формы и элементы в ней, используя селекторы в CSS или JQuery.

Например, #mycheckboxes> label> input и #mycheckboxes> label> input + span.

Для улучшения параметров таргетинга вы также можете создать один флажок для каждого шорткода и назначить идентификатор для каждого контейнера флажков.

[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]

надеюсь, это поможет, спасибо